如何将 HEX 转换为 RGB?

将六位数字分为三组,每组按 16 进制读取:#336699 为 33、66 和 99,即 51、102 和 153。将 HEX 代码粘贴到输入框中,RGB 值会立即出现,同时显示 HSL、HWB、HSV、CMYK 和 OKLCH。

HSL 与 HSV 有什么区别?

两者使用相同的色相角度。HSL 无论饱和度如何,白色都处于最大明度,因此其中间值为纯色;HSV 则使纯色处于最大明度和饱和度,白色为零饱和度。HSL 是 CSS 支持的 hsl(),而 HSV(或 HSB)是大多数取色器所显示的格式。

CMYK 值对印刷准确吗?

不准确。它是从 RGB 进行的简单换算,不涉及油墨、纸张或 ICC 配置文件,因此只是以不同方式描述同样的数字,而不是预测印刷机的输出。超出印刷色域的颜色——例如明亮的屏幕蓝色和绿色——印出来会更暗淡。对于重要的印刷品,请使用印刷商的配置文件。

最接近的 CSS 名称是什么意思?

CSS 定义了 148 个颜色关键字。如果您的颜色恰好是其中之一,工具会直接显示它。否则会显示在 OKLab 中最接近的关键字;OKLab 的距离与人眼感知的差异相符。它适用于在注释中为颜色命名,但不能替代颜色代码本身。

为什么我的 HSL 值在往返换算后会略有变化?

HEX 和 RGB 将每个通道存储为 256 个值中的一个,而 HSL 并不能一一对应到这一网格上。以 HSL 输入的颜色会被舍入到最接近的 RGB 值,显示的 HSL 则由舍入后的值计算得出。从 HEX 代码开始,每次换算在显示精度内都是精确的。

我的颜色数据会被发送到任何地方吗?

不会。换算只是浏览器中的普通运算;您输入的内容既不会被上传,也不会被保存。

颜色转换器

以任一常见格式输入颜色,或直接取色,即可看到它以 HEX、RGB、HSL、HWB、HSV、CMYK 和 OKLCH 表示,并附带最接近的 CSS 颜色名称,以及可复制的 CSS 自定义属性代码块。换算遵循 CSS Color Module Level 4 公式,全部在您的浏览器中运行。免费,无需注册。

颜色——HEX、rgb()、hsl()、hwb()、hsv()、cmyk() 或 CSS 颜色名称

示例:#336699、rgb(51 102 153)、hsl(210 50% 40%)、hwb(210 20% 40%)、cmyk(67%, 33%, 0%, 40%)、rebeccapurple。如需透明度,请使用 #rrggbbaa 或“/ 50%”。

或选择颜色

换算结果

HEX
#336699
RGB
rgb(51 102 153)
HSL
hsl(210 50% 40%)
HWB
hwb(210 20% 40%)
HSV
hsv(210, 66.7%, 60%)
CMYK(简单换算)
cmyk(66.7%, 33.3%, 0%, 40%)
OKLCH
oklch(49.93% 0.0987 250.43)
CSS 颜色名称
steelblue(最接近)

CSS 自定义属性

:root {
  --color-hex: #336699;
  --color-rgb: rgb(51 102 153);
  --color-hsl: hsl(210 50% 40%);
  --color-oklch: oklch(49.93% 0.0987 250.43);
}

此处的 CMYK 是从 RGB 进行的简单设备换算——不涉及油墨、纸张或 ICC 配置文件,因此与印刷颜色不会相符。送印稿件前,请向印刷商索取其配置文件。

HSV 和 CMYK 并非 CSS 颜色函数;本页显示它们是为设计和印刷工具提供参考。

如何使用颜色转换器

1. 输入颜色。 粘贴或输入本框接受的任一格式——#336699、rgb(51 102 153)、hsl(210 50% 40%)、hwb(210 20% 40%)、cmyk(67%, 33%, 0%, 40%) 或 rebeccapurple 等 CSS 颜色名称。直接输入 51 102 153 将被识别为 RGB。
2. 或使用取色器。 取色器会设置颜色,并保留您已输入的透明度。
3. 复制所需内容。 每种格式都有自己的复制按钮;复制 CSS 会以自定义属性的形式提供 HEX、RGB、HSL 和 OKLCH 值,可直接用于样式表。
4. 查看名称。 如果您的颜色恰好是某个 CSS 关键字,工具会显示该关键字(rebeccapurple 即 #663399);否则显示最接近的关键字。

换算的工作原理

所有换算都通过 sRGB 进行,这是浏览器绘制颜色所用的色彩空间。HEX 代码就是以 16 为底的 RGB:#336699 的红色为 0x33 = 51,绿色为 0x66 = 102,蓝色为 0x99 = 153。其他格式只是重新排列同样的三个数字。

HSL 以色相(色轮上的角度,0–360°)、饱和度和明度描述颜色。设最大通道为 max、最小通道为 min(各除以 255),则明度为 (max + min) ÷ 2,饱和度为 (max − min) ÷ (1 − |2L − 1|)。色相由最大的通道决定。
HSV(也称 HSB)色相与 HSL 相同,但将明度定义为 max,饱和度定义为 (max − min) ÷ max。它是大多数取色器所用的模型。
HWB 是在纯色色相之上的白度(min)与黑度(1 − max)。当您想要调出色调或暗色时,它比 HSL 更易于理解。如果白度与黑度之和达到 100%,结果即为灰色。
CMYK 以简单设备换算的方式显示:K = 1 − max,然后 C、M、Y 各自为 (1 − 通道 − K) ÷ (1 − K)。它不涉及油墨、纸张或配置文件。
OKLCH 是 Björn Ottosson 的 OKLab 空间中的明度、彩度和色相,CSS Color 4 以 oklch() 形式支持它。在 L 上相等的步长,看起来比在 RGB 或 HSL 中的相等步长在亮度上更加接近。

同一种颜色的各种格式

HEX:#336699

RGB:rgb(51 102 153)

HSL:hsl(210 50% 40%)

HWB:hwb(210 20% 40%)

HSV:hsv(210, 66.7%, 60%)

CMYK:cmyk(66.7%, 33.3%, 0%, 40%)

OKLCH:oklch(49.93% 0.0987 250.43)

为什么这里的 CMYK 不是印刷颜色

屏幕通过叠加红、绿、蓝光来发色;印刷机则在纸上印刷青、品红、黄和黑色油墨。两者的色域不同,而纸上的油墨效果取决于纸张、印刷机和描述它们的 ICC 配置文件。仅从 RGB 出发的公式无法得知这些,因此上面的 CMYK 只是一种表示方式,而非印刷效果的预测:纯屏幕蓝色 #0000ff 会变成 100% 青色和 100% 品红,印出来是一种较暗淡的紫色。对于海报或印刷图表,请将 RGB 格式的原稿交给印刷商并索取其配置文件,或在设计软件中使用该配置文件进行换算。

舍入、钳制与透明度

舍入。 HEX 和 rgb() 只保存 0 到 255 之间的整数,因此输入的 hsl(210 50% 41%) 会被舍入到最接近的 8 位数值。将该值换算回去会得到略有不同的 HSL——8 位网格比 HSL 的粗。
超出范围的通道。 超出范围的数值会被钳制,与浏览器的做法一致:rgb(300 0 0) 为 #ff0000,负值通道则变为 0。
色相单位。 接受 deg、grad、rad 和 turn,且色相会循环:−150° 与 210° 相同。
透明度。 #rrggbbaa、#rgba 和 / 50% 均可使用。8 位 HEX 中的透明度以 8 位存储,因此 50% 变为 80,读回时为 50.2%。

常见问题

如何将 HEX 转换为 RGB?: 将六位数字分为三组,每组按 16 进制读取:#336699 为 33、66 和 99,即 51、102 和 153。将 HEX 代码粘贴到输入框中,RGB 值会立即出现,同时显示 HSL、HWB、HSV、CMYK 和 OKLCH。
HSL 与 HSV 有什么区别?: 两者使用相同的色相角度。HSL 无论饱和度如何,白色都处于最大明度,因此其中间值为纯色;HSV 则使纯色处于最大明度和饱和度,白色为零饱和度。HSL 是 CSS 支持的 hsl(),而 HSV(或 HSB)是大多数取色器所显示的格式。
CMYK 值对印刷准确吗?: 不准确。它是从 RGB 进行的简单换算,不涉及油墨、纸张或 ICC 配置文件,因此只是以不同方式描述同样的数字,而不是预测印刷机的输出。超出印刷色域的颜色——例如明亮的屏幕蓝色和绿色——印出来会更暗淡。对于重要的印刷品,请使用印刷商的配置文件。
最接近的 CSS 名称是什么意思?: CSS 定义了 148 个颜色关键字。如果您的颜色恰好是其中之一,工具会直接显示它。否则会显示在 OKLab 中最接近的关键字;OKLab 的距离与人眼感知的差异相符。它适用于在注释中为颜色命名,但不能替代颜色代码本身。
为什么我的 HSL 值在往返换算后会略有变化?: HEX 和 RGB 将每个通道存储为 256 个值中的一个,而 HSL 并不能一一对应到这一网格上。以 HSL 输入的颜色会被舍入到最接近的 RGB 值,显示的 HSL 则由舍入后的值计算得出。从 HEX 代码开始,每次换算在显示精度内都是精确的。
我的颜色数据会被发送到任何地方吗?: 不会。换算只是浏览器中的普通运算;您输入的内容既不会被上传,也不会被保存。