TF

设计与 CSS

颜色转换器与对比度检查器

在 HEX、RGB、HSL、HSV、HWB、CMYK 和 OKLCH 之间转换颜色，并按 WCAG 检查文字对比度。

支持 HEX、rgb()、hsl()、hsv()、hwb()、cmyk()、oklch() 或 tomato 这样的 CSS 颜色名。

  • HEX#0f766e
  • RGBrgb(15 118 110)
  • HSLhsl(175 77% 26%)
  • HSV / HSBhsv(175 87% 46%)
  • HWBhwb(175 6% 54%)
  • CMYKcmyk(87% 0% 7% 54%)
  • OKLCHoklch(51.1% 0.086 186.4)

浅色与深色

这是什么工具？

粘贴任意格式的颜色——#ff6347、rgb(255 99 71)、hsl(9 100% 64%)，或直接写 tomato——即可复制为其他所有格式。切换到对比度检查，按 WCAG 2 测试文字和背景颜色；若不达标，会给出最接近且能通过的颜色。

屏幕通过混合红、绿、蓝三色光显示颜色，所以 HEX 和 RGB 描述的是显示器呈现颜色的方式。HSL 和 HSV 更便于手动调整，CMYK 近似印刷油墨，OKLCH 则是 CSS 支持的现代感知均匀色彩空间。

WCAG 对比度范围为 1:1 到 21:1。普通文字 AA 级至少需要 4.5:1，AAA 级需要 7:1；大号文字（24px 或 18.66px 粗体）和界面组件需要 3:1。半透明文字颜色会先与背景混合再计算。

如何使用颜色转换与对比度检查

  1. 输入或粘贴颜色，或用取色器选择。
  2. 复制需要的格式：HEX、RGB、HSL、HSV、HWB、CMYK、OKLCH 或 CSS 颜色名。
  3. 点击浅色或深色色块，探索同一色相的不同明度。
  4. 打开对比度检查，设置文字和背景颜色，查看是否通过 WCAG AA 和 AAA。
  5. 若未通过，可使用建议颜色——它会保留色相，只调整明度直到达标。

示例

tomato 的其他格式

tomato
#ff6347
rgb(255 99 71)
hsl(9 100% 64%)

常见问题

如何把 HEX 转成 RGB？

粘贴 HEX 代码，例如 #3366cc，然后复制 RGB 一行：rgb(51 102 204)。每两位十六进制数字代表一个 0–255 的通道。

需要多高的对比度？

正文至少 4.5:1（WCAG AA）。大标题和图标需要 3:1。长篇阅读或照顾低视力用户时，建议达到 7:1（AAA）。

CMYK 转换对印刷准确吗？

它是与设备无关的近似值。实际印刷效果取决于纸张和打印机配置文件，最终稿件请使用印刷厂的色彩配置文件。

什么是 OKLCH？

OKLCH 在感知均匀的色彩空间中用亮度、色度和色相描述颜色。现代 CSS 已支持它，便于制作协调一致的配色。

以后需要更强大的功能？

高级工具、更高限额和 API 访问已在规划中。V1 仍然免费，并在您的浏览器中私密运行。