颜色转换

用途

颜色值在线转换工具，支持 HEX（#FFAA00）、RGB（rgb(255,170,0)）、RGBA（带 alpha 透明度）、HSL（色相饱和度亮度）、HSV、CMYK（印刷四色）、Pantone 色卡查询。可视化色板调整 + 实时预览大色块。提供颜色名（如 "tomato" "lightgreen"）查找和反查、CSS 颜色对比度计算（WCAG AA / AAA 标准）、配色推荐（互补 / 三色 / 邻近色）。所有转换在浏览器本地完成。

操作步骤

1. 输入颜色：HEX（#FFAA00 或 #FA0 短格式）/ RGB / RGBA / HSL / 颜色名
2. 工具自动识别格式，同时输出所有格式
3. 右侧色板可视化调整色相 / 饱和度 / 亮度滑杆，颜色实时联动
4. 透明度（alpha）滑杆：0-1 浮点数或 00-FF 十六进制
5. 颜色名反查：粘贴 RGB 看最接近的 CSS 颜色名
6. 对比度计算：选两个颜色看 WCAG AA（4.5:1）/ AAA（7:1）是否达标
7. 配色推荐：基于当前颜色推算互补色、邻近色、三色组
8. 一键复制：HEX / CSS 变量声明 / Tailwind 类名

常见问题

HEX 三位（#F00）和六位（#FF0000）有什么区别？

功能上**完全一样**。#F00 = #FF0000 = 纯红，#ABC = #AABBCC（每位重复一次）。**短格式只能表示 4096 种颜色**（每位 0-F 共 16 × 16 × 16），不能表示 #FFAA00 这种。**生产代码推荐用六位**（更明确），手写测试用短格式没问题。

HSL 比 RGB 好在哪？

HSL（Hue 色相、Saturation 饱和度、Lightness 亮度）更符合人类视觉直觉。**调亮度只改 L 值，颜色性质不变**；调饱和度只改 S 值；色相 H 是色环角度（0=红，120=绿，240=蓝）。RGB 调亮一个红色你要同时改 R、G、B，体感困难。**CSS 主题切换、配色生成首选 HSL**。

CMYK 是干什么用的？我做网页用不用？

CMYK（青、品红、黄、黑）是**印刷四色**，用于纸质印刷（杂志、海报、名片）。屏幕显示用 RGB（光的三原色）。**做网页 / App 不用 CMYK**。如果你要把网页设计稿送印刷厂，用本工具的 HEX → CMYK 转换，但**实际印刷色和屏幕色不会完全一致**（色域不同）。

颜色对比度多少算够？WCAG AA / AAA？

WCAG 无障碍标准定义文字与背景对比度。**AA 级（最低要求）**: 正常文字 4.5:1，大文字（18pt+）3:1。**AAA 级（增强）**: 正常文字 7:1，大文字 4.5:1。**深色背景白字**对比度通常 18+（最高 21:1）。本工具计算后会标 AA / AAA / FAIL，设计稿做无障碍审查必备。

CSS 变量怎么用 HEX 颜色？

CSS 变量定义：`--primary: #FFAA00;` 使用：`color: var(--primary);`。**透明度技巧**: CSS 不能直接 `var(--primary, 0.5)`，要用 `color-mix(in srgb, var(--primary) 50%, transparent)` 或拆成 R/G/B 三变量再拼 rgba()。本工具的"CSS 变量"复制模式会输出完整声明。

应用场景

• Web 开发取色：设计稿 PSD / Figma 取色后转 CSS HEX
• 主题设计：HSL 调色板生成深 / 浅模式配套色
• 无障碍审查：检查文字 / 按钮对比度是否达 WCAG AA
• CSS 变量配色：批量转换设计 token 为 CSS 自定义属性
• 印刷输出：网页设计稿转 CMYK 送印刷厂

适用场景

Web 取色、主题色板设计、无障碍对比度审查、CSS 变量、印刷转换。前端、设计师、UX 工程师常用。多格式互转、对比度 WCAG 标注、配色推荐、CSS 变量输出是关键差异点。