使用步骤
- 输入颜色，例如
- 从列表中复制需要的格式。
- 设置背景色，查看对比度以及 WCAG AA/AAA 是否达标。
- 点击色阶中的颜色即可切换过去。
参数说明
- HEX / RGB
- 屏幕颜色的红、绿、蓝分量（0–255）。#rrggbbaa 和 rgb(… / 50%) 可以表示透明度。
- HSL / HSV
- 色相、饱和度、亮度（或明度），方便手动调亮或调暗颜色。
- OKLCH
- CSS Color 4 中的感知均匀色彩空间。调整亮度时色相和鲜艳程度保持稳定，非常适合生成配色和暗色主题。
- CMYK
- 简单公式换算，仅供参考。实际印刷颜色取决于印厂的色彩配置文件（ICC），精确数值请向印厂确认。
- 对比度
- WCAG 2.2 的 AA 级要求正文 4.5:1、大字（18pt 或 14pt 粗体）3:1；AAA 级分别为 7:1 和 4.5:1。
示例
#0f766e 等于 rgb(15 118 110)、hsl(175 77% 26%)、oklch(51.1% 0.086 186.4)。在白色背景上的对比度约为 5.5:1，任何字号都满足 WCAG AA。
常用颜色的各种写法
CSS 命名颜色及其数值。这里的 CMYK 是数学换算，正式印刷请以印刷厂的色彩配置为准：
| CSS 名称 | 颜色 | HEX | RGB | HSL | CMYK |
|---|---|---|---|---|---|
| red | 红 | #ff0000 | rgb(255 0 0) | hsl(0 100% 50%) | 0%, 100%, 100%, 0% |
| orange | 橙 | #ffa500 | rgb(255 165 0) | hsl(39 100% 50%) | 0%, 35%, 100%, 0% |
| gold | 金 | #ffd700 | rgb(255 215 0) | hsl(51 100% 50%) | 0%, 16%, 100%, 0% |
| green | 绿 | #008000 | rgb(0 128 0) | hsl(120 100% 25%) | 100%, 0%, 100%, 50% |
| teal | 青 | #008080 | rgb(0 128 128) | hsl(180 100% 25%) | 100%, 0%, 0%, 50% |
| blue | 蓝 | #0000ff | rgb(0 0 255) | hsl(240 100% 50%) | 100%, 100%, 0%, 0% |
| navy | 藏青 | #000080 | rgb(0 0 128) | hsl(240 100% 25%) | 100%, 100%, 0%, 50% |
| purple | 紫 | #800080 | rgb(128 0 128) | hsl(300 100% 25%) | 0%, 100%, 0%, 50% |
| hotpink | 亮粉 | #ff69b4 | rgb(255 105 180) | hsl(330 100% 71%) | 0%, 59%, 29%, 0% |
| brown | 棕 | #a52a2a | rgb(165 42 42) | hsl(0 59% 41%) | 0%, 75%, 75%, 35% |
| gray | 灰 | #808080 | rgb(128 128 128) | hsl(0 0% 50%) | 0%, 0%, 0%, 50% |
用哪种格式
**HEX：**CSS 和设计软件里最短的写法，每两位十六进制数代表红、绿、蓝。
**RGB：**同样的信息用十进制表示，rgb(255 0 0 / 50%) 还能加透明度。
**HSL：**按色相、饱和度、亮度描述，只改最后一个数就能做出同一颜色的深浅系列。
**OKLCH：**较新的 CSS 格式，亮度每变一档，人眼感觉的变化也差不多，适合做无障碍配色。
常见问题
文字对比度多少合适？
正文至少 4.5:1（WCAG AA）。纯黑配白底是 21:1；常见的 #767676 灰字配白底是 4.54:1，刚好达标。
为什么 CMYK 和 Photoshop 里的不一样？
Photoshop 会通过特定印刷机和纸张的 ICC 配置文件进行转换，本工具使用的是纯数学公式，适合估算，不能作为印刷打样依据。
HSL 和 OKLCH 有什么区别？
HSL 只是 RGB 的简单变换，同样「亮度」的黄色和蓝色，看起来明暗差别很大。OKLCH 按人眼感知设计，亮度相同的颜色看起来一样亮。
现在能在 CSS 里直接用 OKLCH 吗？
可以，当前主流浏览器都已支持 oklch()。
隐私说明
本工具完全在浏览器中运行，文件和文本都在你的设备上处理，不会上传到我们的服务器。