RGBA 转 HEXA 转换器

什么是 RGBA

RGBA 是 RGB 颜色模型的扩展，具有明确的 alpha 通道。它的写法为 rgba(r, g, b, a)，其中 r、g 和 b 是从 0 到 255 的十进制值，a 是从 0 到 1 的数字。

alpha 值控制不透明度：0 表示完全透明，1 表示完全不透明，介于两者之间的任何值都表示部分透明。例如，rgba(0, 0, 0, 0.5) 通常用于覆盖层和暗淡背景。

由于其函数样式语法和数字 alpha，RGBA 在内联 CSS、关键帧动画和 JavaScript 或其他运行时代码中的动态颜色计算中非常方便。

什么是 HEXA 颜色代码

HEXA 代码是一个包含透明度的八个字符的 HEX 值。格式为 #RRGGBBAA，其中每对代表一个通道：红色、绿色、蓝色和 alpha。

每对是从 00 到 FF 的十六进制数字。前三对的行为与常规的 #RRGGBB 颜色完全相同。最后一对定义了从完全透明 00 到完全不透明 FF 的不透明度。

浏览器和工具将每对转换为十进制，并在后台将其视为 RGB 和 alpha 通道。这使得 HEXA 成为一种紧凑、文本友好的透明颜色格式。

RGBA 转 HEXA 转换公式

rgba(r, g, b, a) -> #RRGGBBAA

Given:
  r, g, b in [0, 255]
  a in [0, 1]

1) Clamp channels:
   r_c = clamp(round(r),   0, 255)
   g_c = clamp(round(g),   0, 255)
   b_c = clamp(round(b),   0, 255)
   a_c = clamp(a,          0, 1)

2) Convert RGB to HEX pairs:
   RR = dec_to_hex(r_c)
   GG = dec_to_hex(g_c)
   BB = dec_to_hex(b_c)

3) Convert alpha to HEX pair:
   A_dec = round(a_c * 255)
   AA    = dec_to_hex(A_dec)

4) Join parts:
   #RRGGBBAA

Helpers:
   dec_to_hex(x) = to_hex(x).padStart(2, "0")
   clamp(x, min, max) = min if x < min, max if x > max, else x

这个想法很简单：首先确保 RGBA 值在有效范围内，然后将每个通道转换为两位十六进制片段，最后将四个片段连接成一个单一的 HEXA 字符串。

rgba(79, 163, 194, 0.8) 的示例
1) 限制:
   r_c = 79, g_c = 163, b_c = 194, a_c = 0.8
2) 转换 RGB:
   79  -> 4F
   163 -> A3
   194 -> C2
3) 转换 alpha:
   A_dec = round(0.8 * 255) = 204
   204   -> CC
4) 最终结果:
   #4FA3C2CC

RGBA 转 HEXA 转换的逐步工作原理

从 RGBA 转换到 HEXA 始终遵循相同的节奏：四舍五入并限制每个通道，将数字转换为十六进制字符串，然后将它们连接在一起。

rgba(26, 43, 60, 0.5)
-> [26, 43, 60, 0.5]
-> #RRGGBBAA

以下是对 rgba(26, 43, 60, 0.5) 过程的详细观察。

• 步骤 1 - 准备 RGBA 通道

  确保红色、绿色、蓝色和 alpha 值在预期范围内。在许多情况下，它们已经有效，因此这一步只是一个安全网。

  r_c = 26
  g_c = 43
  b_c = 60
  a_c = 0.5

• 步骤 2 - 将 RGB 转换为 HEX

  将每个颜色通道转换为两位 HEX 字符串。如果 HEX 表示只有一位，则添加前导零，以便最终代码始终具有六个颜色字符。

  26 -> 1A
  43 -> 2B
  60 -> 3C

• 步骤 3 - 转换 alpha 并连接所有内容

  将 alpha 从 0 到 1 缩放到 0 到 255 的范围，转换为 HEX，然后用前导 # 连接所有四对。

  #1A2B3C80

相同的步骤适用于任何有效的 RGBA 颜色，这就是为什么转换器或小型助手函数迅速成为颜色工具包中有用的一部分。

选择 RGBA 和 HEXA 之间

RGBA 和 HEXA 描述相同的信息，但每种格式在不同情况下更为舒适。RGBA 非常适合内联 CSS 和动画，而 HEXA 则非常适合令牌和配置。

何时 RGBA 更方便

• 组件级样式: rgba() 值在 CSS-in-JS、样式对象和关键帧中易于直接阅读。
• 运行时颜色调整: 数字 alpha 和通道使得在 JavaScript 或着色器代码中调整值变得简单。
• 与 API 一起使用: 许多绘图和画布 API 自然接受 RGBA 元组。

何时 HEXA 更合适

• 设计令牌: 短字符串如 #4FA3C2CC 易于在不同平台和语言中重用。
• 静态调色板: 当您维护主题、状态和语义角色的颜色列表时，HEXA 表现良好。
• 与设计工具互操作: 许多编辑器使用 HEX 或 HEXA 作为默认导出格式。

总结

在编写或动画样式时使用 RGBA。当您想要在配置或设计系统中使用紧凑、可共享的令牌时，将这些值转换为 HEXA。

同时使用 RGBA 和 HEXA 的最佳实践

在一个项目中混合使用 RGBA 和 HEXA 是很常见的，只要您提前决定每种格式的位置。一些指导方针可以保持事物的有序。

决定存储格式

• 使用 HEXA 作为令牌: 将设计系统颜色保持为 HEX 或 HEXA 字符串，并将其视为真实来源。
• 使用 RGBA 进行实现: 在实际编写 CSS 或画布逻辑时将令牌转换为 RGBA。

与其他模型结合

• 通过 RGB 或 HSL 转换: 标准助手可以在 RGBA、HEXA、HSL 和更新的 CSS 表示法之间移动，而无需自定义数学。
• 安全限制值: 在生成或动画颜色时，始终确保 r、g、b 和 a 保持在有效范围内。

保持系统可预测

• 记录您的规则: 清楚地说明在哪里期望 RGBA，在哪里存储 HEXA，以便未来的更改保持简单。
• 使用转换器而不是手动编辑: 自动化助手减少错误并保持调色板同步。

通过明确区分存储和实现格式，您可以在同一代码库中舒适地同时使用 RGBA 和 HEXA。

RGBA 转 HEXA 转换表

下表显示了几种常见的 RGBA 颜色及其 HEXA 等效值。为了保持易于扫描，值在需要时进行了四舍五入，因此请使用页面顶部的转换器进行精确工作。

对于任何其他 RGBA 颜色，您可以使用页面顶部的转换器使用相同的算法获得确切的 HEXA 字符串。

常见问题：RGBA 转 HEXA

• RGBA 和 HEXA 之间有什么区别

  RGBA 以函数调用中的十进制数字写入通道，而 HEXA 在单个字符串中使用四个两位十六进制对。两种格式编码相同的底层信息。

• 为什么要从 RGBA 转换为 HEXA

  许多设计系统更喜欢基于 HEX 的令牌，即使组件使用 RGBA 进行样式。转换让您在代码中保持干净的令牌格式，同时仍然使用数字值。

• 转换会改变颜色的外观吗

  不会。正确转换的 HEXA 字符串将以与原始 RGBA 值相同的颜色和透明度呈现。

• 我可以从 HEXA 返回到 RGBA 吗

  可以。您可以将每个 HEX 对解码为十进制，并将 alpha 对除以 255 以恢复 RGBA 组件。

• 在 RGBA 或 HEXA 上标准化更好吗

  这取决于您的工作流程。许多团队使用 HEX 或 HEXA 作为令牌，使用 RGBA 进行实现。重要的是选择明确的规则，并依赖转换器而不是手动编辑。

相关转换器：

• HEXA 转 RGBA 转换器

  即时计算 hexa 转 rgba

• HEXA 转 HSLA 转换器

  即时计算 hexa 转 hsla

• HEXA 转 HSVA 转换器

  即时计算 hexa 转 hsva

• RGBA 转 HSLA 转换器

  即时计算 rgba 转 hsla

• RGBA 转 HSVA 转换器

  即时计算 rgba 转 hsva

• HSLA 转 HEXA 转换器

  即时计算 hsla 转 hexa