颜色选择器

HEX

RGB

HSL

Hue

Saturation

Lightness

智能配色生成器

基于图像

📁 上传图片

色彩理论小课堂

选择一种配色方案，了解其原理和视觉效果。

色彩库

配色方案画板

#3498db

#2980b9

#9b59b6

#f39c12

#e74c3c

整体明度

整体饱和度

场景预览

欢迎使用颜色工具

这是一个网页模板预览，展示您的配色方案在实际网页中的效果。

功能一

智能配色生成

功能二

实时预览

功能三

代码导出

按钮组件

输入组件

卡片组件

卡片标题

这是一个卡片组件的示例内容，展示配色效果。

功能模块

模块内容展示

无障碍检查

AaBbCc 测试文本

背景色

文字色

对比度: --

代码导出

                                :root {
  --primary-color: #3498db;
  --secondary-color: #2980b9;
  --accent-color: #9b59b6;
  --warning-color: #f39c12;
  --danger-color: #e74c3c;
}
                            

                                $primary-color: #3498db;
$secondary-color: #2980b9;
$accent-color: #9b59b6;
$warning-color: #f39c12;
$danger-color: #e74c3c;
                            

                                module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#3498db',
        secondary: '#2980b9',
        accent: '#9b59b6',
        warning: '#f39c12',
        danger: '#e74c3c',
      },
    },
  },
}
                            

颜色历史

颜色工具使用教程

选择基础颜色

使用左侧的颜色选择器或输入HEX/RGB值选择您的基础颜色。您可以通过拖拽滑块精确调整色相、饱和度和明度。

生成配色方案

在"智能配色生成器"中选择一种配色方案（如单色、互补色、类似色等），或点击"幸运色"获取随机推荐。您还可以上传图片提取主色调。

调整配色方案

在中间的"配色方案画板"中，您可以单独编辑每个颜色，或使用整体调整滑块统一修改明度和饱和度。

预览与检查

使用"场景预览"功能查看配色在网页、UI组件和移动端的效果。右侧的"无障碍检查"工具确保您的配色符合WCAG对比度标准。

导出与保存

在右侧的"代码导出"部分复制CSS/SCSS/Tailwind代码。点击"保存配色"将您的方案存储在本地，或"重置配色"重新开始。

常见问题

颜色工具是免费的吗？

是的，颜色工具的所有核心功能都是完全免费的，包括颜色选择、配色生成、对比度检查和代码导出等。

我可以保存我的配色方案吗？

当然可以！点击"保存配色"按钮，您的配色方案将存储在浏览器的本地存储中，下次访问时仍然可用。

如何从图片中提取颜色？

在"基于图像"部分点击"上传图片"，选择一张图片后，点击"提取配色"按钮，系统将自动分析图片并生成配色方案。

什么是WCAG对比度标准？

WCAG（Web内容可访问性指南）对比度标准规定了文本与背景色之间的最小对比度要求，以确保视觉障碍用户能够清晰阅读内容。AA级要求正文文本对比度至少为4.5:1，AAA级要求至少为7:1。

我可以在商业项目中使用这些配色吗？

当然可以！您使用颜色工具创建的所有配色方案都可以自由用于个人或商业项目，没有任何限制。