提示：可直接在任意输入框中修改数值，其它格式将自动同步更新。
基于当前颜色的色相生成配色方案，点击任意色块可应用为当前颜色。
检测前景色与背景色的对比度是否符合无障碍标准（WCAG 2.1）。
在网页与设计工作中，同一种颜色常用多种格式表示，各有适用场景。本工具支持 HEX、RGB、HSL、HSV、CMYK 五种格式的实时互转。
形如 #FF6B6B，用 6 位十六进制数分别表示红、绿、蓝三个通道（每通道 2 位，范围 00-FF）。也支持 3 位简写 #F00。它是 CSS 中最常用的写法，紧凑且兼容性最好。
形如 rgb(255, 107, 107)，三个数值范围 0-255，对应加色法中红、绿、蓝光的强度。CSS 中可直接使用 rgb() 与带透明度的 rgba()。
形如 hsl(0, 100%, 71%)：色相 H 为 0-360° 的色环角度（0 红、120 绿、240 蓝）；饱和度 S 和亮度 L 为 0%-100%。HSL 更符合人对颜色的直觉，调配色相和明暗非常方便。
与 HSL 类似，但第三个分量是明度 Value 而非亮度 Lightness。HSV 常用于图像编辑软件（如 Photoshop 的拾色器），V=100% 时为该色相下最纯的色。
形如 cmyk(0%, 58%, 58%, 0%)，基于减色法，用于印刷。四个分量均为百分比，K（黑色）用于提升暗部纯度与节省油墨。屏幕显示为 RGB，因此 CMYK 值仅为近似转换参考。
好的配色往往建立在色环关系之上。本工具基于 HSL 色相自动生成四种经典配色方案：
实践中建议遵循 60-30-10 原则：主色 60%、辅助色 30%、强调色 10%，让画面有主次、不杂乱。
Web 内容无障碍指南（WCAG）2.1 通过对比度比率衡量文字与背景的可读性。比率范围 1:1 到 21:1，计算基于颜色的相对亮度（加权 RGB 通道）。
本工具的对比度检查器会自动计算前景与背景的比率，并标注各项是否通过。设计按钮、链接、图标等界面元素时，也应保证与背景对比度 ≥ 3:1。
| 颜色 | 名称 | HEX | RGB |
|---|
本颜色选择器提供了从拾色到配色的一站式解决方案，以下是详细的使用指南：
基础拾色：在页面顶部的色块区域，拖动色相选择条和饱和度/明度面板即可精确选取颜色。你也可以直接在HEX、RGB、HSL、HSV或CMYK输入框中输入数值，其他格式会实时同步更新。点击任意格式右侧的「复制」按钮，即可将颜色代码复制到剪贴板，方便直接粘贴到CSS、设计软件或代码编辑器中。
配色方案生成：工具内置了多种经典配色方案：互补色（色环180°对侧）、类比色（相邻色）、三元色（等距三色）、分裂互补色等。选择一个主色后，点击不同的配色模式即可一键生成协调的颜色组合。每个配色结果都支持单独复制HEX值，方便直接应用到UI设计中。
WCAG对比度检查：在「对比度检查」区域设置前景色和背景色，工具会自动计算两色的对比度比值，并标注是否符合WCAG 2.1的AA级和AAA级标准。正常文本需要达到4.5:1（AA级）或7:1（AAA级），大号文本（18pt以上或14pt粗体）需要达到3:1（AA级）或4.5:1（AAA级）。
渐变色生成：选择起始色和结束色，工具会生成对应的方向渐变CSS代码（如linear-gradient），可直接复制到网页样式中使用。
色彩是设计中最直观的表现元素，以下是几个典型的颜色工具应用场景：
网页与UI设计：前端开发者和UI设计师在设计网页界面时，需要确保文字与背景的对比度符合无障碍访问标准（WCAG）。本工具的对比度检查器可以实时验证设计稿是否达标，避免因对比度不足导致的可访问性问题。同时，渐变色生成器可以快速输出现代网页流行的渐变背景CSS代码。
品牌视觉设计：品牌设计师在制定企业VI（视觉识别系统）时，需要为主色、辅色、强调色定义精确的色值。通过本工具的配色方案功能，可以基于品牌主色快速生成一整套协调的辅助色系，确保品牌视觉的一致性和专业度。
印刷与出版设计：平面设计师在制作海报、宣传册、名片等印刷品时，需要将屏幕上的RGB颜色转换为印刷用的CMYK颜色。本工具支持五种颜色格式的实时互转，帮助设计师在不同色彩空间间准确传递颜色信息，减少屏幕与印刷成品的色差。
色彩模型与色域：RGB是加色模型，通过红绿蓝三原色的叠加产生颜色，适用于屏幕显示。CMYK是减色模型，通过青、品红、黄、黑四种油墨的叠加吸收光线，适用于印刷。HSL和HSV基于人眼对色彩的感知方式（色相、饱和度、明度），更直观的调色方式。不同设备支持的色域（如sRGB、DCI-P3、Adobe RGB）不同，同一颜色在不同屏幕上可能显示略有差异。
WCAG无障碍标准：Web内容无障碍指南（WCAG）由W3C制定，旨在确保视障用户也能正常访问网页内容。其中对比度要求是保证文字可读性的关键。除了视觉正常的用户，低视力用户、老年用户以及在强光环境下使用手机的用户都受益于高对比度设计。将无障碍设计融入产品，不仅是合规要求，更是提升用户体验的有效手段。
颜色心理学：不同颜色会传递不同的情感和品牌联想。蓝色通常代表信任和科技感（如Facebook、PayPal），绿色代表自然和健康（如微信、星巴克），红色代表热情和紧迫（如YouTube、Netflix）。理解颜色心理学可以帮助设计师更有策略地运用色彩，达到预期的沟通效果。
点击顶部色块拖动拾色器，或在预设色板中点选任意颜色即可。选中后 HEX/RGB/HSL/HSV/CMYK 会同步显示，点击对应"复制"按钮即可一键复制到剪贴板。
HEX 和 RGB 直接描述红绿蓝光强度，适合屏幕显示；HSL 与 HSV 用色相/饱和度/明度描述，调色更直观；CMYK 是减色法，用于印刷。本工具支持五种格式一键互转。
在"WCAG 对比度检查"中设置前景色与背景色，工具会基于相对亮度计算比率，并标注 AA/AAA 的正常文字与大号文字是否达标（4.5:1、3:1、7:1）。
互补色是色环上正对（相距 180°）的两色，对比最强；类比色是色环上相邻（约 30°）的几个颜色，更和谐柔和。互补色适合强调，类比色适合统一氛围。
会。你选择的颜色会自动记录在"颜色历史"中并保存在浏览器本地（localStorage），刷新页面后依然存在，最多保留 24 条。可随时点击"清空历史"删除。
完全免费，零依赖纯前端实现。所有颜色计算与转换都在你的浏览器本地完成，不会上传到任何服务器，断网也能正常使用。