HEXA 到 RGBA 转换器

什么是 HEXA 颜色代码

一个 HEXA 颜色扩展了通常的 HEX 格式，增加了一个 alpha 通道。它使用 #RRGGBBAA，其中最后两个字符表示不透明度。

每对字符是一个从 00 到 FF 的十六进制数字。红色、绿色和蓝色对的行为与常规 HEX 颜色完全相同。最后的 alpha 对也在 00（完全透明）到 FF（完全不透明）之间变化。

例如，#FF000080 描述了一种半透明的红色。浏览器和工具解析每对字符，将其转换为十进制，然后在内部使用生成的 RGB 和 alpha 值。

什么是 RGBA

RGBA 是带有 alpha 通道的 RGB 颜色的功能性 CSS 形式。它写作 rgba(r, g, b, a)，其中 r、g 和 b 是从 0 到 255 的十进制值，而 a 是从 0 到 1 的数字。

alpha 值为 0 表示完全透明，1 表示完全不透明，而介于两者之间的值则创建部分透明。例如，rgba(0, 0, 0, 0.5) 是一种常用于覆盖的半透明黑色。

由于 RGBA 是一种函数表示法，它自然适合于 CSS 和关键帧动画，并且在 JavaScript 或其他运行时代码中易于生成。

HEXA 到 RGBA 转换公式

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

1) Split the HEXA string:
   #RRGGBBAA -> RR, GG, BB, AA

2) Convert each pair from hex to decimal:
   R = hex_to_dec(RR)
   G = hex_to_dec(GG)
   B = hex_to_dec(BB)
   A = hex_to_dec(AA)

3) Normalize alpha to [0, 1]:
   a = A / 255

4) Compose RGBA:
   rgba(R, G, B, a)

Helper:
   hex_to_dec("FF") = 255
   hex_to_dec("00") = 0

红色、绿色和蓝色对的行为与常规 HEX 到 RGB 转换相同。唯一的额外步骤是将 alpha 通道除以 255，以将其表示为 RGBA 函数中从 0 到 1 的分数。

#4FA3C2CC 的示例
1) 对:
   RR = 4F, GG = A3, BB = C2, AA = CC
2) 转换为十进制:
   R = 79,  G = 163, B = 194, A = 204
3) 归一化 alpha:
   a = 204 / 255  (约 0.8)
4) 最终值:
   rgba(79, 163, 194, 0.8)

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

将 HEXA 转换为 RGBA 主要是将每个颜色通道从十六进制形式解包。一旦对对进行解码为十进制，你只需缩放 alpha 通道。

#1A2B3C80
-> [1A, 2B, 3C, 80]
-> rgba(r, g, b, a)

以下是对 #1A2B3C80 的步骤的详细介绍。

• 步骤 1 - 将值拆分为对

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

• 步骤 2 - 将每对从十六进制转换为十进制

  每两个字符组是一个基数 16 的数字。将其转换为十进制，以获得红色、绿色、蓝色和 alpha 值，范围从 0 到 255。

  1A = 26
  2B = 43
  3C = 60
  80 = 128

• 步骤 3 - 归一化 alpha 并构建 RGBA

  将 alpha 通道除以 255，以获得最终的 alpha 分数，然后将所有四个值插入 rgba() 函数。

  rgba(26, 43, 60, 0.5)

你可以对任何有效的 HEXA 颜色应用相同的例程，这就是为什么在日常工作中使用转换器比手动重新计算每一步更方便。

选择 HEXA 和 RGBA 之间

HEXA 和 RGBA 都表达相同的信息：红色、绿色、蓝色和 alpha。区别在于它们的书写方式以及每种格式更方便的地方。

何时 HEXA 是合适的选择

• 设计令牌和样式映射: 像 #4FA3C2CC 这样的紧凑字符串易于存储在配置文件和主题对象中。
• 从设计工具复制: 许多编辑器可以将颜色导出为带有 alpha 的 HEX，因此你可以直接将其粘贴到代码库中。
• 色板列表: HEXA 代码易于在表格和 JSON 文档中对齐。

何时 RGBA 更实用

• 内联 CSS 和关键帧: 在样式表和动画中，rgba() 函数自然易读。
• 动态计算: 在 JavaScript 或着色器代码中，数字 alpha 和通道值易于调整。
• 与其他格式混合: RGBA 通常在 HEX、HSL 和更新的 CSS 颜色表示法之间转换时作为桥梁。

总结

当你关心紧凑、可共享的令牌时，请使用 HEXA。当你需要易于在代码中动画和操作的函数形式时，将这些颜色转换为 RGBA。

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

在许多项目中，你会遇到基于文本的 HEX 值和基于函数的 RGBA 声明。一些指导方针使混合更易于管理。

选择主要存储格式

• 使用 HEXA 作为令牌: 将设计系统颜色存储为 HEX 或 HEXA 字符串，并在必要时进行转换。
• 将 RGBA 保留用于实现细节: 在 CSS、画布和其他绘制或动画的地方使用 rgba()。

与其他模型结合

• 通过 RGB 或 HSL 转换: 你可以使用众所周知的中间步骤在 HEXA、RGBA 和 HSL 之间移动，而不是重新发明转换公式。
• 安全地限制值: 在代码中编辑值时，始终确保通道保持在有效范围内。

保持系统一致

• 记录你的选择: 写下 HEXA 使用的位置和 RGBA 更受欢迎的位置，以便未来的更改保持可预测。
• 使用转换器，而不是手动计算: 自动化助手减少错误，并保持不同格式之间的大调色板同步。

通过在存储和实现格式之间进行清晰的划分，你可以在同一代码库中舒适地结合 HEXA 和 RGBA，而不牺牲可读性。

HEXA 到 RGBA 转换表

下表列出了一些常见颜色及其透明度，分别以 HEXA 和 RGBA 形式书写。值经过四舍五入，以便在处理覆盖、阴影或玻璃效果时易于扫描。

对于任何其他 HEXA 组合，你可以使用页面顶部的转换器计算出标准算法的确切 RGBA 值。

常见问题：HEXA 到 RGBA

• HEX 和 HEXA 之间有什么区别

  常规 HEX 代码使用六位数字，仅描述 RGB 通道。HEXA 添加了两个数字用于 alpha 通道，因此你可以在同一紧凑字符串中表示透明度。

• 为什么要将 HEXA 转换为 RGBA

  许多代码示例和 CSS 特性期望使用 rgba() 或其他功能性颜色形式。转换为 RGBA 使得动画颜色、以数字调整 alpha 或与其他颜色模型混合更容易。

• 转换时颜色会改变吗

  不会。只要你的计算正确，HEXA 颜色及其 RGBA 对应物在屏幕上表示相同的视觉颜色和不透明度。

• 我可以将 RGBA 转换回 HEXA 吗

  可以。你可以将 r、g 和 b 转换为两位数的 HEX 值，并将 alpha 分数乘以 255 以获得最后一对。经过四舍五入和填充后，你将得到一个完整的八位数 HEXA 代码。

• 在 CSS 中使用 HEXA 还是 RGBA 更好

  这取决于你的目标。HEXA 保持令牌简短且易于复制，而 RGBA 通常在代码中更易于调整。许多团队在令牌中使用 HEXA，而在编写组件级样式时使用 RGBA。

相关转换器：

• HEXA 转 HSLA 转换器

  即时计算 hexa 转 hsla

• HEXA 转 HSVA 转换器

  即时计算 hexa 转 hsva

• RGBA 转 HEXA 转换器

  即时计算 rgba 转 hexa

• RGBA 转 HSLA 转换器

  即时计算 rgba 转 hsla

• RGBA 转 HSVA 转换器

  即时计算 rgba 转 hsva

• HSLA 转 HEXA 转换器

  即时计算 hsla 转 hexa