OKLCH 是什么？为什么我应该关注？

OKLCH 是基于人眼感知的均匀色彩空间，2020 年由 Björn Ottosson 提出，2023 年进入 CSS Color Level 4。Lightness 50 的红、绿、蓝在屏幕上看起来一样亮，HSL 做不到。生成色阶（tints/shades）时 OKLCH 不会有 HSL 那种「中间灰糊」的问题。

WCAG AA 与 AAA 各对比度多少？

WCAG 2.1 AA：常规文本 ≥ 4.5:1，大文本（≥18pt 或 ≥14pt 加粗）≥ 3:1。AAA：常规 7:1，大文本 4.5:1。本工具同时显示文本/大文本/UI 三档判定，写按钮、表单、icon 时一目了然能不能过。

为什么我的 HEX 输入是 #fff 但显示成 #FFFFFF？

#fff 是 #ffffff 的 CSS 简写（#RGB → #RRGGBB）。本工具内部规范化成 6 位输出。如果想要简写形式直接复制 input 框里的值即可，工具会保留你的原始输入。

数据会上传到服务器吗？

不会。所有色彩计算都在你的浏览器内完成（纯 JS 矩阵运算 + Canvas 取色），输入从不离开你的设备。

颜色转换器 HEX ↔ RGB ↔ HSL ↔ OKLCH 与 WCAG 对比度

常见使用场景

🎨

设计稿 → 代码

设计师给的 HEX 直接转 HSL 微调亮度，转 RGB 给 SVG，转 OKLCH 喂 modern CSS variables。

🌈

生成 Tailwind 色阶

一个品牌色直接展开成 50–950 共 11 阶 OKLCH 色阶，CSS 变量直接拷走。

♿

无障碍审查

按钮文字在背景色上够不够对比？同时显示文本/大文本/UI 三档 WCAG AA/AAA 判定，过不过一眼能看。

🔮

配色实验

拖 HSL 滑块边拖边看色阶 + 互补色变化，比传统色环工具更直观。

使用技巧

HEX 短写支持：`#fff`、`#fffa`（带 alpha）都接受，自动展开。8 位带 alpha 的 HEX（`#RRGGBBAA`）也行。
HSL 与 RGB 各种语法：`hsl(18 91% 44%)`、`hsl(18, 91%, 44%)`、`hsla(18, 91%, 44%, 0.8)` 都接受。
OKLCH 输入：`oklch(58% 0.18 35)` 或 `oklch(0.58 0.18 35)`。Lightness 用 0-1 或 0%-100% 都可。Chroma 范围一般 0-0.4。
点色阶单元格：直接把那一档颜色变成主色，链式微调很方便。
WCAG 计算：用 sRGB 相对亮度公式（WCAG 2.1 §1.4.3），与 axe / Lighthouse 一致。

HEX ↔ RGB ↔ HSL ↔ OKLCH颜色转换 + 调色板 + WCAG

常见使用场景

使用技巧

HEX ↔ RGB ↔ HSL ↔ OKLCH
颜色转换 + 调色板 + WCAG