HSLA 到 HSVA 转换器

什么是 HSLA

HSLA 是带有 alpha 通道的 HSL 颜色模型。它使用色相、饱和度和亮度来描述颜色，并使用第四个参数来描述透明度。

色相是从 0 到 360 度的颜色轮上的角度。饱和度和亮度是从 0% 到 100% 的百分比。Alpha 是从 0 到 1 的分数，其中 0 是完全透明，1 是完全不透明。

HSLA 在主题和调色板设计中很常见，因为它允许你调整颜色的强度和亮度，而不改变其基本色相，同时保持透明度独立。

什么是 HSVA

HSVA 扩展了带有 alpha 通道的 HSV 模型。它可以概念上写作 hsva(h, s, v, a)，其中色相选择基础颜色，饱和度控制颜色的强度，值控制相对于黑色的亮度，而 alpha 控制透明度。

色相再次从 0 到 360 度。饱和度和值是从 0% 到 100% 的百分比。Alpha 组件使用与 HSLA 相同的 0 到 1 范围。

HSVA 广泛用于颜色选择器和绘图工具，用户通过滑块调整色相、饱和度、值和不透明度，以探索和微调颜色。

HSLA 到 HSVA 转换公式

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

Given:
  h   in [0, 360)
  s_l in [0, 100]  // HSL saturation
  l   in [0, 100]  // lightness
  a   in [0, 1]

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

2) Convert HSLA to RGB (intermediate step):
   s' = s_l_c / 100
   l' = l_c / 100

   c = (1 - |2 * l' - 1|) * s'
   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  = l' - c / 2
   r' = r1 + m
   g' = g1 + m
   b' = b1 + m

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

   // Value:
   v = max

   // Saturation in HSV space:
   if max == 0 then s_v' = 0
   else s_v' = delta / max

   // Hue (reused from HSL, but can be recomputed for safety):
   if delta == 0 then h_hsv = 0
   else if max == r' then h_hsv = 60 * (((g' - b') / delta) mod 6)
   else if max == g' then h_hsv = 60 * (((b' - r') / delta) + 2)
   else if max == b' then h_hsv = 60 * (((r' - g') / delta) + 4)

4) Scale to final units:
   H = h_hsv  // often equal to h_c
   S_v = s_v' * 100
   V   = v * 100

5) Compose HSVA:
   hsva(H, S_v%, V%, a_c)

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

在许多工作流程中，你保持色相角度和 alpha 值不变，仅重新解释饱和度和亮度的表达方式。转换器通过 RGB 确保最终的 HSV 值描述与原始 HSL 值相同的颜色空间中的点。

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

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

从 HSLA 转换到 HSVA 主要是关于改变你描述亮度和强度的方式。两个模型在使用色相和 alpha 时方式相似，但在定义第二和第三轴的方式上有所不同。

hsla(210, 39%, 17%, 0.5)
-> hsl(210, 39%, 17%)
-> rgb(r, g, b)
-> hsv(h, s, v)
-> hsva(h, s, v, a)

以下是 hsla(210, 39%, 17%, 0.5) 的更具体的示例。

• 步骤 1 - 将 HSLA 解释为 RGB 加 alpha

  暂时去掉 alpha 通道，运行 HSL 到 RGB 算法。这会给你三个在 0 到 1 之间的数值通道，编码相同的颜色。

  h = 210, s_l = 39, l = 17
  rgb(26, 43, 60) 四舍五入后

• 步骤 2 - 从 RGB 推导 HSV

  使用最大和最小 RGB 通道计算 HSV 术语中的值和饱和度。可选择从 RGB 重新计算色相以确保数值稳定性。

  max = max(r', g', b')
  min = min(r', g', b')
  delta = max - min
  v = max
  if max == 0 then s_v = 0 else s_v = delta / max

• 步骤 3 - 附加 alpha 并表示为 HSVA

  一旦你有了色相、饱和度和值，重用原始 alpha，并将所有内容一起写为 hsva。

  hsva(210, 57%, 24%, 0.5)

相同的顺序适用于任何 HSLA 颜色，这就是为什么转换器或辅助函数通常是保持基于 HSV 的工具与基于 HSLA 的令牌同步的最简单方法。

选择 HSLA 和 HSVA 之间

HSLA 和 HSVA 共享相同的色相和 alpha 概念，但专注于描述亮度和强度的不同方式。每种模型在你正在处理的内容上可能会更舒适。

何时 HSLA 有帮助

• 设计主题和调色板: 基于亮度的控制使得从单一基础色相构建色调和阴影变得更容易。
• 记录设计决策: HSLA 值清晰地显示饱和度和亮度在不同状态下的变化。
• 对齐明暗模式: 在保持色相稳定的同时调整亮度是跨主题一致性的常见方法。

何时 HSVA 更合适

• 交互式颜色选择器: 色相、饱和度、值和 alpha 滑块对于探索颜色是直观的。
• 程序化效果和渐变: 基于值的控制在绘画和照明场景中有时比基于亮度的控制更自然。
• 已经使用 HSV 的工具: 许多库和编辑器将 HSV 作为其主要控制模型。

总结

在调色板规划和书面规范中使用 HSLA。当你将这些值插入期望 HSV 风格滑块和控制的工具和组件时，将其转换为 HSVA。

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

HSLA 和 HSVA 可以在项目中并存，只要你为每个模型定义明确的角色，并依赖转换器而不是手动编辑。

定义每个模型的位置

• 使用 HSLA 作为令牌和规范：将基础颜色和状态存储为易于阅读和更新的 HSLA 值。
• 在工具和选择器中使用 HSVA：在交互式 UI 和内部编辑器中呈现 HSV 滑块和 alpha 控件。

与其他颜色格式结合

• 在需要时通过 RGB 转换：在 HSLA、HSVA、RGBA 和 HEXA 之间转换通常使用 RGB 作为中间格式，大多数库都支持。
• 限制生成的值：在生成或动画颜色变化时，始终保持色相、饱和度、亮度、值和 alpha 在有效范围内。

保持系统可维护

• 记录格式角色：指定 HSLA、HSVA、RGB 和 HEX 预期的位置，以便未来的更改变得简单明了。
• 使用转换工具：自动化助手保持不同模型之间的调色板同步，减少错误。

通过少量结构，HSLA 和 HSVA 互相增强而不是竞争，使你的颜色系统更容易随着时间的推移而演变。

HSLA 到 HSVA 转换表

下面的表列出了几种熟悉的颜色，分别以 HSLA 和 HSVA 形式显示透明度。数字经过四舍五入，以保持易读性；当你需要精确值时，请使用页面顶部的转换器。

对于任何其他 HSLA 值，你可以使用页面顶部的转换器根据上述算法计算相应的 HSVA 颜色。

常见问题解答：HSLA 到 HSVA

• 为什么要将 HSLA 转换为 HSVA

  一些工具和库是围绕 HSV 滑块构建的，而你的设计令牌可能使用 HSLA。转换使你能够在每个地方使用正确的模型，而不改变最终颜色的外观。

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

  不。两者都是描述相同基于 RGB 的颜色空间的不同方式。区别在于亮度和强度的定义，而不是可用颜色的不同。

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

  在典型的工作流程中，alpha 值是直接从 HSLA 复制到 HSVA 的，因为两种格式都使用相同的 0 到 1 范围表示透明度。

• 我可以将 HSVA 转换回 HSLA 吗

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

• 一种模型总是比另一种更好吗

  不一定。HSLA 在调色板设计和文档中通常更舒适，而 HSVA 通常更适合滑块和交互式控制。在一个项目中使用两者并制定明确的转换规则是很正常的。

相关转换器：

• HEXA 转 HSLA 转换器

  即时计算 hexa 转 hsla

• HEXA 转 HSVA 转换器

  即时计算 hexa 转 hsva

• RGBA 转 HSLA 转换器

  即时计算 rgba 转 hsla

• RGBA 转 HSVA 转换器

  即时计算 rgba 转 hsva

• HSLA 转 HEXA 转换器

  即时计算 hsla 转 hexa

• HSVA 转 HSLA 转换器

  即时计算 hsva 转 hsla