HSVA 转 HSLA 转换器

什么是 HSVA

HSVA 是带有 alpha 通道的 HSV 模型。从概念上讲，它可以写成 hsva(h, s, v, a)，其中色相选择基本颜色，饱和度控制强度，值定义亮度，alpha 控制透明度。

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

HSVA 通常用于颜色选择器和绘图工具，用户通过滑块调整色相、饱和度、值和透明度，而不是考虑原始 RGB 通道。

什么是 HSLA

HSLA 是带有 alpha 组件的 HSL 模型。它写作 hsla(h, s, l, a)，其中 h 是色相，s 是饱和度，l 是亮度，a 是不透明度。

色相同样从 0 到 360 度。饱和度和亮度使用 0%–100% 范围。Alpha 参数的范围与 HSVA 中的相同，都是 0–1。

HSLA 便于描述调色板和主题，因为您可以根据色相的强度和亮度或暗度进行推理，而透明度则单独控制。

HSVA 转 HSLA 转换公式

hsva(h, s_v, v, a) -> hsla(h, s_l, l, a)

Given:
  h   in [0, 360)
  s_v in [0, 100]  // HSV saturation
  v   in [0, 100]  // value
  a   in [0, 1]

1) Clamp inputs:
   h_c   = h
   s_v_c = clamp(s_v, 0, 100)
   v_c   = clamp(v,   0, 100)
   a_c   = clamp(a,   0, 1)

2) Convert HSVA to RGB (intermediate step):
   s_v' = s_v_c / 100
   v'   = v_c   / 100

   c = v' * s_v'
   x = c * (1 - |((h_c / 60) mod 2) - 1|)

   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)

   m  = v' - c
   r' = r1 + m
   g' = g1 + m
   b' = b1 + m

3) Convert RGB to HSL:
   max = max(r', g', b')
   min = min(r', g', b')
   delta = max - min

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

   // Saturation in HSL space:
   if delta == 0 then s_l' = 0
   else s_l' = delta / (1 - |2 * l' - 1|)

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

4) Scale to final units:
   H   = h_hsl  // often equal to h_c
   S_l = s_l' * 100
   L   = l'    * 100

5) Compose HSLA:
   hsla(H, S_l%, L%, a_c)

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

换句话说，转换器首先将 HSVA 解释为带有 alpha 的 RGB 颜色，然后使用 HSL 坐标重写同一点的颜色空间，同时 alpha 值直接复制。

hsva(196, 59%, 76%, 0.8) 的示例
1) 将 HSV 转换为 RGB:
   hsv(196, 59%, 76%) -> rgb(79, 163, 194) (四舍五入)
2) 将 RGB(79, 163, 194) 转换为 HSL:
   hsl(196, 49%, 54%) (四舍五入)
3) 保持 alpha:
   hsla(196, 49%, 54%, 0.8)

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

HSVA 转 HSLA 转换的逻辑是改变亮度和强度的描述方式，同时保留基础 RGB 颜色和透明度。

hsva(210, 57%, 24%, 0.5)
-> hsv(210, 57%, 24%)
-> rgb(r, g, b)
-> hsl(h, s, l)
-> hsla(h, s, l, 0.5)

以下是 hsva(210, 57%, 24%, 0.5) 的简要草图。

• 步骤 1 - 从 HSVA 转到 RGB

  规范化饱和度和亮度，计算色度，选择色相区间，并添加偏移量，以使最亮通道与请求的值匹配。

  s_v' = 57 / 100
  v' = 24 / 100
  c = v' * s_v'
  ... -> rgb(26, 43, 60) (rounded)

• 步骤 2 - 从 RGB 推导 HSL

  使用最大和最小 RGB 通道计算亮度和 HSL 风格的饱和度，选择性地从 RGB 三元组重新计算色相。

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

• 步骤 3 - 附加原始 alpha

  将新的 HSL 值与相同的 alpha 比例结合，并将结果写为 HSLA。

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

这种方法适用于任何有效的 HSVA 输入，这就是为什么小型辅助或转换函数通常是保持 HSLA 基于标记与 HSVA 基于工具同步的最实用方法。

选择 HSVA 和 HSLA

HSVA 和 HSLA 描述相同的颜色集，但使用不同的坐标。一个围绕值，另一个围绕亮度，二者共享色相和 alpha。

HSVA 适用的情况

• 交互式控件: 色相、饱和度、值和不透明度的滑块直观地探索基本颜色的变化。
• 关注相对于黑色的亮度的工具: 在渲染和照明上下文中，值通常更容易推理。
• 现有的基于 HSV 的 API: 许多库和编辑器使用 HSV 作为其主要控制模型。

HSLA 更舒适的情况

• 调色板和主题设计: 基于亮度的思维使从一个色相构建色调和阴影变得简单。
• 设计文档: HSLA 值清晰地显示了相关角色和状态之间的饱和度和亮度的差异。
• 对齐亮和暗的变体: 保持色相稳定并调整亮度是多主题系统的常见模式。

总结

在滑块和即时预览最重要的地方使用 HSVA，在记录颜色时转换为 HSLA，如规格、调色板和书面指导。

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

只要您定义在编辑中使用哪个模型以及在文档或标记中使用哪个模型，这两种模型就可以共存于同一个项目中。

定义明确的角色

• 在编辑工具中使用 HSVA：在内部选择器和检查器中提供带有 alpha 滑块的 HSV 风格控件。
• 在规格和标记中使用 HSLA：将规范调色板值存储为易于扫描和比较的 HSLA 字符串。

与其他颜色格式结合

• 在需要时通过 RGB 转换：标准助手使在 HSVA、HSLA、RGBA 和 HEX 基于格式之间移动变得简单。
• 限制生成值：在生成或动画颜色时，保持色相、饱和度、值、亮度和 alpha 在其有效范围内。

保持系统可理解

• 记录每个模型出现的位置：解释 HSVA 期望出现在何处（工具）以及 HSLA 用于何处（调色板和标记）。
• 依赖转换器，而不是手动更改：小脚本或工具减少错误并保持所有表示随时间同步。

通过这些约定，HSVA 和 HSLA 互相增强而不是竞争，您的颜色系统更容易维护。

HSVA 转 HSLA 转换表

下表列出了几种常见的 HSVA 颜色及其透明度和 HSLA 等效值。为了可读性，值已四舍五入；要获取精确数字，请使用页面顶部的转换器。

对于任何其他 HSVA 值，您可以使用上面的转换器计算相应的 HSLA 颜色，使用相同的算法。

常见问题解答：HSVA 转 HSLA

• 为什么要将 HSVA 转换为 HSLA

  HSVA 适用于基于滑块的工具，而 HSLA 在设计规格和调色板定义中通常更易读。转换使您可以在每个地方使用更自然的模型。

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

  不。两种模型描述相同的基于 RGB 的颜色空间。它们仅在亮度和强度的表达方式上有所不同。

• 转换过程中 alpha 值会改变吗

  在典型工作流程中，alpha 组件直接复制，因为 HSVA 和 HSLA 都将透明度视为从 0 到 1 的分数。

• 我可以将 HSLA 转换回 HSVA 吗

  可以。您可以将 HSLA 转换为 RGB，然后将 RGB 转换为 HSV，并重用 alpha 值以再次获得 HSVA。

• 我应该将标记存储为 HSVA 还是 HSLA

  这取决于您的工作流程。许多团队将 HSLA 值作为人类友好的真实来源，并为需要滑块的工具生成 HSVA，而其他团队则反之亦然。重要的是选择一个主要格式，并自动转换为另一个格式。

相关转换器：

• HEXA 转 HSLA 转换器

  即时计算 hexa 转 hsla

• HEXA 转 HSVA 转换器

  即时计算 hexa 转 hsva

• RGBA 转 HSLA 转换器

  即时计算 rgba 转 hsla

• RGBA 转 HSVA 转换器

  即时计算 rgba 转 hsva

• HSLA 转 HSVA 转换器

  即时计算 hsla 转 hsva

• HSVA 转 HEXA 转换器

  即时计算 hsva 转 hexa