DEV NO.010
Color Converter
Convert HEX / RGB / HSL / OKLCH with a built-in contrast checker.
This tool runs entirely in your browser. Nothing is uploaded to any server.
#ff4d00rgb(255, 77, 0)hsl(18 100% 50%)oklch(66.8% 0.224 37.0)5.24:1 AAuse #1A1A18 as foreground
50
100
200
300
400
500
600
700
800
900
What is this
什么是颜色转换器
同一个颜色在不同场景需要不同写法：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 明暗梯度。
FAQ
What is OKLCH and why care?
OKLCH is a perceptually uniform color space — numeric changes match what your eye sees. Lightness +10% looks 10% brighter. It's the modern choice for CSS and design systems.
What does 4.5:1 contrast mean?
WCAG AA requires at least 4.5:1 for body text (3:1 for large text). The tool grades your pair live.
Does it support 8-digit HEX with alpha?
Yes —