HEX 转 RGB 转换器

什么是 HEX 颜色

HEX 颜色是一种使用十六进制（基数为 16）的六位数值表示方式，格式为 #RRGGBB。每一对字符（RR、GG、BB）分别表示红色、绿色和蓝色的强度，范围从 00（无强度）到 FF（最大强度）。

在实际使用中，HEX 只是 RGB 的另一种编码形式。浏览器会读取 HEX 字符串，将其拆分为三个部分，并从十六进制转换为十进制，得到 rgb(r, g, b)。因此，HEX 是一种紧凑且常用于 CSS、设计工具和前端开发的颜色格式。

例如，#FF8800 表示红色通道为最大值（FF），绿色为中等值（88），蓝色为 00。这种一一对应的关系使 HEX 成为 Web 中直观且可靠的颜色表示方式。

什么是 RGB 颜色

RGB 是一种通过 红、绿、蓝 三个通道组合来表示颜色的模型。每个通道使用 0 到 255 的十进制数值，其中 0 表示无强度，255 表示最大强度。

这三个数值组合后可以表示屏幕上显示的所有颜色。例如，rgb(255, 0, 0) 表示纯红色，rgb(0, 255, 0) 表示纯绿色，rgb(0, 0, 255) 表示纯蓝色。

RGB 是显示器、电视、手机屏幕、图形软件以及 Web 技术中使用的核心颜色模型。由于它直接对应屏幕发光方式，因此是数字颜色表示中最常用、最准确的格式。

HEX 转 RGB 的计算公式

#RRGGBB → rgb(r, g, b)

r = hex_to_dec(RR)
g = hex_to_dec(GG)
b = hex_to_dec(BB)

// 辅助函数：
hex_to_dec(AB) = (值(A) * 16) + 值(B)

下面是将 HEX 颜色手动转换为 RGB 分量所使用的公式。每两个字符（RR、GG、BB）都会通过简单的十六进制转十进制函数进行处理。

// #4FA3C2 的示例
RR = "4F" → hex_to_dec(4F) = (4 * 16) + 15 = 79
GG = "A3" → hex_to_dec(A3) = (10 * 16) + 3 = 163
BB = "C2" → hex_to_dec(C2) = (12 * 16) + 2 = 194

rgb(79, 163, 194)

如果需要了解十六进制数值（0–F）或数制的基本概念，可以参考 数制说明。

HEX 转 RGB 的转换过程（分步说明）

HEX 颜色由六个字符组成，并分为三组。每一组表示红色、绿色或蓝色的强度。要将 HEX 转换为 RGB，需要将这三组数值从 16 进制转换为 10 进制。

#1A2B3C
 ↓   ↓   ↓
[1A, 2B, 3C] -> rgb(26, 43, 60)

以下以颜色 #1A2B3C 为例，说明完整的转换步骤：

• 步骤 1 — 拆分 HEX 值：

  [1A] [2B] [3C]

• 步骤 2 — 将每一对字符从 HEX 转为十进制：

  每一对字符都是一个 16 进制数。转换为十进制时，用第一个字符乘以 16，再加上第二个字符的数值。HEX 中的 A–F 分别对应 10–15。

  1A = (1 * 16) + 10 = 26
  2B = (2 * 16) + 11 = 43
  3C = (3 * 16) + 12 = 60

  （A = 10，B = 11，C = 12）

• 步骤 3 — 将结果组合为 RGB 颜色：

  rgb(26, 43, 60)

这种方法适用于任何 HEX 颜色：拆分数值、转换进制，然后组合为一个 RGB 三元组。

什么时候使用 HEX，什么时候使用 RGB

HEX 和 RGB 都可以在 CSS 中定义颜色，但各自更适合不同的使用场景。选择哪种格式，取决于可读性、精度需求以及具体的样式用途。

使用 HEX 的场景

• 紧凑且易读: HEX 数值较短，便于快速查看，常用于设计系统和样式规范中。
• 适合纯色: 适用于不需要透明度的静态 UI 颜色。
• 设计工具常用: 多数设计软件默认使用 HEX，有助于在设计稿和代码之间保持一致。
• 便于复制和共享: HEX 值简洁，适合在不同工具或平台之间传递颜色。

使用 RGB 的场景

• 更直观的通道控制: RGB 明确展示红、绿、蓝通道，适合在 JavaScript 或 CSS 中动态调整颜色。
• 渐变和高级效果: 许多 CSS 特性（如 rgb() 和 rgba()）更适合使用数值通道。
• 支持透明度: RGB 可以扩展为 RGBA，用于精确控制不透明度，而普通 HEX 无法做到这一点（除非使用 8 位格式）。
• 适合动画: 数值型通道在过渡和关键帧动画中更容易进行插值计算。

总结

当需要简洁、可读的静态颜色值时使用 HEX。当需要透明度、动态调整或精确控制通道时使用 RGB/RGBA。两种格式描述的是同一颜色空间，选择取决于在 CSS 或 JavaScript 中的具体用法。

CSS 中使用颜色的最佳实践

CSS 支持多种颜色格式，每种都有实际用途。下面的建议总结了如何高效地使用这些格式。

选择合适的颜色格式

• HEX：用于静态 UI 颜色的紧凑表示，适合设计令牌和简单颜色值。
• RGB：在需要明确通道数值或进行程序化修改时使用。
• RGBA：在需要透明度控制时使用，适合遮罩、阴影和叠加元素。
• HSL：适用于主题系统，比 RGB 更容易预测色相、饱和度和亮度的变化。

尽量使用简写 HEX

• #FFF 替代 #FFFFFF：当每个通道的两位数相同，可以使用三位简写，使样式更简洁。

什么时候使用 HEX8

• #RRGGBBAA：在 HEX 格式中包含透明度。适合在以 HEX 为主的配色体系中需要透明度的情况。
• 仅在完整的 8 位格式下有效。除非必要，不要在同一套颜色系统中混用 HEX 和 RGBA。

常见错误

• 混用颜色格式：在同一设计系统中保持一致的颜色格式，便于维护。
• 对动态效果使用 HEX：动画和过渡更适合使用 rgb()、rgba() 或 hsl()。
• 错误使用 HEX 简写：只有在每个通道值完全相同时才能使用三位格式。
• 需要透明度却使用 HEX：此类场景应使用 RGBA 或带 alpha 的 HSL。
• 阴影过度使用纯黑色 (#000)：建议使用半透明的 RGBA 或 HSL，以获得更自然的效果。

遵循这些做法可以保证颜色渲染稳定、代码更清晰，并在设计系统、组件和不同 UI 状态下保持一致。

HEX 转 RGB 对照表

下表列出了常用的 HEX 颜色及其对应的 RGB 值，包括常见的 UI 颜色、灰度阶和基础 RGB 组合。

该表涵盖了最常用的颜色值。本页面的转换器可以为任何有效的 HEX 代码生成准确的 RGB 结果。

常见问题：HEX 转 RGB

• HEX 中的 FF、00、AA 表示什么？

  它们是十六进制数值。每一对字符的范围是 00（0）到 FF（255），表示对应颜色通道的强度。

• 为什么 RGB 的取值范围是 0 到 255？

  RGB 基于 8 位通道。8 位可以表示 256 个数值，因此使用 0–255 作为数字颜色系统的标准范围。

• HEX 支持透明度吗？

  标准 HEX（#RRGGBB）不包含透明度。HEX8（#RRGGBBAA，也称为 HEXA）支持透明度，最后两位 AA 表示 alpha 通道。

• HEX 与 HEX8 / HEXA 有什么区别？

  HEX 只包含红、绿、蓝三个通道。HEX8（或 HEXA）在此基础上增加了一个透明度通道，格式为 #RRGGBBAA，alpha 值范围从 00（透明）到 FF（不透明）。

• #RGB 和 #RRGGBB 有什么区别？

  #RGB 是 #RRGGBB 的简写形式，每个字符会被重复一次。例如：
  #F0A → #FF00AA。

相关转换器：

• HEX 转 HSL 转换器

  即时计算 hex 转 hsl

• HEX 转 HSV 转换器

  即时计算 hex 转 hsv

• RGB 转 HEX 转换器

  即时计算 rgb 转 hex

• RGB 转 HSL 转换器

  即时计算 rgb 转 hsl

• RGB 转 HSV 转换器

  即时计算 rgb 转 hsv

• HSL 转 RGB 转换器

  即时计算 hsl 转 rgb