颜色格式转换器

用任意 CSS 语法输入一个颜色，即可一次性看到它的 HEX、RGB、HSL、HWB、LAB、LCH、OKLCH 和 OKLAB 形式，并附带实时色块。一切都在你的浏览器中转换。

这款颜色格式转换器在你的浏览器本地解析并转换每一个颜色。你输入或粘贴的值绝不会离开你的设备，也不会有任何内容上传到 ArrayKit。

打开 CSS 颜色转换器

关于 颜色格式转换器

这款颜色格式转换器接收一个用任意 CSS 语法书写的单个颜色——像 #7c3aed 这样的 hex、一个 rgb() 或 hsl() 值、hwb()、lab()、lch()、oklch()、oklab()，或像 rebeccapurple 这样的命名颜色——并同时以其他每种记法显示它。你会得到 HEX(A)、RGB(A)、HSL(A)、HWB、LAB、LCH、OKLCH 和 OKLAB，外加最接近的 CSS 命名颜色和一个实时色块，每一项都可直接复制。它专为那些正在把调色板迁移到 OKLCH 等现代空间、要在设计工具和样式表之间匹配颜色，或想查看某个值在感知均匀空间中效果的设计师和前端开发者而设计。透明度会全程保留。每一次解析和转换都在你的浏览器本地运行，因此你输入的颜色绝不会离开你的设备。

功能特性

如何使用 颜色格式转换器

  1. 用任意 CSS 格式在输入框中输入或粘贴一个颜色
  2. 查看实时色块，确认你输入的是正确的颜色
  3. 复制你需要的记法——HEX、RGB、HSL、HWB、LAB、LCH、OKLCH 或 OKLAB
  4. 当你想要一个可读的标签时，获取最接近的命名颜色

示例

输入

#7c3aed

输出

rgb(124, 58, 237)
hsl(262, 83%, 58%)
oklch(0.5413 0.2466 292.94)

一个 hex 一次性展开为每一种 CSS 颜色记法。

常见错误与故障排除

常见问题

这个转换器会输出哪些颜色格式？
对于你输入的任何颜色，它都会同时显示 HEX(A)、RGB(A)、HSL(A)、HWB、LAB、LCH、OKLCH 和 OKLAB，外加最接近的 CSS 命名颜色。
OKLCH 是什么，我为什么要转换到它？
OKLCH 是一个感知均匀的颜色空间，其中明度、彩度和色相的表现都可预测。设计师之所以把调色板迁移到它，是因为在 OKLCH 中插值和提亮颜色看起来比在 HSL 或 RGB 中更均匀。
最接近的命名颜色是如何选出的？
会把你的颜色与 148 个 CSS 命名颜色按 RGB 中的距离进行比较，并返回最接近的匹配。当确实没有接近的时，本工具会如实说明，而不是给出一个误导性的名称。
转换器会保留透明度通道吗？
会。半透明的颜色会显示为 HEXA（#rrggbbaa）、rgba()/hsla()，并在 HWB、LAB、LCH、OKLCH 和 OKLAB 上带一个 `/ 0.5` 的透明度尾部。不透明的颜色会完全省略透明度。
我可以把 oklch() 或 lab() 值作为输入粘贴吗？
可以。输入接受任意 CSS 颜色语法，包括 oklch()、oklab()、lab()、lch() 和 hwb()，并像处理 hex 或 rgb() 一样把它转换为其他每一种格式。
我输入的颜色会被发送到服务器吗？
不会。解析和每一次转换都在你的浏览器本地运行，因此你输入或粘贴的颜色绝不会离开你的设备，也不会上传到 ArrayKit。

相关工具

全部 ArrayKit 工具