颜色工具 集取色器、格式转换、配色方案、WCAG 对比度检测于一体。覆盖常见色彩空间（HEX / RGB / HSL / HSV / CMYK）与透明度。
5 种色彩空间：
| 格式 | 形态 | 定义 | 主用场景 |
|---|---|---|---|
| HEX | #6c63ff / #6c63ffcc | 6 位 RGB + 可选 2 位 Alpha | Web、CSS、图标 |
| RGB(A) | rgb(108,99,255) / rgba(…,0.8) | 加色三通道 | 屏幕显示、canvas |
| HSL | hsl(243,61%,65%) | 色相 + 饱和 + 亮度 | 程序化调色、主题变体 |
| HSV | hsv(243,61%,100%) | 色相 + 饱和 + 明度 | 取色器、图像处理 |
| CMYK | cmyk(58%,61%,0%,0%) | 减色四通道 | 印刷出版 |
WCAG 对比度（无障碍标准）：
| 等级 | 正文 | 大字 / UI 组件 |
|---|---|---|
| AA | ≥ 4.5:1 | ≥ 3:1 |
| AAA | ≥ 7:1 | ≥ 4.5:1 |
配色方案原理（基于 HSL 色相环）：
实战建议：CSS 变量存主色用 HSL（调衍生色方便：同色相改 L 得浅色、改 S 得灰色）；设计稿交付用 HEX（兼容性最好）；印刷前转 CMYK 预览；UI 组件开发后必跑 WCAG 检查。
都可以。6 位（`#6c63ff`）是 RGB 不透明色；8 位（`#6c63ffcc`）末两位是 Alpha（透明度）十六进制，`00` 全透明、`ff` 不透明、`cc` 约 80%。3 位简写（`#f0c`）等价于 `#ff00cc`。CSS 和现代浏览器都支持 8 位 HEX，设计稿里遇到 `#rrggbbaa` 格式就是含透明度。
两者都用 H（色相，0-360°） 表示颜色种类，区别在后两维——HSL 的 S 是饱和度（离灰轴距离）、L 是亮度（50% 为最艳，0% 黑 100% 白）；HSV 的 S 是饱和度、V 是明度（0% 黑 100% 最艳）。调色板上 HSL 拉 L 到 100% 是白，HSV 拉 V 到 100% 是最艳的色——做取色器 HSV 更直观，写 CSS 用 HSL 更通用。
因为原理不同——RGB 是加色（光的叠加，全叠加得白），屏幕发光用；CMYK 是减色（颜料吸收光，全叠加得黑），印刷用。屏幕鲜艳的荧光色（如 `#ff0000` 纯红）印不出来，会暗两度；反过来印刷的特殊专色（Pantone）在屏幕也显示不准。做设计稿交印前必须转 CMYK 预览，否则印出来会"色偏"。
对比度 = 前景亮度和背景亮度的比值，范围 1:1（全同色）到 21:1（纯黑白）。AA 要求：正文 ≥ 4.5:1，大字（≥ 18pt 或 ≥ 14pt 粗体） ≥ 3:1；AAA 要求：正文 ≥ 7:1，大字 ≥ 4.5:1。消费级产品 AA 够用，政府/医疗/老年用户多的产品要 AAA。浅灰字（`#999`）配白底只有 2.85:1，不合规。
别只靠颜色区分——用形状 + 文字 + 颜色三重编码。最常见红绿色盲看红绿是同一种深灰，把"成功/失败"设计成仅红绿区分就踩雷。工具：Stark、Color Oracle 能模拟色盲视角预览页面。经验法则：用明度差区分主次（深绿 vs 浅红，而非同明度红绿），慎用纯红绿组合，图表加图标或图案辅助。
三大原因——色域差异：普通屏幕 sRGB，专业屏幕 P3/AdobeRGB 范围更宽，同 HEX 可能映射到不同物理光；色温/白点：6500K 是 sRGB 标准，实际屏幕可能偏冷/暖；未校色：长期使用的屏背光衰减，色温漂移。Web 设计默认 sRGB，关键视觉可以加 `color-profile` 或用 LCH 色彩空间；苹果生态现已原生支持 P3（`color(display-p3 1 0 0)`）。