RGBA 到 HSLA 转换器

什么是 RGBA

RGBA 在 RGB 模型中扩展了一个 alpha 通道。它的写法为 rgba(r, g, b, a)，其中 r、g 和 b 是范围在 0 到 255 之间的整数，而 a 是一个范围在 0 到 1 之间的数字。

alpha 值控制透明度：0 是完全透明，1 是完全不透明，而介于两者之间的值产生部分透明度。这使得 RGBA 成为覆盖层、阴影和柔和过渡的良好选择。

由于 RGBA 使用数值通道，因此在 JavaScript 中生成或动画化非常简单，并且可以插入到 canvas 和 WebGL 渲染 API 中。

什么是 HSLA

HSLA 是带有 alpha 通道的 HSL 模型。它的写法为 hsla(h, s, l, a)，其中色相选择轮上的基础颜色，饱和度控制颜色的鲜艳程度，亮度控制颜色的明暗程度，而 alpha 控制透明度。

色相以 0 到 360 度为单位进行测量。饱和度和亮度是从 0% 到 100% 的百分比。Alpha 是一个范围在 0 到 1 之间的数字，和 RGBA 一样。

HSLA 适合于设计调色板和主题，因为你可以独立调整色相、饱和度和亮度，同时仍然可以通过第四个参数管理透明度。

RGBA 到 HSLA 转换公式

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

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) Normalize RGB to [0, 1]:
   r' = r_c / 255
   g' = g_c / 255
   b' = b_c / 255

3) Find max and min:
   max = max(r', g', b')
   min = min(r', g', b')
   delta = max - min

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

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

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

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

8) Compose HSLA:
   hsla(H, S%, L%, a_c)

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

红色、绿色和蓝色值首先被标准化到 0 到 1 的范围内，然后使用标准公式转换为 HSL。Alpha 组件保持不变，因为 RGBA 和 HSLA 都使用相同的 0 到 1 范围表示不透明度。

rgba(79, 163, 194, 0.8) 的示例
1) 限制:
   r_c = 79, g_c = 163, b_c = 194, a_c = 0.8
2) 归一化并计算 H、S 和 L:
   hsl(196, 49%, 54%) (四舍五入)
3) 最终 HSLA:
   hsla(196, 49%, 54%, 0.8)

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

在实践中，从 RGBA 转换到 HSLA 意味着在不同的坐标系统中重新描述相同的颜色，同时保持相同的透明度值。

rgba(26, 43, 60, 0.5)
-> rgb(r, g, b)
-> hsl(h, s, l)
-> hsla(h, s, l, a)

以下是 rgba(26, 43, 60, 0.5) 的过程更详细的草图。

• 步骤 1 - 规范化 RGB 通道

  将红色、绿色和蓝色值转换为分数，并找到它们之间的最大值和最小值。这些值是亮度和饱和度的基础。

  r' = 26 / 255
  g' = 43 / 255
  b' = 60 / 255

• 步骤 2 - 计算亮度和饱和度

  亮度是最亮和最暗通道的平均值。它们之间的差距定义了颜色与灰色的距离，并用于计算饱和度。

  max = max(r', g', b')
  min = min(r', g', b')
  l = (max + min) / 2
  if delta == 0 then s = 0 else s = delta / (1 - |2 * l - 1|)

• 步骤 3 - 推导色相并保持 alpha

  色相取决于哪个通道最大以及其他通道与其的比较。Alpha 组件直接从原始 RGBA 值复制。

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

一旦你理解了这个模式，就很容易将 RGBA 视为你的运行时格式，而将 HSLA 视为文档和调色板设计的更具描述性的表示。

选择 RGBA 和 HSLA 之间的区别

RGBA 和 HSLA 都表示颜色加透明度，但它们强调不同的方面。RGBA 侧重于数值通道，而 HSLA 侧重于色相、饱和度和亮度。

何时 RGBA 是合适的选择

• 实现和渲染: RGBA 值易于插入到 canvas API、WebGL 和低级渲染代码中。
• 动态效果: 在 JavaScript 中调整数值通道或 alpha 使用 RGBA 是直接的。
• 与图像格式的互操作性: 许多文件格式和管道在内部使用 RGBA 通道数据。

何时 HSLA 更实用

• 调色板和主题设计: 处理色相、饱和度和亮度使得更容易理解色调、阴影和强调色。
• 设计文档: HSLA 值在规格和指南中通常更易于阅读和比较。
• 传达意图: 将颜色描述为 "饱和度较低且亮度较高的蓝色" 直接映射到 HSLA 参数。

总结

在接近渲染或需要代码中的数值控制时使用 RGBA。在设计颜色系统、调整调色板或记录视觉决策时更喜欢 HSLA。

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

你不必为整个项目选择一种格式。遵循一些简单的规则，RGBA 和 HSLA 可以干净地协同工作。

将令牌与实现分开

• 在令牌和文档中使用 HSLA: 以色相、饱和度和亮度的形式存储和解释调色板选择。
• 在绘制时使用 RGBA: 在编写样式或渲染到画布时，将 HSLA 转换为 RGBA。

与其他颜色模型结合

• 通过 RGB 转换: 在 RGBA、HSLA、HEX 和 HSV 之间移动通常使用 RGB 作为桥梁，这在大多数库中得到了很好的支持。
• 保持范围有效: 在生成或动画化颜色时，始终将色相、饱和度、亮度和 alpha 限制在它们的预期范围内。

保持系统可预测

• 记录每种格式的位置: 例如，RGBA 在渲染代码中，HSLA 在设计规格中，HEX 用于令牌。
• 使用转换器而不是手动编辑: 这可以保持颜色在不同格式之间的一致性，并减少错误。

通过明确 RGBA 和 HSLA 的职责，你的颜色系统保持灵活，同时也易于维护和扩展。

RGBA 到 HSLA 转换表

下表列出了几种常见颜色，透明度以 RGBA 和 HSLA 形式表示。值已四舍五入以提高可读性，因此在需要精确数字时，请使用页面顶部的转换器。

对于任何其他 RGBA 组合，你可以使用页面顶部的转换器计算上述算法所描述的确切 HSLA 值。

常见问题：RGBA 到 HSLA

• 为什么要将 RGBA 转换为 HSLA

  RGBA 方便实现，但 HSLA 更容易描述和调整颜色系统。转换使你可以在代码中保持数值控制，同时以更人性化的格式记录调色板。

• RGBA 和 HSLA 描述不同的颜色吗

  不。两个模型覆盖相同的基于 RGB 的颜色空间。正确转换的 HSLA 值表示与原始 RGBA 值相同的颜色和不透明度。

• 转换时 alpha 值会改变吗

  在大多数工作流程中，alpha 值直接从 RGBA 复制到 HSLA。两个格式都使用相同的 0 到 1 范围表示不透明度。

• 我可以从 HSLA 转回 RGBA 吗

  可以。你可以将 HSLA 转换为 RGB 并重用 alpha 值，这样就得到了相同颜色的 RGBA 表示。

• 我应该将令牌存储为 RGBA 还是 HSLA

  这取决于你如何看待颜色。HSLA 通常对调色板和主题更直观，而 RGBA 对于低级代码可能更方便。许多团队选择一种作为令牌格式，并在需要时转换为另一种。

相关转换器：

• HEXA 转 RGBA 转换器

  即时计算 hexa 转 rgba

• HEXA 转 HSLA 转换器

  即时计算 hexa 转 hsla

• HEXA 转 HSVA 转换器

  即时计算 hexa 转 hsva

• RGBA 转 HEXA 转换器

  即时计算 rgba 转 hexa

• RGBA 转 HSVA 转换器

  即时计算 rgba 转 hsva

• HSLA 转 RGBA 转换器

  即时计算 hsla 转 rgba