如何将 RGB 颜色转换为 HEX

← 返回博客

如何将 RGB 颜色转换为 HEX

· 5 分钟阅读

RGB 转 HEX 的使用场景

在网页开发中，CSS 的 rgb() 函数和 HEX 颜色代码都被广泛使用。当你从设计工具（如 Sketch 或 Adobe XD）获得一个 RGB 颜色值，但需要在 HTML 属性或旧版 CSS 中使用 HEX 格式时，就需要进行转换。此外，部分 API 和工具只接受 HEX 格式的颜色输入。

手动转换步骤

将 RGB 转换为 HEX 的过程就是将每个通道的十进制值转换为两位十六进制数。步骤如下：

1. 将 R、G、B 各自的十进制值除以 16，记录商和余数
2. 将商和余数分别转换为十六进制字符（10=A, 11=B, …, 15=F）
3. 将三组两位字符拼接，加上 # 前缀

RGB: rgb(255, 87, 51)

R = 255: 255 ÷ 16 = 15 rem 15 → FF
G = 87:   87 ÷ 16 = 5  rem 7  → 57
B = 51:   51 ÷ 16 = 3  rem 3  → 33

HEX: #FF5733

处理单位数的情况

当某个通道的值转换后只有一位十六进制数时（如 0–15 的值），必须在前面补零以保持 2 位。例如，RGB 值 5 转换为十六进制是 5，但在 HEX 颜色中必须写成 05，否则颜色代码会出错。

RGB: rgb(5, 16, 200)

R = 5:   5  → 05  (padded!)
G = 16:  16 → 10
B = 200: 200 ÷ 16 = 12 rem 8 → C8

HEX: #0510C8

JavaScript 实现

在 JavaScript 中，可以使用 Number.prototype.toString(16) 方法将数字转换为十六进制字符串，并用 padStart 保证两位：

function rgbToHex(r, g, b) {
  const toHex = (n) => n.toString(16).padStart(2, '0').toUpperCase();
  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
}

// Usage
rgbToHex(255, 87, 51);  // '#FF5733'
rgbToHex(5, 16, 200);   // '#0510C8'
rgbToHex(0, 0, 0);      // '#000000'

Python 实现

在 Python 中，使用格式化字符串可以轻松实现转换：

def rgb_to_hex(r, g, b):
    return '#{:02X}{:02X}{:02X}'.format(r, g, b)

# Usage
rgb_to_hex(255, 87, 51)  # '#FF5733'
rgb_to_hex(5, 16, 200)   # '#0510C8'

其中 {:02X} 格式说明符表示：将数字转换为大写十六进制（X），最少 2 位，不足则左侧补零（02）。

RGBA 转含透明度的 HEX

如果你的颜色包含透明度（如 rgba(255, 87, 51, 0.5)），可以将 Alpha 值（0–1）乘以 255，然后同样转换为十六进制，追加到 HEX 字符串末尾，形成 8 位 HEX 代码：

function rgbaToHex(r, g, b, a) {
  const toHex = (n) => Math.round(n).toString(16).padStart(2, '0').toUpperCase();
  return `#${toHex(r)}${toHex(g)}${toHex(b)}${toHex(a * 255)}`;
}

rgbaToHex(255, 87, 51, 0.5); // '#FF573380'

常见错误和注意事项

• 不要忘记对单位数结果补零（如 5 应写为 05）
• RGB 值必须在 0–255 范围内，超出此范围的值无效
• 大写和小写的 HEX（FF 和 ff）在 CSS 中等效，但保持一致性更规范
• 浮点数 RGB 值（如 255.7）在转换前应先四舍五入

立即尝试在线工具，无需安装，免费使用。

打开工具 →