免费 HEX 转 RGB 转换器 - 颜色代码转换器和选色器工具

HEX 转 RGB 的换算方法

此工具读取 HEX 颜色代码,同时给出 RGB、HSL、CMYK 以及 8 位 HEX/RGBA 数值,并显示实时色块、对比度预览和感知亮度。输入或粘贴代码,或者用取色器选择颜色,所有格式会同时更新。

换算原理

6 位 HEX 代码会拆分成三组 2 位数值,每组是 00 到 FF(十进制 0 到 255)之间的十六进制数,分别对应红、绿、蓝。3 位缩写形式会先把每位数字重复一次,例如 #F80 先变成 #FF8800,再按同样方式拆分。由这组 RGB 数值可推出 HSL:最亮和最暗通道的平均值得出明度,两者之差得出饱和度,通道顺序决定色相。CMYK 作为参考值计算,先从三个通道中取最大值得出 K,再据此换算青色、品红和黄色。感知亮度使用 ITU-R BT.601 权重,即 R×299 加 G×587 加 B×114,再除以 1000;结果高于 128 标记为浅色,低于则标记为深色,这一数值也决定对比度预览中的文字颜色。同一个输入框也能识别直接输入的 rgb(r, g, b) 字符串,取色器中每次选择都会自动刷新 HEX 输入框。 如果无法解析该代码,工具会在输入框下方显示错误提示,而不是自行猜测颜色。 每个换算出的数值都有自己的复制按钮,点击后会短暂变成对勾图标,这样就能只复制 RGB、CMYK 或 CSS 那一行,而不用管其他数值。

计算示例

以 #F77F00 为例。拆分后得到 R=247、G=127、B=0,即 RGB(247, 127, 0)。最亮和最暗通道的平均值得出明度 48%,两者之差得出饱和度 100%,色相落在 31 度,合起来是 HSL(31, 100%, 48%)。同样的 RGB 值代入 CMYK 公式得到 cmyk(0%, 49%, 100%, 3%)。8 位形式为 #F77F00FF,CSS 一行写作 color: #F77F00;。亮度为 255 分之 148,高于 128 的分界线,因此工具将该颜色标记为浅色,并在对比度预览中切换为黑色文字。

输出示例

Input:  #F77F00

Output: {
  "rgb":  "rgb(247, 127, 0)",
  "hsl":  "hsl(31, 100%, 48%)",
  "cmyk": "cmyk(0%, 49%, 100%, 3%)",
  "hex8": "#F77F00FF",
  "css":  "color: #F77F00;"
}