墨工坊

DEV NO.010

颜色转换器

HEX / RGB / HSL / OKLCH 互转,附带对比度检查与配色微调。

此工具完全在本地运行,数据不会上传到任何服务器。

Aa 示例 Text
HEX
#ff4d00
RGB
rgb(255, 77, 0)
HSL
hsl(18 100% 50%)
OKLCH
oklch(66.8% 0.224 37.0)
WCAG 对比度

5.24:1 AA建议文字用 #1A1A18 作前景色

明暗色阶(OKLCH 亮度近似)
  • 50

  • 100

  • 200

  • 300

  • 400

  • 500

  • 600

  • 700

  • 800

  • 900

这是什么

什么是颜色转换器

同一个颜色在不同场景需要不同写法:CSS 用 HEX、设计稿给 RGB、渐变调 HSL、现代设计系统用 OKLCH。本工具一次输入、四处输出,并附带WCAG 对比度检查与 10 级明暗色阶生成。

What is a color converter

One color, many notations: HEX for CSS, RGB from mockups, HSL for tweaking, OKLCH for modern design systems. Type once, get all four — plus a WCAG contrast check and a 10-step shade scale.

如何使用

  1. 在任意输入框填色,其余格式实时同步。
  2. 查看对比度评级(AA / AAA / 不达标)。
  3. 需要色阶时参考下方自动生成的 50-950 明暗梯度。

常见问题

OKLCH 是什么?为什么要用它?

OKLCH 是感知均匀的色彩空间——数值变化与人眼感受一致。调亮 10% 就是看起来亮 10%,是现代 CSS 与设计系统的首选格式。

对比度 4.5:1 是什么标准?

WCAG AA 标准要求正文文本对比度至少 4.5:1(大字号 3:1)。工具会实时给出评级。

支持 8 位带透明度的 HEX 吗?

支持,#RRGGBBAA 会被解析并同步到 RGBA 输出。