HEX 转 RGB 转换器
颜色选择器与转换工具 的预设方案
把一个十六进制颜色代码转换成 RGB 值。像 #abc 这样的简写形式会被正确展开成 #aabbcc,其他每一种格式也会一并显示出来,方便你取用代码需要的那一种。
- 文件永不离开你的设备
- 免费，无需注册
- 无水印
- 加载后可离线使用
如何颜色选择器与转换工具
- 1
选择一种颜色
使用色板,或直接输入 HEX 或 RGB 值。
- 2
复制任意格式
HEX、RGB、HSL、HSV 和 CMYK 会同时显示出来。
- 3
检查对比度
设置一个背景色,查看文字是否通过 WCAG AA 和 AAA 标准。
为什么会有简写十六进制代码,以及它们是怎么展开的
CSS 和设计工具都支持一种三字符的简写十六进制记法——`#abc`——作为一种紧凑的写法,用于每个通道恰好使用重复数字的颜色,它的展开方式是把每个字符重复一次,而不是补零:`#abc` 会变成 `#aabbcc`,而不是 `#0a0b0c`。这个区别很重要,因为这两种可能的展开方式会产出真正不同的颜色,手动转换时把这一点搞反,是一个常见又容易犯的错误——正确地把每个数字重复一次、而不是补零,正是一次正确转换需要做对的地方。
在不同工具之间正确读取 RGB 值
RGB 值按惯例写成红、绿、蓝分别从 0 到 255 的三个数字,但具体的记法会因粘贴到哪里而不同——CSS 接受用逗号分隔的 `rgb(171, 187, 204)`,一些设计和插画工具期望同样的三个数字用空格分隔、完全不带逗号,还有少数场合会把每个通道表示成 0 到 1 之间的小数,而不是 0 到 255 的整数。在这里把值拆解显示出来,省去了手动在目标工具或代码库恰好期望的那种具体记法之间来回转换的麻烦。
快速核对一个从截图或设计文件里取出的颜色值
一个从设计工具的取色器、品牌风格指南,或者截图取色工具里复制出来的十六进制代码,往往是唯一能拿到的值,没有附带的 RGB 分解——把它粘贴到这里,一起看到 RGB、HSL 和 CMYK 的等效值,比逐一去查每种转换或者手动计算要快得多。
常见问题
HEX、RGB 和 HSL 有什么区别?
HEX 和 RGB 用不同的记法描述同一件事——要混合多少红、绿、蓝。HSL 用色相、饱和度和明度重新表述,这要好推理得多:要让一个颜色变亮,只需要改一个数字,而不用去猜三个数字该怎么调。
对比度数值代表什么?
它比较两种颜色的相对亮度,范围从 1(完全相同)到 21(黑底白字)。WCAG 要求正常文字在 AA 级别至少达到 4.5:1,大号文字至少达到 3:1,到 AAA 级别则分别提高到 7:1 和 4.5:1。
为什么我看着挺好的颜色却没通过对比度检测?
因为这个比值是根据相对亮度计算的,而不是根据两种颜色看起来有多不同。两种明亮度相近的鲜艳颜色——比如红底上的橙色——看起来截然不同,但彼此之间几乎没有亮度对比,对视力较弱的人或者在阳光下的屏幕上会变得难以阅读。
CMYK 转换对印刷来说准确吗?
这是标准的算术转换,只是一个起点,而不是经过色彩管理的精确结果。真正的印刷工作需要针对具体印刷机和纸张的 ICC 色彩配置文件,因为 CMYK 本来就无法还原许多明亮的 RGB 颜色。