OKLCH ⇄ HEX、RGB、HSL,跑完整 sRGB → OKLab → OKLCH 管线,带实时色块和 sRGB 色域提示,浏览器本地
- 本地处理
- 分类 颜色设计
- 适合 把视觉想法转成可复用的颜色值。
L 是明度(0–100%),C 是彩度,H 是色相(0–360°)
这个工具能做什么
面向 CSS Color 4 时代的免费 OKLCH 颜色转换器。粘一个 HEX(比如 #1d4ed8)、一段 rgb(),或现代的 oklch(62% 0.17 145),一次读出全部 格式,旁边有实时色块,每一行都能一键复制。底层跑的是真正的色彩科学 管线:sRGB 经标准传递曲线转线性 RGB,线性 RGB 用 Bjorn Ottosson 公开的矩阵转 OKLab,再把 OKLab 换成极坐标的 OKLCH,其中 L 是感知 明度,C 是彩度,H 是以度为单位的色相。OKLCH 的关键就在这里:L 上 相等的步长在眼里看起来一样亮,所以用 OKLCH 做的调色板和渐变中段 平滑,不像 HSL 那样在中间发灰发脏。一旦某个颜色落在 sRGB 立方体 之外,工具会标出来并显示钳制后的预览,从 Figma 拿来的广色域值不会 在你不知情时悄悄偏色。全部在浏览器里运算,不上传,分享链接能原样 还原你正在调的那个颜色。
工具细节
- 输入
- 数值
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制 + 预览
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 可分享链接状态
- 关键设置会进入 URL，复制链接后别人能复现同一组参数。
- 性能预算
- 首屏 JS ≤ 10 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 颜色设计 · 设计师
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
OKLCH 颜色转换器 适合怎么用
适合在真实界面工作中选色、查色、转色值或整理配色。
适合颜色任务
- 把视觉想法转成可复用的颜色值。
- 界面上线前检查对比度和可访问性。
- 让品牌、设计和前端实现的颜色决策对齐。
颜色检查项
- 对比度要按真实背景检查,不要只看色块。
- 有深浅主题时,两套都要单独看。
- 复制设计系统或代码库真正需要的格式。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
做一条感知均匀的明暗梯度
拿你的品牌蓝,转成 OKLCH,固定 C 和 H,只让 L 等量地走:30%、 45%、60%、75%、90%。每一档看起来都是同样幅度的变亮,所以做出的 深浅色间距均匀。在 HSL 里这么做会跑色,亮的几档还会挤在一起; OKLCH 让这一家子色保持协调,档与档清清楚楚。
把 Figma 里的 OKLCH 颜色按 HEX 交付给开发
设计师在 Figma 里用 OKLCH 取色,但同事还要兼容老浏览器,需要一个 普通 HEX 兜底。把 oklch() 值粘进来,复制 HEX,两个一起带上兜底 规则发出去。色域提示会提前告诉你这个 OKLCH 是不是比 sRGB 更广, 所以交出去的 HEX 是诚实的对应,而不是一个不声不响的意外。
排查发灰的 CSS 渐变
蓝到黄的渐变中段塌成了灰。把两端颜色都放进转换器,读出它们的 OKLCH,你会看到明度和彩度沿 sRGB 路径下陷。用 OKLCH 重写这两个 色标,让明度保持均匀,中段那块死色就消失了。工具会给出可以直接 粘回渐变的 oklch() 字符串。
在不同颜色格式间迁移一套设计 token
一份设计 token 文件用 HEX 存颜色,但新的主题层想要 OKLCH,好通过 微调 L 来算出 hover 和 active 状态。把每个 token 跑一遍转换器得到 OKLCH 三元组,HEX 留作旧值,你的 token 就同时带上了两种,可以靠 计算驱动状态色,不必再引一个单独的库。
常见踩坑
把彩度当成百分比读。C 是一个没有上限的数,不是 0 到 100 的刻度。一个典型的鲜艳 sRGB 颜色大概在 0.15 到 0.25,天花板约 0.37。想要半饱和而填了 50,会得到一个严重超色域的值,钳回来变成意料之外的颜色。
忘了色相是度数,不是 0 到 1 的彩度刻度。H 走 0 到 360,像色环;145 是绿,264 是蓝。在那里填一个小数(以为和彩度一个量级),会把颜色拽到色相 0 附近的红,结果跟你想要的完全不沾边。
以为转回来的 HEX 永远等于你的 OKLCH。如果工具显示了超色域提示,这个 HEX 是钳制后最接近的 sRGB 颜色,并非完全一致。要让 HEX 和 OKLCH 在屏幕上一致,把彩度降到提示消失为止。
隐私说明
每一次转换都是浏览器标签页里运行的纯 JavaScript:sRGB 转线性的曲线、 OKLab 矩阵、转极坐标 OKLCH 那一步,以及色域检查,全部在本地完成。 你输入的颜色不上传,也不记录。唯一要注意的是分享链接:它会把颜色 写进 URL 查询字符串,所以把链接粘到聊天里,对方服务器的访问日志会 留下这个颜色。涉及保密的内容,请用每一行的复制按钮,而不是分享网址。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。