DEV NO.010
颜色转换器
HEX / RGB / HSL / OKLCH 互转,附带对比度检查与配色微调。
此工具完全在本地运行,数据不会上传到任何服务器。
Aa 示例 Text
HEX
#ff4d00RGB
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.
如何使用
- 在任意输入框填色,其余格式实时同步。
- 查看对比度评级(AA / AAA / 不达标)。
- 需要色阶时参考下方自动生成的 50-950 明暗梯度。
常见问题
OKLCH 是什么?为什么要用它?
OKLCH 是感知均匀的色彩空间——数值变化与人眼感受一致。调亮 10% 就是看起来亮 10%,是现代 CSS 与设计系统的首选格式。
对比度 4.5:1 是什么标准?
WCAG AA 标准要求正文文本对比度至少 4.5:1(大字号 3:1)。工具会实时给出评级。
支持 8 位带透明度的 HEX 吗?
支持,#RRGGBBAA 会被解析并同步到 RGBA 输出。