HSLA 转 RGBA 转换器

什么是 HSLA

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

色相以 0 到 360 度为单位测量。饱和度和亮度以 0% 到 100% 的百分比表示。Alpha 是一个介于 0（完全透明）到 1（完全不透明）之间的数字。

HSLA 适合用于调色板和主题的工作，因为您可以根据其基本色相、强度、明亮或暗淡的外观以及透明度来讨论颜色。

什么是 RGBA

RGBA 是 RGB 模型加上一个 alpha 通道。它的写法为 rgba(r, g, b, a)，其中 r、g 和 b 是介于 0 到 255 之间的整数，而 a 是介于 0 和 1 之间的分数。

三个颜色通道定义了红色、绿色和蓝色光的强度，而 alpha 控制不透明度。此格式在 CSS、HTML 画布和许多图形 API 中被广泛使用。

由于 RGBA 使用原始的数值通道，因此在运行时计算、限制和需要直接访问每个组件的效果时非常方便。

HSLA 转 RGBA 转换公式

hsla(h, s, l, a) -> rgba(r, g, b, a)

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 final RGB:
   r = round(r' * 255)
   g = round(g' * 255)
   b = round(b' * 255)

8) Compose RGBA:
   rgba(r, g, b, a_c)

Helper:
   clamp(x, min, max) = min if x < min, max if x > max, else x

Alpha 值直接从 HSLA 输入中复制，因为两种格式都使用相同的 0 到 1 范围表示透明度。所有工作都发生在 HSL 转 RGB 的转换步骤中，该步骤将色相、饱和度和亮度转换为通道值。

hsla(196, 49%, 54%, 0.8) 的示例
1) 将 s 和 l 归一化到 [0, 1] 并计算 c 和 x
2) 根据色相区段找到临时三元组
3) 将 m 添加到每个通道并缩放到 0-255
4) 四舍五入的 RGB:
   rgb(79, 163, 194)
5) 最终 RGBA:
   rgba(79, 163, 194, 0.8)

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

在底层，HSLA 转 RGBA 转换只是熟悉的 HSL 转 RGB 算法加上 alpha 组件的传递。您改变的是描述颜色的方式，而不是它的外观。

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

这是 hsla(210, 39%, 17%, 0.5) 的更具体的草图。

• 步骤 1 - 归一化饱和度和亮度

  将饱和度和亮度转换为分数并计算色度，色度衡量颜色与相同亮度的灰色的距离。

  s' = 39 / 100
  l' = 17 / 100
  c = (1 - |2 * l' - 1|) * s'

• 步骤 2 - 找到色相区段和临时三元组

  将色相除以 60 以找到颜色轮上的段，并选择一个临时三元组，例如 (c, x, 0) 或 (0, x, c)。这设置了红色、绿色和蓝色之间的关系，然后进行最终转换。

  h = 210
  h / 60 is between 3 and 4
  temporary triple uses (0, x, c)

• 步骤 3 - 添加偏移并复制 alpha

  添加偏移量 m，以使结果具有目标亮度，缩放到 0 到 255，然后附加原始 alpha 值以获得 RGBA。

  rgba(26, 43, 60, 0.5)

相同的过程适用于任何有效的 HSLA 输入，这就是为什么使用转换器或辅助函数通常比尝试从记忆中重新计算更可靠。

选择 HSLA 和 RGBA 之间

HSLA 和 RGBA 都描述颜色和透明度，但它们强调不同的方面。HSLA 更适合规划调色板，而 RGBA 更适合在代码中直接操作。

何时 HSLA 更实用

• 设计主题和调色板: 使用色相、饱和度和亮度使构建相同基础颜色的色调和阴影变得更容易。
• 解释设计选择: 像 hsla(210, 40%, 20%, 0.7) 这样的值清楚地显示了两个相关颜色之间的属性变化。
• 同步明暗模式: 您可以保持色相稳定，并在主题之间变化亮度。

何时 RGBA 更合适

• 组件级样式: rgba() 值在样式表和 CSS-in-JS 中易于直接阅读。
• 运行时效果: 在 JavaScript 中调整数值通道时，淡化颜色或限制 alpha 非常简单。
• 与图形 API 接口: 许多绘图函数期望 RGBA 输入。

总结

在进行调色板设计和文档时使用 HSLA。在您在代码中渲染或动画它们时，将这些值转换为 RGBA。

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

只要您在工作流程中为每种格式定义明确的角色，就可以安全地在同一项目中结合使用 HSLA 和 RGBA。

定义真实来源

• 以单一格式存储标记：许多团队选择 HSLA 或 HEX 作为设计标记，并在接近渲染时转换为 RGBA。
• 避免手动重复：使用工具或构建步骤生成 HSLA 标记的 RGBA 版本。

与其他颜色表示法结合

• 通过 RGB 转换：大多数库支持在 HSL、RGB、HEX 和 HSV 之间移动，使用 RGB 作为桥梁。
• 生成颜色时限制值：在生成或动画新值时，始终保持色相、饱和度、亮度和 alpha 在其有效范围内。

保持系统可维护

• 记录格式使用的位置：例如，HSLA 用于标记和文档，RGBA 用于低级样式代码，HEX 用于导出调色板。
• 使用转换器而不是手动编辑：这可以保持调色板同步，并在重构主题时减少错误。

在这些约定到位后，HSLA 和 RGBA 互为补充，而不是竞争，您的颜色系统在时间上更易于演变。

HSLA 转 RGBA 转换表

下表显示了几种常见颜色在 HSLA 和 RGBA 形式下的透明度。值经过四舍五入以提高可读性，因此请使用页面顶部的转换器进行精确工作。

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

常见问题：HSLA 转 RGBA

• 为什么将 HSLA 转换为 RGBA

  HSLA 适合规划调色板，但 RGBA 通常更适合 CSS 和渲染代码。转换使您能够同时保持对同一颜色的友好视图和实现友好视图。

• 转换会改变颜色吗

  不会。正确转换的 RGBA 值表示与原始 HSLA 值相同的视觉颜色和透明度。

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

  色相以 0 到 360 度为单位测量。饱和度和亮度以 0% 到 100% 的百分比表示。Alpha 是介于 0 和 1 之间的数字。

• 我可以将 RGBA 转换回 HSLA 吗

  可以。您可以将 RGBA 视为 RGB 加上 alpha，将 RGB 转换为 HSL，并重用 alpha 组件以获得 HSLA。

• 我应该标准化使用 HSLA 还是 RGBA

  这取决于您的项目。许多团队使用 HSLA 或 HEX 作为标记，使用 RGBA 进行实现，并使用转换器保持所有内容同步。

相关转换器：

• HEXA 转 RGBA 转换器

  即时计算 hexa 转 rgba

• HEXA 转 HSLA 转换器

  即时计算 hexa 转 hsla

• RGBA 转 HEXA 转换器

  即时计算 rgba 转 hexa

• RGBA 转 HSLA 转换器

  即时计算 rgba 转 hsla

• RGBA 转 HSVA 转换器

  即时计算 rgba 转 hsva

• HSLA 转 HEXA 转换器

  即时计算 hsla 转 hexa