如何将 HEX 颜色转换为 RGB

← 返回博客

如何将 HEX 颜色转换为 RGB

· 5 分钟阅读

为什么需要 HEX 转 RGB

HEX 颜色代码（如 #FF5733）在网页设计中非常普遍，而 RGB 格式（如 rgb(255, 87, 51)）在某些场景下更为直观或必要。当你需要在 CSS 中添加透明度、在 JavaScript 中动态计算颜色插值，或将设计稿颜色传递给打印工作流时，转换为 RGB 往往是必要步骤。

手动转换方法

HEX 转 RGB 的核心在于将十六进制字符对转换为十进制数。步骤如下：

1. 去掉 # 号，得到 6 位十六进制字符串
2. 将字符串分为三组，每组 2 个字符（RR、GG、BB）
3. 将每组从十六进制转换为十进制数

HEX: #FF5733

RR = FF → (15 × 16) + 15 = 255
GG = 57 → (5  × 16) + 7  = 87
BB = 33 → (3  × 16) + 3  = 51

RGB: rgb(255, 87, 51)

十六进制字母对照表

十六进制使用字母 A–F 来代表 10–15 的数值。在手动计算时，记住以下对应关系：A=10，B=11，C=12，D=13，E=14，F=15。

Example: #1A2B3C
R = 1A → (1 × 16) + 10 = 26
G = 2B → (2 × 16) + 11 = 43
B = 3C → (3 × 16) + 12 = 60
RGB: rgb(26, 43, 60)

在代码中实现 HEX 转 RGB

在 JavaScript 中，可以使用 parseInt 配合基数 16 来完成转换：

function hexToRgb(hex) {
  // Remove # if present
  hex = hex.replace(/^#/, '');

  // Handle 3-character shorthand
  if (hex.length === 3) {
    hex = hex.split('').map(c => c + c).join('');
  }

  const r = parseInt(hex.substring(0, 2), 16);
  const g = parseInt(hex.substring(2, 4), 16);
  const b = parseInt(hex.substring(4, 6), 16);

  return { r, g, b };
}

// Usage
hexToRgb('#FF5733'); // { r: 255, g: 87, b: 51 }

转换 3 位简写 HEX

当遇到简写形式（如 #F53）时，先将每个字符复制一份展开为 6 位（#FF5533），再按标准方法转换。在代码中，可以对每个字符 c 执行 c + c 操作来完成展开，如上面 JavaScript 示例中所示。

CSS 中的 rgba() 格式

一旦拥有了 RGB 值，就可以轻松地在 CSS 中使用 rgba() 函数添加透明度。透明度值（alpha）范围为 0（完全透明）到 1（完全不透明）：

/* Fully opaque */
background: rgb(255, 87, 51);

/* 50% transparent */
background: rgba(255, 87, 51, 0.5);

/* 20% transparent overlay */
background: rgba(255, 87, 51, 0.2);

这是 HEX 格式无法直接做到的事情（尽管现代 CSS 支持 8 位 HEX 透明度），因此在需要透明效果的场景中，RGB/RGBA 是更常用的选择。

使用在线工具快速转换

对于日常设计工作，手动计算并不高效。我们的在线颜色选择工具可以即时完成 HEX 到 RGB 的转换，只需输入任意 HEX 代码，工具会立即显示对应的 RGB、HSL 等多种格式的值，方便复制使用。

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

打开工具 →