使用方法

输入或粘贴颜色，例如 #1e90ff、rgb(30 144 255) 或 oklch(65% 0.18 250)。也可以点击颜色选择器。
查看色块，确认颜色是否符合预期。
从列表中复制所需格式。带透明度的值会保留其透明度。

工作原理

支持的输入：3、4、6 或 8 位 HEX（第 4 位和第 8 位表示透明度）；使用数字或百分比的 rgb() 和 rgba()；hsl() 和 hsla()；hwb()；以及使用百分比或 0 到 100 之间数字的 oklch() 和 cmyk()。支持经典的逗号语法，以及使用“/ alpha”的现代空格语法。色相支持 deg、turn、rad 和 grad。无法识别“tomato”等颜色名称；请使用颜色选择器或输入颜色代码。

所有转换均通过 sRGB 完成。HSL 和 HWB 只是对 RGB 值的简单转换，因此可以精确转换。OKLCH 是一种感知色彩空间：其亮度每变化相同数值，视觉上的差异大致相同，因此适合用于构建调色板。计算采用公开发布的 OKLab 矩阵。部分 OKLCH 颜色超出了 sRGB 的显示范围；工具会提示这一点，并显示最接近的可显示颜色。

CMYK 使用常见的简化公式计算（K = 1 − 最大的 RGB 通道值）。实际印刷效果取决于纸张、油墨和 ICC 配置文件，因此请将这些数值作为起点，而非印刷规格。

示例

将品牌 HEX 代码转换为 CSS

样式指南给出了 #0b5d1e。粘贴后即可获取适用于旧版 CSS 的 rgb(11, 93, 30)、便于手动调整亮度的 hsl(133.9, 78.8%, 20.4%)，以及适用于现代 CSS 颜色函数的 oklch() 值。

查看带透明度的颜色

rgba(0, 0, 0, 0.5) 会转换为 #00000080。末尾两位 HEX 数字（80）表示透明度：128/255，约为 50%。

检查设计文件中的 OKLCH 值

oklch(70% 0.4 150) 是一种饱和度很高的绿色，sRGB 屏幕无法显示。工具会标记这一点，并给出最接近的 sRGB 颜色，让你了解这种设计在大多数显示器上的呈现效果会有所不同。

常见问题

为什么转换为 HSL 再转回来时，HEX 有时会相差一个单位？

HEX 使用 0 到 255 的整数表示每个通道。其他格式的值在显示时会经过舍入（HSL 保留一位小数），将舍入后的值转换回去时可能会相差一个单位。如果需要精确的原始值，请复制 HEX。

CMYK 值适合用于印刷吗？

不一定。此工具使用的是不含色彩配置文件的简化公式。打印机使用 FOGRA 或 GRACoL 等配置文件，计算出的数值会有所不同，因此请咨询印刷服务商，或在支持色彩管理的应用中进行转换。

什么是 OKLCH？可以在 CSS 中使用吗？

OKLCH 使用感知亮度、色度（色彩鲜艳程度）和色相来描述颜色。目前，主流浏览器的最新版本都支持在 CSS 中使用 oklch()。如果需要兼容旧版浏览器，请保留 HEX 或 rgb() 备用值。

8 位 HEX 代码表示什么？

#RRGGBBAA：末尾两位表示不透明度，00 表示完全透明，ff 表示完全不透明。4 位格式 #RGBA 的原理相同，每个通道用一位表示。

隐私

颜色转换在浏览器中完成。你输入的内容不会发送到任何地方，也不会被存储。