颜色选择器工具 - 转换RGB、十六进制、CMYK和HSV颜色代码

什么是颜色选择器？

颜色选择器是一种用于选择颜色并以不同颜色格式读取其数值的工具。此工具可同时以 RGB（红、绿、蓝）、十六进制、CMYK（青、品红、黄、黑）和 HSV（色相、饱和度、明度）显示颜色。更改任一格式后，其他格式会立即更新。

如何使用颜色选择器

选择颜色有三种方式。

在色谱框中的任意位置单击，即可选择色相和饱和度。水平位置决定色相（所属的颜色类别，例如红色或蓝色）。垂直位置决定饱和度（颜色看起来有多鲜艳或灰暗）。色谱下方的滑块控制明度，从左侧的黑色到右侧的最高亮度。

也可以输入精确数值。十六进制输入框接受#2ECC71等代码，可带或不带#。每个 RGB 输入框都接受0至255之间的整数。每个 CMYK 输入框都接受0至100之间的整数。输入超过允许范围的数值时，会限制为最大值。

每种颜色格式旁边都有一个复制按钮。单击后，该数值会被复制到剪贴板，并显示简短的“已复制！”提示。

颜色模型说明

RGB

RGB 将颜色表示为红、绿、蓝三种光的混合，这也是屏幕创建每个像素所使用的三种颜色。每个通道的范围为0至255。RGB(255, 0, 0)是纯红色，而 RGB(0, 0, 0)是黑色。浏览器、应用和视频软件都使用 RGB，因为它符合屏幕的工作方式。

十六进制

十六进制代码使用16进制而不是10进制来表示 RGB 颜色。#2ECC71由三对字符组成：红色为2E，绿色为CC，蓝色为71。每对字符的范围为00至FF。十六进制代码在网页设计中很常见，因为 CSS 可以直接接受这种格式，而且比rgb()更短、更易输入。它也有三字符简写形式：#0F0与#00FF00表示相同的颜色。

CMYK

CMYK 用于印刷。打印机在白纸上分层叠加青色、品红色、黄色和黑色油墨来生成颜色，因此它通过减去光线而不是叠加光线来工作。每个通道都是从0到100的百分比。CMYK(0, 0, 0, 0)表示完全没有油墨，白纸会直接显现出来。CMYK 无法再现屏幕能显示的所有颜色；一些鲜艳的屏幕颜色，尤其是某些蓝色和绿色，印刷后会显得更暗淡。

HSV

HSV 分别表示色相、饱和度和明度。色相表示颜色类别，以0°至360°的角度表示，其中0°为红色，120°为绿色，240°为蓝色。饱和度表示颜色的鲜艳程度，从0%（灰色）到100%（完全着色）。明度表示亮度，从0%（黑色）到100%（最高亮度）。HSV 接近人们自然描述颜色的方式，因此该工具的色谱和亮度滑块都以它为基础。

RGB 转十六进制公式

每个 RGB 通道都是从0到255的数值，会被转换为两位十六进制数，然后在三组数值前加上#并连接起来。

$\text{Hex} = \text{\#} + \text{toHex}(R) + \text{toHex}(G) + \text{toHex}(B)$

RGB 转 CMYK 公式

首先，将每个 RGB 通道缩放为0到1之间的小数。黑色通道（K）取三个通道中的最大值计算得出。然后根据剩余通道和 K 计算青色、品红色和黄色。

$R' = R/255,\quad G' = G/255,\quad B' = B/255$ $K = 1 - \max(R', G', B')$ $C = \frac{1-R'-K}{1-K}\times 100\%,\quad M = \frac{1-G'-K}{1-K}\times 100\%,\quad Y = \frac{1-B'-K}{1-K}\times 100\%$

当 K 等于1（颜色为纯黑色）时，将 C、M 和 Y 都设为0，以避免除以零。

RGB 转 HSV 公式

首先，将 RGB 缩放为0到1之间的小数。设$C_{max}$为三个通道中的最大值，$C_{min}$为最小值，$\Delta$为两者之差。

$V = C_{max}\times 100\%$ $S = 0 \text{ if } C_{max}=0,\text{ 否则 } \frac{\Delta}{C_{max}}\times 100\%$

色相取决于哪个通道最大：

0° & \Delta = 0 \\ 60°\times\left(\dfrac{G'-B'}{\Delta}\bmod 6\right) & C_{max}=R' \\ 60°\times\left(\dfrac{B'-R'}{\Delta}+2\right) & C_{max}=G' \\ 60°\times\left(\dfrac{R'-G'}{\Delta}+4\right) & C_{max}=B' \end{cases}$$ ## 计算示例 以 RGB(46, 204, 113)开始，这是一种绿色。 **十六进制：**46的十六进制形式为`2E`，204为`CC`，113为`71`，因此得到`#2ECC71`。 **CMYK：**缩放后，R′ = 0.180，G′ = 0.800，B′ = 0.443。最大值是 G′，因此 K = 1 − 0.800 = 0.20，即20%的黑色。然后 C = (1 − 0.180 − 0.20) / 0.800 × 100 ≈ 77%，M = (1 − 0.800 − 0.20) / 0.800 × 100 = 0%，Y = (1 − 0.443 − 0.20) / 0.800 × 100 ≈ 45%。结果为 CMYK(77, 0, 45, 20)。 **HSV：**$C_{max}$ = 0.800（绿色），$C_{min}$ = 0.180，因此 Δ = 0.620。明度 = 80%。饱和度 = 0.620 / 0.800 × 100 ≈ 77%。由于绿色最大，H = 60 × ((B′ − R′) / Δ + 2) = 60 × ((0.443 − 0.180) / 0.620 + 2) ≈ 145°。结果为 HSV(145°, 77%, 80%)。 ## 让颜色选择更具可访问性 大约每1名 (2.5 厘米)12名男性和每1名 (2.5 厘米)200名女性中，就有一人存在某种形式的色觉缺陷，最常见的是分辨红色和绿色的能力减弱。仅依靠颜色传达含义的设计，例如只显示红色错误消息而没有图标或标签，对这些用户不起作用。在颜色旁边添加文字标签、图标或图案即可解决这一问题。 文字与背景之间也需要有足够的对比度。《网页内容无障碍指南》（WCAG）建议，普通文字的对比度至少为4.5:1，大号文字至少为3:1。需要使用专用的对比度检查器来测量这一点，因为此工具本身不计算对比度。 ## 常见问题 **RGB 和 CMYK 有什么区别？**RGB 用于屏幕，通过叠加红、绿、蓝光来生成颜色。CMYK 用于印刷，通过在纸上分层叠加油墨来生成颜色，原理则是减去光线。RGB 能产生比 CMYK 更鲜艳的颜色，因为油墨无法匹配屏幕发出的全部颜色范围。 **为什么印刷颜色看起来与屏幕上的不同？**屏幕会直接发光；印刷页面只能反射照射到它上面的光线。CMYK 油墨能够呈现的颜色范围也小于 RGB 光线，因此有些鲜艳的屏幕颜色无法在纸上完全准确地还原。 **十六进制代码中的 # 符号是什么意思？**它表示后面的字符是十六进制颜色代码，这是早期 HTML 和 CSS 沿用的约定。没有这个符号，浏览器就不会将该数值识别为颜色。 **为什么有些十六进制代码只有三个字符？**三字符代码是六字符代码的简写形式，其中每一对字符都重复同一个数字。`#0F0`会展开为`#00FF00`。 **不同格式之间的转换是否精确？**RGB 转十六进制是精确的，因为只是用不同进制表示相同的数值。RGB 转 CMYK 则是近似转换，因为这是在光线和油墨之间进行转换，而二者是不同的物理过程，颜色范围也不同。 **此工具能否直接从图像或网页中选择颜色？**不能。浏览器扩展或操作系统内置的颜色选择器（例如 macOS 上的 Digital Color Meter）可以读取屏幕上的颜色；然后可将得到的数值输入此工具进行转换。