颜色HEX/RGB/HSL转换器
输入 #aabbcc、rgb()、hsl() 或常用颜色名，一次得到 HEX、RGB、HSL、HSV 与 CMYK 近似值，附带 sRGB 相对亮度、与黑白文字的对比度及深色浅色判定，并输出 20%—80% 的加深提亮变体色卡，方便前端配色取值。
数据来源：CSS Color Module Level 4 与 W3C WCAG 2.1 相对亮度公式
同色相明暗变体（按 HSL 亮度线性缩放）
| 变体 | RGB | HEX | 用途说明 |
|---|---|---|---|
| 加深 20% | rgb(19,84,236) | #1354ec | 亮度 50%，适合 hover/active 态 |
| 提亮 20% | rgb(113,152,244) | #7198f4 | 亮度 70%，适合浅色背景块 |
| 加深 40% | rgb(14,62,175) | #0e3eaf | 亮度 37%，适合 hover/active 态 |
| 提亮 40% | rgb(146,176,246) | #92b0f6 | 亮度 77%，适合浅色背景块 |
| 加深 60% | rgb(10,42,118) | #0a2a76 | 亮度 25%，适合 hover/active 态 |
| 提亮 60% | rgb(184,204,249) | #b8ccf9 | 亮度 85%，适合浅色背景块 |
| 加深 80% | rgb(5,20,57) | #051439 | 亮度 12%，适合 hover/active 态 |
| 提亮 80% | rgb(217,228,252) | #d9e4fc | 亮度 92%，适合浅色背景块 |
示例文字：#4a7cf0 上的正文效果
解析来源：十六进制 HEX。CMYK 由 RGB 直接换算，只是打印色的近似值，实际出墨需按 ICC 色彩配置（如 Japan Color 2001 Coated）转换。相对亮度用 WCAG 公式（sRGB 反伽马后按 0.2126/0.7152/0.0722 加权），对比度达 4.5:1 才算正文可读、3:1 为大字号可读。
本页所有计算在浏览器内完成，输入内容不会被上传。
计算口径
HEX→RGB 是每两位十六进制除 255；RGB→HSL/HSV 按最大最小分量求色相、饱和度与亮度；CMYK 近似取 K = 1 − max(R,G,B)，其余分量为 (1−R−K)/(1−K)。相对亮度先把 sRGB 分量线性化（小于 0.04045 时除以 12.92，否则 ((c+0.055)/1.055)^2.4），再按 0.2126、0.7152、0.0722 加权；对比度 = (L亮+0.05)/(L暗+0.05)。
使用说明
- 设计稿只给十六进制时，用它取 hsl() 便于统一调亮度
- 配按钮文字颜色看"深浅判定"一行，深色底用白字并核对对比度不低于 4.5
- 需要一整套同色相状态色时用变体表，直接复制 HEX
常见问题
为什么 hsl 转回 hex 有点点对不上？
HSL 的色相与饱和度在换算中按整数度/百分比显示，存在四舍五入；本工具输出时已用取整后的 RGB 保证 HEX、RGB 三者互相一致，只是与原始 hsl() 输入的浮点值可能差 1 个色阶。
3位 HEX 和 6位有什么区别？
#abc 是 #aabbcc 的缩写形式，每字符自重复；#rgba/#rrggbbaa 这种 4/8 位写法带透明度，本工具会识别并在提示里说明。
对比度 4.5:1 不够会怎样？
WCAG AA 要求正文对比度不低于 4.5:1（大字号 3:1），AAA 为 7:1。灰字配浅灰底最常见失败，改深文字色或加背景色即可，结果表已给出与纯白纯黑各自的比值供选择。