Hex 转 RGB 转换器：开发者颜色代码指南

颜色是每个用户界面的基础，开发者经常需要在十六进制颜色代码和RGB 值之间切换。无论你是用 CSS 设计网站、开发移动应用，还是用 Python 编写数据可视化脚本，理解 hex 和 RGB 之间的转换都至关重要。本完整指南讲解转换算法，提供多语言代码示例，并涵盖 alpha 透明度等高级主题。

立即试用我们的免费在线 Hex 转 RGB 转换器工具。

什么是十六进制颜色代码和 RGB 值？

十六进制颜色代码（也称 hex 颜色）使用以 # 开头的六字符字符串表示颜色。每对字符编码一个颜色通道：红、绿、蓝。格式为 #RRGGBB，每对是从 00 到 FF（十进制 0 到 255）的十六进制数。例如 #FF5733 表示红=255，绿=87，蓝=51。CSS 还支持三字符简写如 #F00，展开为 #FF0000。

RGB 值使用三个十进制数定义颜色，分别代表红、绿、蓝强度，范围均为 0 到 255。在 CSS 中写作 rgb(255, 87, 51)。RGB 广泛用于 CSS、JavaScript Canvas API、图像处理库和显示技术。十六进制和 RGB 描述相同的色彩空间（sRGB），因此它们之间的转换是无损的。

Hex 转 RGB 转换算法

hex 转 RGB 的转换非常直接，因为每对十六进制字符直接对应一个 RGB 通道。以下是逐步算法：

例如，转换 #1A2B3C：红 = 1A = 1*16+10 = 26，绿 = 2B = 2*16+11 = 43，蓝 = 3C = 3*16+12 = 60。结果为 rgb(26, 43, 60)。

反向转换（RGB 转 hex）将每个十进制通道值转换为两位十六进制字符串并连接：# + red.toString(16) + green.toString(16) + blue.toString(16)，必要时补前导零。

常用十六进制颜色代码及其 RGB 值

以下是常用颜色的 hex 和 RGB 对照表：

何时使用 Hex、RGB 和 HSL

这三种格式都描述相同的 sRGB 色彩空间，但各有优势：

Hex (#RRGGBB) 是最紧凑的格式，也是大多数 CSS 代码库的默认选择。Figma、Sketch 和 Adobe XD 等设计工具默认以 hex 格式复制颜色。Hex 非常适合静态颜色定义、样式指南和品牌色文档。简写（#FFF）可节省样式表字符数。

RGB / RGBA 是需要编程操作单个颜色通道或需要 alpha 透明度时的最佳选择。rgba(0, 0, 0, 0.5) 是 CSS 中添加透明度的标准方式。RGB 也是 HTML Canvas API、WebGL 和大多数图像处理库的原生格式。

HSL / HSLA（色相、饱和度、亮度）是最易读的格式。它非常适合创建调色板、生成明暗变体（通过调整亮度）和实现暗色主题。使用 HSL 的 CSS 自定义属性可轻松动态调整颜色。

实际开发中，大多数开发者使用 hex 定义静态颜色、rgba() 处理透明度、hsl() 构建动态颜色系统。

JavaScript、CSS 和 Python 中的 Hex 转 RGB

JavaScript / TypeScript

以下是一个健壮的 hex 转 RGB 函数，支持 3 字符简写、6 字符和 8 字符（含 alpha）hex 代码：

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

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

  // Handle 4-character shorthand (#F0A8 -> FF00AA88)
  if (hex.length === 4) {
    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);

  // Handle 8-character hex with alpha (#RRGGBBAA)
  if (hex.length === 8) {
    const a = parseInt(hex.substring(6, 8), 16) / 255;
    return { r, g, b, a: Math.round(a * 100) / 100 };
  }

  return { r, g, b };
}

// Examples
hexToRgb('#FF5733');    // { r: 255, g: 87, b: 51 }
hexToRgb('#3B82F6');    // { r: 59, g: 130, b: 246 }
hexToRgb('#F00');       // { r: 255, g: 0, b: 0 }
hexToRgb('#FF000080');  // { r: 255, g: 0, b: 0, a: 0.5 }

CSS 中的 Hex 与 RGB

在 CSS 中，hex 和 RGB 可以互换使用。现代浏览器对两种格式的支持完全相同：

/* These produce the exact same color */
.element-hex   { color: #3B82F6; }
.element-rgb   { color: rgb(59, 130, 246); }

/* Transparency — both are equivalent */
.overlay-hex   { background: #3B82F680; }      /* 50% opacity */
.overlay-rgba  { background: rgba(59, 130, 246, 0.5); }

/* Modern CSS space-separated syntax */
.modern        { color: rgb(59 130 246); }
.modern-alpha  { color: rgb(59 130 246 / 0.5); }

/* CSS custom properties work with any format */
:root {
  --primary: #3B82F6;
  --primary-rgb: 59, 130, 246;
}
.card {
  background: rgba(var(--primary-rgb), 0.1);
  border: 1px solid var(--primary);
}

Python

Python 使用内置的 int() 进制转换使 hex 转 RGB 变得简单：

def hex_to_rgb(hex_color: str) -> tuple[int, int, int]:
    """Convert hex color string to RGB tuple."""
    hex_color = hex_color.lstrip('#')

    # Handle 3-character shorthand
    if len(hex_color) == 3:
        hex_color = ''.join(c * 2 for c in hex_color)

    r = int(hex_color[0:2], 16)
    g = int(hex_color[2:4], 16)
    b = int(hex_color[4:6], 16)

    return (r, g, b)


def rgb_to_hex(r: int, g: int, b: int) -> str:
    """Convert RGB values to hex color string."""
    return f'#{r:02x}{g:02x}{b:02x}'


# Examples
print(hex_to_rgb('#FF5733'))   # (255, 87, 51)
print(hex_to_rgb('#3B82F6'))   # (59, 130, 246)
print(hex_to_rgb('#F00'))      # (255, 0, 0)

print(rgb_to_hex(59, 130, 246))  # #3b82f6
print(rgb_to_hex(255, 87, 51))   # #ff5733

RGB 转 Hex（JavaScript）

反向从 RGB 转换为 hex 同样实用：

function rgbToHex(r, g, b) {
  return '#' + [r, g, b]
    .map(v => {
      const hex = v.toString(16);
      return hex.length === 1 ? '0' + hex : hex;
    })
    .join('');
}

// With alpha support
function rgbaToHex(r, g, b, a = 1) {
  const hex = rgbToHex(r, g, b);
  if (a === 1) return hex;
  const alphaHex = Math.round(a * 255).toString(16).padStart(2, '0');
  return hex + alphaHex;
}

// Examples
rgbToHex(255, 87, 51);        // '#ff5733'
rgbToHex(59, 130, 246);       // '#3b82f6'
rgbaToHex(255, 0, 0, 0.5);   // '#ff000080'

Alpha 通道：带透明度的 Hex (#RRGGBBAA) 和 RGBA

hex 和 RGB 都支持 alpha（不透明度）通道。alpha 值控制透明度：1.0（或 FF）表示完全不透明，0.0（或 00）表示完全透明。

8 位 hex (#RRGGBBAA) 在颜色通道后追加两个字符的 alpha 值。例如 #FF000080 是 50% 透明度的红色（80 hex = 128 十进制，128/255 = ~50%）。所有主流浏览器均支持此格式。4 字符简写：#F008 展开为 #FF000088。

rgba() 是透明颜色更广泛认可的语法：rgba(255, 0, 0, 0.5)。第四个参数是 0 到 1 之间的小数。在现代 CSS 中，也可使用空格分隔语法：rgb(255 0 0 / 0.5)。

alpha 通道格式转换：hex 转十进制：hex 值除以 255（如 0x80 / 255 = 0.502）。十进制转 hex：乘以 255，四舍五入并转为 hex（如 Math.round(0.5 * 255).toString(16) = "80"）。

/* Common alpha values: hex ↔ decimal */
100% opacity:  FF = 1.0    →  #FF0000FF  =  rgba(255, 0, 0, 1.0)
 90% opacity:  E6 = 0.9    →  #FF0000E6  =  rgba(255, 0, 0, 0.9)
 80% opacity:  CC = 0.8    →  #FF0000CC  =  rgba(255, 0, 0, 0.8)
 70% opacity:  B3 = 0.7    →  #FF0000B3  =  rgba(255, 0, 0, 0.7)
 60% opacity:  99 = 0.6    →  #FF000099  =  rgba(255, 0, 0, 0.6)
 50% opacity:  80 = 0.5    →  #FF000080  =  rgba(255, 0, 0, 0.5)
 40% opacity:  66 = 0.4    →  #FF000066  =  rgba(255, 0, 0, 0.4)
 30% opacity:  4D = 0.3    →  #FF00004D  =  rgba(255, 0, 0, 0.3)
 20% opacity:  33 = 0.2    →  #FF000033  =  rgba(255, 0, 0, 0.2)
 10% opacity:  1A = 0.1    →  #FF00001A  =  rgba(255, 0, 0, 0.1)
  0% opacity:  00 = 0.0    →  #FF000000  =  rgba(255, 0, 0, 0.0)

常见问题

如何将 hex 转换为 RGB？

将十六进制颜色代码转换为 RGB：(1) 移除 # 前缀。(2) 将 6 字符字符串分成三对，每对 2 个字符。(3) 将每对从十六进制转为十进制。例如 #3B82F6 转换为 R=59, G=130, B=246，即 rgb(59, 130, 246)。对于 3 字符简写如 #F0A，先将每个字符加倍得到 #FF00AA，再转换。

十六进制颜色代码和 RGB 有什么区别？

Hex 和 RGB 使用不同的数字系统表示 sRGB 色彩空间中的相同颜色。Hex 使用十六进制表示法的紧凑 6 字符字符串 (#RRGGBB)，而 RGB 使用三个 0-255 的十进制数。它们功能完全相同：#FF0000 和 rgb(255, 0, 0) 都是纯红色。Hex 在 CSS 和设计工具中更常见，而 RGB 在编程环境和需要 alpha 透明度时更受青睐。

理解 hex 和 RGB 颜色格式是 Web 开发者和设计师的基础技能。无论你是手写 CSS 颜色、操作 canvas 像素值，还是构建设计系统，一旦理解十六进制数制，这些格式之间的转换就非常简单。收藏本指南以备参考，并使用我们的工具进行即时转换。

使用我们的免费 Hex 转 RGB 转换器即时转换颜色。