HSLA 转 HEXA 转换器

什么是 HSLA

HSLA 是带有 alpha 通道的 HSL 模型。它的写法为 hsla(h, s, l, a)，其中 h 是以度为单位的色相，s 是饱和度，l 是亮度，a 是不透明度。

色相范围从 0 到 360 度。饱和度和亮度是从 0% 到 100% 的百分比。Alpha 是从 0（完全透明）到 1（完全不透明）的分数。

HSLA 适合设计调色板和主题，因为您可以以接近设计师谈论颜色的方式单独调整色相、饱和度、亮度和 alpha。

什么是 HEXA 颜色代码

HEXA 代码是一个包含透明度的八位数字 HEX 颜色。格式为 #RRGGBBAA，其中每对字符代表红色、绿色、蓝色或 alpha。

每对是从 00 到 FF 的十六进制数。前三对的工作方式与常规 HEX 颜色完全相同，而最后一对编码 alpha 通道：00 表示完全透明，FF 表示完全不透明。

浏览器和图形工具读取每对，将其转换为十进制，并将结果视为 RGBA 通道值。因此，HEXA 是 RGBA 数据的紧凑文本包装。

HSLA 转 HEXA 转换公式

hsla(h, s, l, a) -> #RRGGBBAA

Given:
  h in [0, 360)
  s in [0, 100]
  l in [0, 100]
  a in [0, 1]

1) Clamp inputs:
   h_c = h
   s_c = clamp(s, 0, 100)
   l_c = clamp(l, 0, 100)
   a_c = clamp(a, 0, 1)

2) Normalize saturation and lightness:
   s' = s_c / 100
   l' = l_c / 100

3) Compute chroma:
   c = (1 - |2 * l' - 1|) * s'

4) Helper value:
   x = c * (1 - |((h_c / 60) mod 2) - 1|)

5) Temporary rgb triple in [0, c]:
   if      0 <= h_c < 60   then (r1, g1, b1) = (c, x, 0)
   else if 60 <= h_c < 120 then (r1, g1, b1) = (x, c, 0)
   else if 120 <= h_c < 180 then (r1, g1, b1) = (0, c, x)
   else if 180 <= h_c < 240 then (r1, g1, b1) = (0, x, c)
   else if 240 <= h_c < 300 then (r1, g1, b1) = (x, 0, c)
   else                      (r1, g1, b1) = (c, 0, x)

6) Add the lightness offset:
   m  = l' - c / 2
   r' = r1 + m
   g' = g1 + m
   b' = b1 + m

7) Scale to integer RGB:
   r = round(r' * 255)
   g = round(g' * 255)
   b = round(b' * 255)

8) Convert channels to HEX:
   RR = dec_to_hex(clamp(r, 0, 255))
   GG = dec_to_hex(clamp(g, 0, 255))
   BB = dec_to_hex(clamp(b, 0, 255))

9) Convert alpha to HEX:
   A_dec = round(a_c * 255)
   AA    = dec_to_hex(clamp(A_dec, 0, 255))

10) 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

换句话说，转换器首先将 HSLA 转换为 RGBA 颜色，然后将每个通道重写为两位十六进制片段。Alpha 分数在转换为最终 AA 对之前被缩放到 0 到 255 的范围。

hsla(196, 49%, 54%, 0.8) 的示例
1) 将 HSLA 转换为 RGB:
   hsl(196, 49%, 54%) -> rgb(79, 163, 194) (四舍五入)
2) 将 RGB 通道转换为 HEX:
   79  -> 4F
   163 -> A3
   194 -> C2
3) 转换 alpha:
   A_dec = round(0.8 * 255) = 204
   204   -> CC
4) 最终 HEXA:
   #4FA3C2CC

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

HSLA 转 HEXA 转换始终经过相同颜色的 RGB 视图。您首先将色相、饱和度和亮度表示为数字通道，然后以十六进制形式写出这些通道和 alpha。

hsla(210, 39%, 17%, 0.5)
-> hsl(210, 39%, 17%)
-> rgb(r, g, b)
-> #RRGGBBAA

以下是 hsla(210, 39%, 17%, 0.5) 的简化示例。

• 步骤 1 - 从 HSLA 导出 RGB

  暂时忽略 alpha，运行 HSL 到 RGB 算法：计算色度，找到色相区间，构建临时三元组，并添加偏移量以匹配目标亮度。

  s' = 39 / 100
  l' = 17 / 100
  c = (1 - |2 * l' - 1|) * s'
  ... -> rgb(26, 43, 60) (rounded)

• 步骤 2 - 将 RGB 通道转换为 HEX

  将每个通道转换为两位十六进制值，必要时用前导零填充，以便最终字符串始终具有六个颜色数字。

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

• 步骤 3 - 编码 alpha 并连接所有内容

  将 alpha 分数乘以 255，将结果转换为 HEX，并用前导 # 连接所有四对。

  #1A2B3C80

相同的模式适用于任何有效的 HSLA 颜色，这就是为什么依赖转换器或实用程序函数是实用的，而不是每次手动重新执行这些步骤。

选择 HSLA 和 HEXA 之间

HSLA 和 HEXA 都编码颜色和透明度，但它们的用途不同。HSLA 是描述性的和滑块友好的，而 HEXA 是紧凑的和标记友好的。

当 HSLA 更合适时

• 调色板和主题探索: 色相、饱和度和亮度让您以结构化的方式在颜色空间中移动。
• 设计文档: HSLA 值清晰地显示相关颜色在饱和度或亮度上的差异。
• 传达意图: 谈论 "增加亮度" 或 "减少饱和度" 直接映射到 HSLA 参数。

当 HEXA 更实用时

• 设计标记和配置: 短字符串如 #4FA3C2CC 易于存储和共享。
• 工具之间的互操作性: 许多设计工具和平台使用 HEX 或 HEXA 作为默认导出格式。
• 静态调色板: 当您维护长列表的品牌和语义颜色时，HEXA 代码效果很好。

总结

在计划、调整和讨论颜色时使用 HSLA。当您准备将这些值冻结为代码和配置的紧凑标记时，将其转换为 HEXA。

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

在设计上下文中使用 HSLA 和在实现中使用 HEXA 是很常见的。几个简单的规则使这种混合易于管理。

选择主要标记格式

• 使用一种格式作为真相来源：许多团队选择 HEXA 作为标记或 HSLA 作为调色板，然后自动生成另一种格式。
• 避免手动重复：将转换保留在脚本或实用程序中，以便您不必在多个地方更新值。

与其他模型结合

• 在需要时通过 RGB 转换：在 HSLA、HEXA、RGBA 和 HSV 之间移动通常使用 RGB 作为底层，大多数库已经支持。
• 限制生成的值：当您计算新颜色时，始终将色相、饱和度、亮度和 alpha 限制在其有效范围内。

保持系统可预测

• 记录格式角色：例如，HSLA 用于调色板规格，HEXA 用于已发布的标记，RGBA 用于低级代码。
• 使用转换器而不是临时编辑：这可以保持所有格式的颜色在一段时间内一致。

通过明确的责任和自动化转换，HSLA 和 HEXA 互为补充，使您的颜色系统灵活且易于维护。

HSLA 转 HEXA 转换表

下表显示了几种常见的 HSLA 颜色及其透明度和 HEXA 对应值。这些值经过四舍五入以提高可读性；对于精确工作，请使用页面顶部的转换器。

对于任何其他 HSLA 颜色，您可以使用页面顶部的转换器计算使用标准算法的确切 HEXA 字符串。

常见问题：HSLA 转 HEXA

• 为什么将 HSLA 转换为 HEXA

  HSLA 易于调整和讨论，但 HEXA 紧凑且作为标记格式得到广泛支持。转换使您能够保持设计友好的值，同时发布短小、稳定的代码。

• 转换会改变实际颜色吗

  不会。正确计算的 HEXA 值表示与原始 HSLA 值相同的颜色和透明度，数值通道的四舍五入除外。

• HSLA 中 H、S、L 和 A 使用什么范围

  色相为 0 到 360 度，饱和度和亮度为 0 到 100 百分比，alpha 为 0 到 1 的分数。

• 我可以将 HEXA 转换回 HSLA 吗

  可以。您可以将 HEXA 解码为 RGBA，将 RGB 转换为 HSL，并重用 alpha 值以再次获得 HSLA。

• 标记应该存储为 HSLA 还是 HEXA

  这取决于您的工作流程。如果您经常调整调色板，HSLA 作为标记格式可能会很方便。如果您更喜欢紧凑的字符串和跨工具兼容性，HEXA 是一个不错的选择。许多团队存储一种格式并自动生成另一种格式。

相关转换器：

• HEXA 转 RGBA 转换器

  即时计算 hexa 转 rgba

• HEXA 转 HSLA 转换器

  即时计算 hexa 转 hsla

• HEXA 转 HSVA 转换器

  即时计算 hexa 转 hsva

• RGBA 转 HSLA 转换器

  即时计算 rgba 转 hsla

• HSLA 转 RGBA 转换器

  即时计算 hsla 转 rgba

• HSLA 转 HSVA 转换器

  即时计算 hsla 转 hsva