MS

免费工具 · 在浏览器中运行

颜色转换（HEX、RGB、HSL）

在 HEX、RGB 和 HSL 之间转换颜色，用取色器选色，并检查这种颜色的文字在白色或黑色背景上是否清晰可读。

HEX#0071E3
RGBrgb(0, 113, 227)
HSLhsl(210, 100%, 45%)
在白色上的对比度4.70:1 · AA
在黑色上的对比度4.47:1 · 仅适合大号文字

WCAG 要求普通文字至少 4.5:1（AA），AAA 级为 7:1。

快速解答

输入任意格式的颜色，例如 #0071E3、rgb(0, 113, 227) 或 hsl(210, 100%, 45%)，或者直接选色，就能得到三种 CSS 格式并复制。工具还会显示与白色和黑色的 WCAG 对比度：普通文字至少需要 4.5:1（AA），大号文字需要 3:1。

使用方法

  1. 输入或选择颜色. 输入 HEX、RGB 或 HSL，或者使用取色器。
  2. 复制需要的格式. HEX、RGB 和 HSL 都可以直接粘贴到 CSS、设计工具或代码中。
  3. 检查对比度. 查看这种颜色的文字在白色或黑色背景上是否达到 WCAG 标准。

示例

一种蓝色转换为所有格式及其对比度：

输入

#0071E3

输出

HEX  #0071E3
RGB  rgb(0, 113, 227)
HSL  hsl(210, 100%, 45%)

在白色上的对比度：4.70:1 · AA
在黑色上的对比度：4.47:1 · 仅适合大号文字

常见错误及解决方法

CSS 不认这个颜色
HEX 值需要 #，rgb() 需要三个数字。从本工具复制可以避免输入错误。
颜色没有通过对比度检查
把文字调深或背景调浅，直到达到 4.5:1。用 HSL 降低亮度是最快的方法。
HSL 值和别的工具差 1
转换会四舍五入为整数，所以 210 和 211 可能是同一种颜色。需要完全一致时请用 HEX。
印刷出来的颜色不一样
屏幕使用 RGB，打印使用 CMYK，两者色域不同。请向印刷厂索取正确的配置文件并先打样。

常见问题

HEX 怎么转 RGB？

把 6 位数字分成三组，每组从十六进制转为十进制：#0071E3 是 00、71、E3，也就是 rgb(0, 113, 227)。

什么是 HSL？

色相（色环上 0 到 360 度）、饱和度和亮度（0 到 100%）。用它很容易做出同一颜色的深浅变化。

3 位的 HEX 代码是什么意思？

每一位重复一次：#0AF 等于 #00AAFF。

需要多高的对比度？

WCAG AA 要求普通文字 4.5:1，大号文字（约 24px，或加粗 19px）3:1；AAA 要求普通文字 7:1。

为什么其他工具的 HSL 值略有不同？

格式转换时会四舍五入，所以同一颜色在一个工具里显示 210，另一个显示 211，肉眼看不出区别。

这些值能直接用于 CSS 吗？

可以。三种格式在所有现代浏览器中都是有效的 CSS 颜色值。

RGB 怎么转成印刷用的 CMYK？

虽然有简单的公式，但印刷厂使用颜色配置文件，请向印刷厂索取正确的配置文件，或在设计软件中转换。

支持透明度吗？

这个工具处理不透明颜色。需要透明度时请自己加上 alpha 值，例如 rgb(0 113 227 / 50%)。

为什么颜色在手机上看起来不一样？

不同屏幕的色域和校准不同，有些能显示更广的色域。HEX 和 RGB 值对应标准的 sRGB 色彩空间。

会上传任何内容吗？

不会。转换在你的浏览器中完成。

相关内容