颜色格式转换:HEX / RGB / HSL / HSV / CMYK

真实使用场景

• 把 Figma OKLCH 颜色交付给前端时转成 HEX

  Figma 2025 支持用 OKLCH 取色, 在 Figma 里很爽, 但一旦把这个 值粘到 Tailwind config 或者要兼容 Safari 15 的老样式表里, OKLCH 就废了。流程: 在 Figma 拿到 OKLCH, 转成 RGB (或者用 浏览器 devtools 算一下), 把 RGB 三个数粘进这个工具, 读出 HEX。HEX 在 CSS-in-JS 库、邮件模板、移动端原生、2023 年之前 的任何工具链里都是认得最广的格式, 不确定的时候就交付 HEX, 后端前端都不会接错。

• 给暗色模式的按钮算 hover 态

  按钮底色 `#06b6d4`, 暗色模式下要一个看得出变化的 hover。粘 HEX, 看 HSL 那行, `H: 188° S: 95% L: 43%`。把 L 加 5 (改成 `L: 48%`), 反向把新 HSL 输进去, 读出新 HEX。亮度恰好 加你想要的量, 色相完全锁住, 比拿 HEX 凭感觉调精确多了。同时 工具还会算出新底色对黑底/白底的对比度, 第一时间告诉你新状态 有没有掉出 WCAG AA。

• 看一下 iOS Display P3 下用户实际看到什么颜色

  你的设计系统是在 sRGB 里画的, 但 iPhone 默认走 Display P3 渲染。Figma 里画的 `#FF0000` 到 iPhone 上比你 MacBook 外接 屏要红一截。粘品牌红, 读出 RGB, 然后真机跑一遍。 这里给的对比度数字是 sRGB 相对值, 如果手机预览比 WCAG 数字 看起来更艳, 那不是工具算错, 是 P3 色域的扩展在起作用, 签确认前心里要有数。

• 把 Tailwind 的 RGB 配色迁成 HSL 的 CSS 变量

  要把 Tailwind config 从写死的 RGB 改成 CSS 自定义属性, 这样运行时一个 `--primary-hue` 变量就能切换 light/dark 主题。每个颜色都得拿到 HSL 形式。把 `tailwind.config.js` 里的 RGB 三元组挨个粘进来, 复制 HSL 字符串 (工具直接给 你现代写法 `hsl(188 95% 43%)`, 空格分隔), 粘到 `:root` 里。整个配色迁移就是 20 次"粘 + 复制", 比手算 20 次 HSL 快几个数量级。

• 排查浏览器渲染色差

  用户反馈同一个 CTA 在 Safari 看起来"比 Chrome 闷"。HEX 完全一样, 渲染结果不一样, 多半是浏览器在颜色插值、gamma、 新的 OKLCH/Display P3 路径上处理方式不同。粘 HEX, 把 HSL 和 HSV 一起看。如果用户说的是"饱和度感觉不对", HSV 的 S 那行是真饱和度参照; 如果说的是"亮度不对", 看 HSL 的 L。 把数字读数和两个浏览器的截图差异放一起, 跟设计师对线就 有客观依据, 不是各说各话。

常见踩坑

• CSS 颜色函数名必须小写。`RGB(6, 182, 212)` 在原生 CSS 里能跑 (浏览器会归一化), 但好几个 CSS-in-JS 运行时 (老版本 styled-components、某些 Emotion 配置) 只认 `rgb(...)`。`hsl(...)` `hsla(...)` 也是一样。复制工具里给出的小写形式就稳了。

• HSL 和 HSV 开头都是 H 和 S, 但 S 含义不一样, HSL 的 S 是"相对同亮度灰的饱和度", HSV 的 S 是"相对同色相最亮版本的饱和度"。把一个 S 直接搬到另一个工具里, 出来的颜色会肉眼看出错。先看行标签, 别只看数字。

• HEX 短码 `#f00` 在 CSS 里会展开成 `#ff0000`, 但某些颜色校验库 (老 Joi schema、某些表单校验) 不收 3 位 HEX, 直接拒绝。如果下游严格, 用 6 位完整 HEX 输出。这个工具默认就给你 6 位完整形式, 避免踩这个坑。

隐私说明