颜色转换完整指南：HEX / RGB / HSL / HSV / WCAG 对比度
前端开发与设计师必备的颜色格式互转、配色生成、无障碍对比度检查全流程教程。
颜色在网页和 UI 设计中有 4 种以上常见表示法，每种适合不同场景。HEX 紧凑、RGB 直观、HSL 适合调色板、HSV 适合取色器。这篇文章把它们的换算原理、何时该用哪种、如何用 WCAG 标准检查可访问性讲清楚。
4 种颜色格式速览
- HEX：
#RRGGBB，每对十六进制代表 0-255 的红/绿/蓝分量。#FF0000= 红。最紧凑，CSS 中最常用。 - RGB：
rgb(255, 0, 0)，三个十进制 0-255。直观但更长。rgba(...)加透明度。 - HSL：
hsl(0, 100%, 50%)，色相 0-360（红、橙、黄...）+ 饱和度 + 明度。调色板友好。 - HSV：
hsv(0, 100%, 100%)，色相 + 饱和度 + 亮度。Photoshop 取色器用的就是它。
HSL 为什么适合做主题色
HSL 的明度通道（Lightness）从 0 到 100： - 0 = 全黑 - 100 = 全白 - 50 = 纯色
固定 H 和 S，只调 L，就能从一个主色系生成完整明度阶梯（85/70/55/40/25），用作 hover、active、disabled 等状态色。Tailwind 的 50/100/.../900 阶梯就是按 HSL 明度划分的。本工具生成调色板用的也是这个原理。
WCAG 对比度（无障碍）
WCAG 2.1 是 W3C 制定的网页无障碍标准。文字与背景的对比度必须达到：
- AA 级：正文 4.5:1，大字（≥18px 或加粗 14px）3:1
- AAA 级：正文 7:1，大字 4.5:1
本工具计算两个颜色的相对亮度比，给出对比度数值与是否通过 AA/AAA。
实战建议： - 普通正文用 AA 4.5:1 起步（很多默认 #666 在白底上不够） - 政府/医疗/教育站点必须 AA 起，最好 AAA - 浅色背景配深色字（比反过来更易读）
调色板生成原则
工具基于主色的 HSL 生成 5 阶色板（明度 85/70/55/40/25）。这种均匀阶梯适合做： - 状态色（hover = -10 明度，active = -20） - 分类标签（同一色相不同明度区分严重程度） - 数据可视化（深浅层级）
避免随意挑两个无关色组合——色相差距大的颜色容易脏。
CMYK 与印刷
前端不太用 CMYK（青/品红/黄/黑），但做品牌物料印刷时绕不开。CMYK 是减色模型（油墨叠加变暗），RGB 是加色模型（光叠加变亮）。同一颜色在屏幕和印刷上看到的效果会有差异，专业项目建议印刷前打样。
常见问题
HEX 三位短写代表什么？
#RGB 是 #RRGGBB 的简写，每个字符复制一次。`#f0a` = `#ff00aa`。仅适合纯色。
rgba 的 alpha 是 0-1 还是 0-100？
CSS 中 alpha 是 0-1 浮点数，1 = 完全不透明。HSL/HSV 中的饱和度和明度才是 0-100% 百分比。
什么是色彩空间？
sRGB（屏幕标准）、Display P3（更广，iPhone）、Adobe RGB（印刷）等。本工具默认 sRGB。
WCAG 不达标会怎样？
部分用户（视力障碍、色盲）会看不清。法律层面，欧盟 EAA、中国信通院无障碍标准都要求商业站点合规。