颜色代码转换

支持 HEX / RGB / HSL / HSV 互转的颜色工具。选择颜色即可同时生成各格式的 CSS 代码,并自动计算对比度。

完全免费无需注册浏览器内完成 5 种语言深色模式

HEX

RGB

HSL

HSV

CSS 格式

对比度

白色背景 (#FFF)

黑色背景 (#000)

WCAG AA:正常文字 4.5 以上,大文字 3.0 以上 / AAA:正常文字 7.0 以上

色调变体

如有问题或显示异常,请通过以下方式联系我们: 联系表单反馈给我们。

📖 常见的坑

在 HEX / RGB / HSL / HSV / CMYK 之间互相转换，同时给出 WCAG 对比度、色调变体以及最接近的 Tailwind 颜色。处理全部在浏览器内完成。对比度是照搬 WCAG 2.x 公式算出的数值，而不是「易读性」的指标——这个公式不看色相、不看饱和度、也不看字重，因此「达标却读不清」的组合随手就能造出来。

情形	会发生什么	怎么处理
对比度达标了，却还是不好读	WCAG 2.x 的对比度只由相对亮度算出。因此细笔画字体与粗字体得到的数字完全一样。`font-weight: 300` 的 14px 与 `font-weight: 700` 的 14px，实际易读性天差地别，公式却不加区分。另一个坑是高饱和度的颜色：鲜艳的蓝色或洋红文字，即便比值绰绰有余，也因色差而难以对焦，长篇阅读时相当累眼。「达标」和「读者真的能读完」是两回事。	4.5 是底线，不是目标。正文请以 7 以上（AAA）为目标——尤其是灰色正文（`#666` 前后）在白底上只有约 5.7，年长读者或户外屏幕下是真的读不了。若使用较细的字重，请把比值再往上提一档来补偿。需要更贴近知觉的指标时，可以看 APCA（WCAG 3 的候选方案）：它在数值上体现了「暗背景与亮背景所需的对比量不同」——而 WCAG 2.x 把这一点当作对称处理，所以在设计深色模式时它的数字最不贴合直觉。
设计工具里的颜色和实际显示对不上	同一个 `#4A90D9`，由哪个色彩空间来解释，实际发出的颜色就不同。若 Figma 或 Photoshop 的工作色彩空间是 Display P3 或 Adobe RGB，同样的数值在那里比在使用 sRGB 的浏览器里更鲜艳——设计师屏幕上明亮的蓝，实现出来却略显发闷，几乎都是这个原因。而且近年的设备普遍配备支持 P3 的屏幕，我们已经进入「同一浏览器、同一份 CSS，换台设备就不一样」的阶段。	面向 Web 的制作请把工作色彩空间设为 sRGB——设计工具里可以显式设置。确定品牌色时，务必在真实浏览器中把实机并排对比。若确实想用更广的色域，可以写 `color(display-p3 0.2 0.6 0.9)`，它在支持的屏幕上鲜艳呈现，在不支持的设备上自动回退到接近的 sRGB——但请用 `@supports` 分支，或先写 sRGB 版本再覆盖。涉及印刷时，这里的 CMYK 只是参考值：实际颜色随纸张与油墨而变，印刷品的颜色务必以色卡定夺。
HSL 里明度设成一样，看起来却亮暗不一	HSL 里的 L 并不是知觉明度。它只是 RGB 通道最大值与最小值的平均，完全没有考虑人眼对绿色敏感、对蓝色迟钝。举个实例：`hsl(60 100% 50%)`（黄）与 `hsl(240 100% 50%)`（蓝）的 L 都是 50%，相对亮度却相差约 9 倍——并排放着，只有黄色跳出来。用 HSL 机械地生成设计系统调色板，各色相的分量参差不齐，原因正在于此。	要系统性地构建调色板，请使用 OKLCH——写成 `oklch(70% 0.15 250)`，只改色相（最后一个值），明度依然保持一致。这正是 OKLCH 的设计目的。CSS 中自 2023 年起主流浏览器均已支持。修正既有的 HSL 调色板，只能逐色相手动调整 L——黄色和青色调低，蓝色和紫色调高。检验是否调好，最可靠的办法是把调色板转成灰度：若明度真的对齐了，转灰后各色块看起来浓淡相同。

不要仅凭颜色传达信息（WCAG 1.4.1）。只用红色表示错误、绿色表示成功的界面，对约 5% 的日本男性（每 20 人中有 1 人）是无法区分的——全球范围内约为男性的 8%。请务必同时配上图标、符号或文字（例如错误配叉、完成配勾）。图表图例只靠颜色区分同样应当避免，改用线型或把标签直接标在线上。另一点：为深色模式反转配色时，若保持饱和度不变会非常刺眼——同样的饱和度在暗底上会呈现更强的对比，所以惯常做法是把强调色的饱和度降低 10~20%，同时提高明度。纯白（#FFF）文字配纯黑（#000）背景同样费眼，应当避免——靠近 #E8E8E8 配 #121212 会舒服得多。

📖 使用方法

1

选择颜色

使用拾色器或直接输入 HEX / RGB / HSL。
2

查看所有格式

HEX / RGB / RGBA / HSL / HSV / CMYK 即时更新。
3

检查对比度

显示与背景的 WCAG 对比度(AA/AAA)。

❓ 常见问题

WCAG 对比度标准是?

正常文本:AA 4.5:1,AAA 7:1。

HEX 和 RGB 区别?

HEX 是十六进制,RGB 是十进制。

HSL 和 HSV 何时使用?

HSL 适合设计系统,HSV 适合拾色器 UI。

支持 Tailwind 调色板吗?

会建议最接近的 Tailwind 颜色。

🐛 此工具出现问题了吗？

免费、无需注册。仅提供复现步骤也有帮助。报告将直接发送给运营者并用于改进。