HSVA 转 HEXA 转换器

什么是 HSVA

HSVA 是带有 alpha 通道的 HSV 模型。它可以写成 hsva(h, s, v, a)，其中 h 是以度为单位的色相，s 是以百分比表示的饱和度，v 是以百分比表示的亮度，a 是不透明度。

色相范围从 0 到 360，饱和度和亮度在 0% 到 100% 范围内，而 alpha 是从 0（完全透明）到 1（完全不透明）的分数。

HSVA 在颜色编辑器和选择器中很受欢迎，因为色相、饱和度、亮度和透明度以简单的滑块形式呈现，当您探索和调整颜色时感觉自然。

什么是 HEXA 颜色代码

一个 HEXA 值是一个八位数的 HEX 颜色，带有额外的 alpha 对。一般形式是 #RRGGBBAA，其中 RR、GG、BB 和 AA 描述红色、绿色、蓝色和 alpha 通道。

每一对都是从 00 到 FF 的十六进制数字。前三对的行为类似于普通的 #RRGGBB 代码，而最后一对设置不透明度：00 表示完全透明，FF 表示完全不透明，中间有步骤。

当浏览器读取 HEXA 字符串时，它将每一对转换为十进制，然后将结果视为 RGBA 通道。这使得 HEXA 成为一种紧凑的透明颜色格式，适合用于令牌和配置中。

HSVA 转 HEXA 转换公式

hsva(h, s, v, a) -> #RRGGBBAA

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

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

2) Normalize saturation and value:
   s' = s_c / 100
   v' = v_c / 100

3) Compute chroma:
   c = v' * 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 value based offset:
   m  = v' - c
   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

在实践中，转换器首先从 HSVA 重建 RGB 颜色，然后将所有四个通道重写为两位数的 HEX 对。alpha 分数乘以 255，四舍五入，并转换为最终的 AA 对。

hsva(196, 59%, 76%, 0.8) 的示例
1) 将 HSVA 转换为 RGB:
   hsv(196, 59%, 76%) -> 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

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

HSVA 转 HEXA 转换始终遵循相同的路径：将颜色表示为 RGB，将数字转换为十六进制对，并将 alpha 作为最后一对中表示的单独通道。

hsva(210, 57%, 24%, 0.5)
-> hsv(210, 57%, 24%)
-> rgb(r, g, b)
-> #RRGGBBAA

下面是 hsva(210, 57%, 24%, 0.5) 的简要示意图。

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

  将百分比输入转换为分数并计算色度，这告诉您所选亮度下颜色与中性灰色的距离。

  s' = 57 / 100
  v' = 24 / 100
  c = v' * s'

• 步骤 2 - 选择色相区段和临时三元组

  将色相除以 60 以找到颜色轮上的区段，然后选择一个临时三元组，例如 (c, x, 0) 或 (0, x, c)。这设置了红色、绿色和蓝色的相对份额，然后再添加最终的偏移量。

  h = 210
  h / 60 is between 3 and 4
  temporary triple uses (0, x, c)
  ... -> rgb(26, 43, 60) (rounded)

• 步骤 3 - 添加偏移量、缩放并附加 alpha

  添加偏移量 m，使最亮的通道与请求的值匹配，将通道缩放到 0 到 255 的范围，将它们转换为 HEX 对，并在最终的 AA 对中编码相同的 alpha。

  #1A2B3C80

这些步骤适用于任何有效的 HSVA 颜色，这就是为什么转换器或助手函数是一个不错的选择，而不是对每个新值手动重复该序列。

选择 HSVA 和 HEXA 之间的区别

HSVA 和 HEXA 都描述了带有透明度的颜色，但它们的方式不同。HSVA 侧重于色相和直观的滑块，而 HEXA 则紧凑且基于 RGB 数字。

何时 HSVA 更合适

• 交互式编辑器和控件: 色相、饱和度、亮度和 alpha 滑块在您探索和微调颜色时感觉自然。
• 程序化颜色集: 通过改变饱和度和亮度来创建更亮、更暗或更生动的变体，同时保持色相稳定，这非常方便。
• 设计导向工具: HSVA 符合人们通常描述颜色的亮度和强度。

何时 HEXA 更实用

• 设计令牌和主题文件: 短 #RRGGBBAA 字符串易于存储在 JSON、配置格式和文档中。
• 与设计导出互操作: 许多编辑器可以直接输出带有 alpha 的 HEX 代码，您可以将其作为唯一的真实来源。
• 静态调色板: 当您收集品牌和语义颜色的长列表时，HEXA 表现良好。

总结

在需要手动调整颜色的地方使用 HSVA，在需要紧凑、可共享的存储和重用令牌时转换为 HEXA。

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

在同一个项目中同时依赖 HSVA 和 HEXA 是很常见的，只要您决定用于编辑的格式和用于存储的格式。

分开编辑和存储角色

• 在工具和选择器中使用 HSVA：内部 UI 可以让用户移动色相、饱和度、亮度和 alpha 滑块，然后在保存时转换结果。
• 在令牌中使用 HEXA：将品牌、语义和主题颜色存储为 #RRGGBBAA 字符串，作为您的设计系统的真实来源。

与其他颜色模型结合

• 通过 RGB 转换：在 HSVA、HEXA、RGBA 和 HSLA 之间移动通常经过 RGB 数学，大多数库已经支持。
• 小心限制值：在生成或动画颜色时，保持色相、饱和度、亮度和 alpha 在有效范围内。

保持系统可预测

• 记录格式的位置：描述 HSVA 使用的位置（工具）和 HEXA 存储的位置（令牌），以便未来的更改保持一致。
• 使用转换器而不是手动编辑：助手和脚本减少复制粘贴错误，并保持所有表示同步。

通过明确区分交互模型和存储格式，HSVA 和 HEXA 可以在同一代码库中互补而不产生摩擦。

HSVA 转 HEXA 转换表

下表列出了几种熟悉的带透明度的 HSVA 颜色及其 HEXA 版本。为了清晰起见，值进行了四舍五入，因此在需要精确数字时，请使用页面顶部的转换器。

对于任何其他 HSVA 组合，您可以使用上面的转换器计算相同标准算法的确切 HEXA 字符串。

常见问题：HSVA 转 HEXA

• 为什么要将 HSVA 转换为 HEXA

  HSVA 非常适合使用滑块编辑颜色，但许多样式指南和令牌集更喜欢短的基于 HEX 的字符串。转换使您可以在存储颜色为 HEXA 的同时保持交互控件为 HSVA。

• 转换会改变颜色的外观吗

  不会。正确计算的 HEXA 代码表示与原始 HSVA 值相同的颜色和透明度，除了数字通道上的小四舍五入。

• HSVA 中 H、S、V 和 A 使用什么范围

  色相以度为单位，范围从 0 到 360，饱和度和亮度为 0% 到 100% 的百分比，而 alpha 是从 0 到 1 的数字。

• 我可以将 HEXA 转换回 HSVA 吗

  可以。您可以解码 HEX 对到 RGB 和 alpha，进行 RGB 到 HSV 的转换，并重用 alpha 组件来重建 HSVA。

• 令牌应该存储为 HSVA 还是 HEXA

  这取决于您的工作流程。一些团队在主题规范中保留 HSVA 值并生成 HEXA 代码，其他团队将 HEXA 存储为真实来源，仅在工具中显示 HSVA。关键是选择一种主要格式并自动转换为另一种格式。

相关转换器：

• HEXA 转 RGBA 转换器

  即时计算 hexa 转 rgba

• HEXA 转 HSLA 转换器

  即时计算 hexa 转 hsla

• HEXA 转 HSVA 转换器

  即时计算 hexa 转 hsva

• RGBA 转 HSVA 转换器

  即时计算 rgba 转 hsva

• HSVA 转 RGBA 转换器

  即时计算 hsva 转 rgba

• HSVA 转 HSLA 转换器

  即时计算 hsva 转 hsla