HEXA 转 HSLA 转换器

什么是 HEXA 颜色代码

HEXA 是在经典 HEX 格式基础上加入透明度的扩展形式。它使用 #RRGGBBAA 代替 #RRGGBB，其中最后两个字符表示 alpha 通道。

四个部分都是取值范围为 00 到 FF 的十六进制数。前三组分别控制红、绿、蓝通道，与普通 HEX 颜色一致。最后一组定义不透明度：00 表示完全透明，FF 表示完全不透明。

浏览器和工具会读取每一组数值并将其转换为十进制，然后将前三个作为 RGB 通道，最后一个作为 0 到 255 之间的 alpha 值。这使得 HEXA 成为在单个字符串中同时存储颜色和透明度的紧凑方式。

什么是 HSLA

HSLA 是带有 alpha 通道的 HSL 颜色模型，写作 hsla(h, s, l, a)，其中 h 表示色相角度，s 表示饱和度，l 表示亮度，a 表示不透明度。

色相以角度表示，范围为 0 到 360。饱和度和亮度以百分比表示，范围为 0% 到 100%。alpha 分量是 0 到 1 之间的数值，其中 0 表示完全透明，1 表示完全不透明。

HSLA 在设计工作中非常直观，因为可以将色相与强度、明暗分开调整，同时通过第四个参数控制透明度。该格式在现代 CSS 中得到广泛支持。

HEXA 转 HSLA 的转换公式

#RRGGBBAA -> hsla(h, s, l, 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 the alpha channel:
   a = A / 255

4) Convert RGB to HSL:
   r' = R / 255
   g' = G / 255
   b' = B / 255

   max = max(r', g', b')
   min = min(r', g', b')
   delta = max - min

   // Lightness:
   l = (max + min) / 2

   // Saturation:
   if delta == 0 then s' = 0
   else s' = delta / (1 - |2 * l - 1|)

   // Hue:
   if delta == 0 then h = 0
   else if max == r' then h = 60 * (((g' - b') / delta) mod 6)
   else if max == g' then h = 60 * (((b' - r') / delta) + 2)
   else if max == b' then h = 60 * (((r' - g') / delta) + 4)

5) Scale to final units:
   H = h
   S = s' * 100
   L = l * 100

6) Compose HSLA:
   hsla(H, S%, L%, a)

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

红、绿、蓝分量的处理方式与任何 HEX 转 HSL 的转换一致。alpha 对只用于计算 HSLA 中最终的 a 值，因此颜色本身不会发生变化，变化的只有透明度。

#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) 将 (79, 163, 194) 转换为 HSL:
   hsl(196, 49%, 54%)  (四舍五入)
5) 最终 HSLA:
   hsla(196, 49%, 54%, 0.8)

HEXA 转 HSLA 的分步转换过程

在实现层面，HEXA 转 HSLA 是 HEX 转 RGB、RGB 转 HSL 以及 alpha 通道归一化的组合过程。你需要先从十六进制形式中解析所有通道，然后将它们映射到 HSLA 模型中。

#1A2B3C80
-> [1A, 2B, 3C, 80]
-> rgb(r, g, b) + alpha
-> hsla(h, s, l, a)

下面以 #1A2B3C80 为例，详细说明整个过程。

• 步骤 1 — 解析 HEX 数值对

  将字符串拆分为四组，并分别从 16 进制转换为 10 进制。前三组分别作为 R、G、B，最后一组作为原始 alpha 值。

  RR = 1A -> 26
  GG = 2B -> 43
  BB = 3C -> 60
  AA = 80 -> 128

• 步骤 2 — 从 RGB 计算 H、S、L

  将 RGB 通道归一化到 0 到 1 的范围内，找出最大值和最小值，然后使用标准的 HSL 公式计算色相、饱和度和亮度。

  r' = 26 / 255
  g' = 43 / 255
  b' = 60 / 255
  l = (max + min) / 2
  ... -> hsl(210, 39%, 17%) (rounded)

• 步骤 3 — 归一化 alpha 并生成 HSLA

  将 alpha 值除以 255，并将所有参数代入 hsla() 函数。

  hsla(210, 39%, 17%, 0.5)

这一套步骤适用于任何合法的 HEXA 颜色，因此使用转换器或辅助函数通常是最安全、最快的做法。

如何在 HEXA 和 HSLA 之间选择

HEXA 和 HSLA 描述的是相同的底层信息：颜色加透明度。主要区别在于你更看重紧凑存储，还是更看重可读性和编辑便利性。

适合使用 HEXA 的场景

• 设计令牌和主题文件: 像 #4FA3C2CC 这样的短字符串非常适合存放在 JSON 或配置对象中。
• 从设计工具复制: 许多图形编辑器会以带 alpha 的 HEX 格式导出颜色，可以直接粘贴到令牌集合中。
• 共享调色板: HEXA 代码结构紧凑，非常适合用于大型语义颜色查找表。

HSLA 更实用的场景

• 精细调整主题: HSLA 中明确的色相、饱和度和亮度参数，比 HEX 中的三个原始通道更容易调整。
• 说明设计决策: 像 hsla(210, 40%, 20%, 0.7) 这样的数值，比八位 HEX 代码更容易在规范中讨论。
• 使用现代 CSS 特性: HSLA 可以自然地与其他基于 HSL 的颜色工具和混合方式配合使用。

总结

当你需要紧凑的令牌和方便的复制粘贴时，使用 HEXA。当你需要可读、可调整的参数用于主题、组件或文档时，将其转换为 HSLA。

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

在同一个项目中同时维护基于 HEX 和 HSL 的颜色是很常见的。一些约定可以帮助系统保持良好的可维护性。

定义唯一的数据来源

• 为令牌选择一个主要格式: 许多团队选择使用 HEXA 作为基础令牌，并在需要时再派生 HSLA 值。
• 保持转换自动化: 避免在多个地方手动修改 alpha 或颜色通道的值，应依赖脚本或工具完成转换。

与其他颜色模型结合使用

• 必要时通过 RGB 作为中间层: HEXA、HSLA 与其他模型之间的转换通常都会经过 RGB。
• 安全地限制取值范围: 在动画或生成变体时，始终确保色相、饱和度、亮度和 alpha 值处于合法范围内。

保持调色板一致性

• 记录各格式的使用方式: 例如：HEXA 用于令牌，HSLA 用于文档和代码示例，RGBA 用于底层绘制代码。
• 使用工具而不是手算: 这样可以减少错误，并让大规模主题更新更容易管理。

通过明确的规则和自动化的转换，你可以同时发挥 HEXA 和 HSLA 的优势，而不会影响样式和设计系统的清晰度。

HEXA 转 HSLA 对照表

下表列出了一些常见的带透明度颜色，分别以 HEXA 和 HSLA 形式表示。数值经过取整以便阅读，如需精确结果，请使用上方的转换器。

对于任何其他 HEXA 值，你都可以使用页面顶部的转换器，通过标准算法计算对应的 HSLA 颜色。

FAQ：HEXA 转 HSLA

• HEXA 与 HEX 有什么区别

  HEX 只使用六位数表示 RGB。HEXA 在此基础上增加了一组 alpha 数值，扩展为八位，从而同时描述颜色和透明度。

• 为什么要将 HEXA 转换为 HSLA

  HSLA 允许你独立调整色相、饱和度和亮度，同时将 alpha 作为单独参数保留。这在调整主题或记录设计决策时尤其有用。

• 转换会改变视觉颜色吗

  不会。正确转换后的 HSLA 值与原始 HEXA 字符串表示的是相同的颜色和透明度，只是书写方式不同。

• 可以从 HSLA 再转换回 HEXA 吗

  可以。你可以先将 HSLA 转为 RGB，将 alpha 值乘以 255，然后把四个数值分别转换为两位 HEX，重新组合成 HEXA 字符串。

• 在 CSS 中应该使用 HSLA 还是 RGBA

  两者都可以。HSLA 在调整调色板和主题时更直观，而 RGBA 在已经基于 RGB 工作的情况下会更方便。很多项目会根据具体场景混合使用这两种格式。

相关转换器：

• HEXA 转 RGBA 转换器

  即时计算 hexa 转 rgba

• HEXA 转 HSVA 转换器

  即时计算 hexa 转 hsva

• RGBA 转 HEXA 转换器

  即时计算 rgba 转 hexa

• RGBA 转 HSLA 转换器

  即时计算 rgba 转 hsla

• RGBA 转 HSVA 转换器

  即时计算 rgba 转 hsva

• HSLA 转 HEXA 转换器

  即时计算 hsla 转 hexa