如何将 HEX 颜色代码转换为 RGB

HEX和RGB是写出完全相同颜色的两种方式。设计师和开发者经常在它们之间切换:CSS样式表中的HEX、JavaScript动画中的RGB、设计工具中的HSL。理解它们之间的关系使颜色工作变得更容易。转换器处理心算,这样您就可以专注于获得正确的颜色,而不是进行16进制除法。

HEX颜色如何工作

像#FF5733这样的HEX颜色代码是一个6位十六进制数字,代表红色、绿色和蓝色通道:

每个通道范围从00(0,无颜色)到FF(255,全强度)。所以#FF5733意味着全红、一些绿、少许蓝,这给您一个温暖的橙红色。

如何将HEX转换为RGB

1. 输入您的HEX代码:键入或粘贴像#FF5733这样的颜色代码,或使用颜色选择器。
2. 查看RGB值:查看等效的红色、绿色和蓝色值(每个0-255)。
3. 以任何格式复制:获取值作为rgb(255, 87, 51)、单个通道或其他格式如HSL。

网络上颜色代码的简史

早期网络浏览器(Mosaic 1993、Netscape 1994)中的颜色仅使用命名颜色:red、blue、green。HTML 3.2规范(1997)通过BGCOLOR属性引入了十六进制颜色代码,CSS 1(1996)使它们通用化。选择HEX而非十进制是出于实际原因:6字符HEX代码比rgb(255, 87, 51)更短,更容易从颜色选择器复制粘贴。

RGB颜色模型本身要古老得多。James Clerk Maxwell在1861年证明,人眼可见的任何颜色都可以通过混合红、绿、蓝光来创建。电视(1930年代)和计算机显示器(1970年代)直接使用此原理:每个像素是三个子像素(一个红、一个绿、一个蓝),亮度不同。

现代CSS(2010年起)添加了更多颜色格式:hsl()(色调、饱和度、明度)、hwb()(色调、白度、黑度)、lab()(感知均匀)、lch()、oklab()、oklch()和color()用于任意颜色空间。所有这些都代表与HEX/RGB相同的颜色,但具有不同的心理模型。HEX持续存在是因为它密集、可复制粘贴且易于共享。

手动转换:如何在脑中完成

您不需要工具来转换简单的HEX值。诀窍是了解16的幂:

• 0 = 0
• 5 = 5
• A = 10
• F = 15
• 10(hex) = 16
• FF(hex) = 255

对于像5A这样的HEX对:第一个数字乘以16加上第二个数字。5A = 5 × 16 + 10 = 90。

快捷方式:

• 00 = 0
• 33 = 51(常见的20%灰度步长)
• 66 = 102
• 99 = 153
• CC = 204
• FF = 255

对33、66、99、CC(任意组合)产生1990年代经典的「网络安全」216色调色板。即使在今天,它们也经常出现在设计师的情绪板中。

常见颜色代码

带alpha的HEX(8位HEX)

CSS 4(2017)引入了带alpha通道的8位HEX。#FF5733CC是rgb(255, 87, 51)带80%不透明度(CC在hex中 = 204,除以255 = 0.80)。

现代浏览器中的浏览器支持是通用的(Chrome 62+、Firefox 49+、Safari 9.1+、Edge 79+)。对于新项目,8位HEX是rgba()的干净替代品。对于旧项目,保留rgba()以实现向后兼容性。

还存在一个4位短HEX:#F80C与#FF8800CC相同。与3位HEX相同的快捷规则。

每种格式的用例

使用HEX时:

• 在样式表中编写CSS颜色值
• 与设计师或在文档中共享单个颜色
• 在JSON或数据文件中紧凑地存储颜色
• 使用品牌调色板(公司通常将品牌颜色指定为HEX)

使用RGB时:

• 在JavaScript中动画颜色(将通道解析为数字、插值、重新格式化)
• 计算颜色对比度比率(WCAG公式在RGB上运行)
• 对于旧浏览器,使用rgba()需要部分透明度
• 从画布或图像数据读取颜色(Canvas API返回RGB)

使用HSL时:

• 生成色调调色板(保持饱和度和明度,改变色调)
• 创建暗模式变体(保持色调,增加明度)
• 做色彩理论工作(互补色在色调上相距180°)

使用OKLCH时:

• 您关心感知均匀性(在OKLCH中插值避免了在RGB中得到的「浑浊中间」)
• 在2024+项目中从头开始构建颜色系统

常见陷阱

• 忘记#前缀:CSS需要哈希。color: FF5733无效;color: #FF5733正确。
• 大小写混合:#FF5733和#ff5733是相同的颜色但风格上不一致。选择一个(大多数代码偏好小写HEX)并坚持使用。
• 将HEX与一般的十六进制混淆:HEX颜色代码总是3、4、6或8位数字。其他长度(5、7)无效。程序可能会静默截断或填充。
• 8位HEX中的字节顺序错误:某些库使用ARGB(#CCFF5733,alpha在前)而不是RGBA(#FF5733CC,alpha在后)。CSS使用RGBA。Adobe和一些Android API使用ARGB。
• 假设RGB是sRGB:大多数HEX/RGB颜色在sRGB颜色空间。P3显示器(2016年起的Apple设备)可以显示更宽的颜色,但标准HEX无法描述它们。对那些使用color(display-p3 ...)。
• 来回转换时的颜色四舍五入:HEX到RGB到HEX是无损的。HEX到HSL到HEX由于浮点数学可能损失1-2级精度。

提示

• 在CSS中使用HEX:color: #FF5733比样式表中的color: rgb(255, 87, 51)更干净、更常见。
• 使用RGB实现透明度:当您需要半透明颜色时,使用rgba(255, 87, 51, 0.5)。在标准HEX中无法添加alpha(虽然8位HEX存在,但浏览器支持不同)。
• 3位快捷方式:#F00与#FF0000相同。在每对具有相同数字时使用以节省空间。
• 颜色选择器更快:如果您正在尝试找到正确的颜色,请使用可视化颜色选择器,而不是猜测HEX值。对结果满意后复制代码。
• 将品牌颜色保存为CSS自定义属性:--brand-primary: #FF5733让您一次更改值并在所有地方更新。比在文件中搜索替换HEX代码更容易。
• 选择后检查对比度:如果其上的文本不可读,美丽的颜色就毫无用处。将此转换器与对比度检查器配对,以验证WCAG AA(4.5:1)或AAA(7:1)比率。

隐私

HEX到RGB转换器完全在您的浏览器中运行。您输入的颜色、自定义调色板和任何保存的值都保留在您的设备上。这比文件转换工具的重要性要小(颜色代码不是个人敏感的),但对于设计机密性原因来说很重要:您正在试验的颜色可能会泄露未宣布的品牌方向、NDA下的客户工作或正在开发的产品主题。仅浏览器计算具有零暴露。