HEXA 到 HSVA 转换器

什么是 HEXA 颜色代码

HEXA 值是一个包含透明度的八位数 HEX 颜色。格式为 #RRGGBBAA，其中 RR、GG 和 BB 控制红色、绿色和蓝色，而 AA 控制 alpha 通道。

每对都是从 00 到 FF 的十六进制数字。颜色对的工作方式与常规的 #RRGGBB 值完全相同。最后一对描述不透明度：00 是完全透明的，FF 是完全不透明的，中间值表示部分透明。

当浏览器解析 HEXA 字符串时，它将每对转换为十进制，然后使用前三个数字作为 RGB 通道，第四个作为 alpha 值。这使得 HEXA 成为以单个令牌存储颜色和不透明度的紧凑方式。

什么是 HSVA

HSVA 是带有额外 alpha 参数的 HSV 颜色模型。它可以概念上写为 hsva(h, s, v, a)，其中色相选择颜色轮上的位置，饱和度和亮度定义强度和亮度，alpha 控制透明度。

色相以 0 到 360 度为单位测量。饱和度和亮度是从 0% 到 100% 的百分比。alpha 组件是从 0 到 1 的数字，其中 0 是完全透明的，1 是完全不透明的。

HSVA 在颜色选择器、绘画工具和将色相、饱和度和亮度视为主要滑块并使用单独控制不透明度的内部 API 中尤其常见。

HEXA 到 HSVA 转换公式

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

1) Split the HEXA string:
   #RRGGBBAA -> RR, GG, BB, AA

2) Convert each pair from hex to decimal:
   R = hex_to_dec(RR)
   G = hex_to_dec(GG)
   B = hex_to_dec(BB)
   A = hex_to_dec(AA)

3) Normalize the alpha channel:
   a = A / 255

4) Convert RGB to HSV:
   r' = R / 255
   g' = G / 255
   b' = B / 255

   max = max(r', g', b')
   min = min(r', g', b')
   delta = max - min

   // Value:
   v = max

   // Saturation:
   if max == 0 then s' = 0
   else s' = delta / max

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

5) Scale to final units:
   H = h
   S = s' * 100
   V = v * 100

6) Compose HSVA:
   hsva(H, S%, V%, a)

Helper:
   hex_to_dec("FF") = 255
   hex_to_dec("00") = 0

算法的第一部分将 HEXA 字符串解包为数字 RGB 通道和原始 alpha 值。然后，它使用标准 RGB 到 HSV 转换来查找色相、饱和度和亮度，而 alpha 通道则简单地缩放到 0 到 1 的范围。

#4FA3C2CC 的示例
1) 对:
   RR = 4F, GG = A3, BB = C2, AA = CC
2) 十进制值:
   R = 79, G = 163, B = 194, A = 204
3) Alpha:
   a = 204 / 255  (约 0.8)
4) 将 (79, 163, 194) 转换为 HSV:
   hsv(196, 59%, 76%)  (四舍五入)
5) 最终 HSVA:
   hsva(196, 59%, 76%, 0.8)

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

从概念上讲，HEXA 到 HSVA 的转换只是一系列小的转换：从十六进制到 RGB，从 RGB 到 HSV，以及将 0 到 255 的 alpha 转换为 0 到 1 的 alpha。

#1A2B3C80
-> [1A, 2B, 3C, 80]
-> rgb(r, g, b) + alpha
-> hsva(h, s, v, a)

以下是 #1A2B3C80 的详细过程。

• 步骤 1 - 解码 HEX 对

  将字符串拆分为四个两个字符的组，并将每个组从基数 16 转换为基数 10。前三个定义 RGB 通道，最后一个定义 alpha。

  RR = 1A -> 26
  GG = 2B -> 43
  BB = 3C -> 60
  AA = 80 -> 128

• 步骤 2 - 将 RGB 转换为 HSV

  将 RGB 规范化到 0 到 1 的范围，找到最大值和最小值，然后使用 HSV 公式计算亮度、饱和度和色相。

  r' = 26 / 255
  g' = 43 / 255
  b' = 60 / 255
  max = max(r', g', b')
  min = min(r', g', b')
  v = max
  if max == 0 then s = 0 else s = delta / max

• 步骤 3 - 规范化 alpha 并构建 HSVA

  将 alpha 值除以 255，并将所有四个组件组合成一个 HSVA 值。

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

相同的方法适用于任何有效的 HEXA 字符串，这就是为什么转换器或助手函数通常是保持调色板一致的最安全方法。

选择 HEXA 和 HSVA

HEXA 和 HSVA 都存储颜色和 alpha，但它们强调不同的视角。HEXA 紧凑且基于 RGB，而 HSVA 则围绕色相、饱和度和亮度滑块构建。

何时使用 HEXA

• 设计令牌和主题配置: 八位数 HEX 字符串易于保存在 JSON、YAML 或环境变量中。
• 从设计工具复制: 许多编辑器以带有 alpha 的 HEX 导出颜色，您可以直接将其存储在令牌集中。
• 静态调色板: HEXA 非常适合相对稳定的品牌和语义颜色。

何时使用 HSVA 更实用

• 交互式选择器和编辑器: 色相、饱和度、亮度和 alpha 滑块对于探索变体非常直观。
• 程序化颜色生成: 通过调整基于 HSV 的参数生成相关颜色通常比直接编辑 RGB 通道更容易。
• 内部工具: HSVA 非常适合向设计师和内容作者呈现颜色控制的内部工具。

总结

当您关心紧凑、可共享的令牌时，请使用 HEXA。当您需要更直观的编辑和探索颜色的控制时，请将这些令牌转换为 HSVA。

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

HEXA 和 HSVA 可以在同一项目中并行工作，只要您为每种格式定义清晰的规则。

将令牌与编辑模型分开

• 使用 HEXA 进行存储: 将品牌和语义颜色作为 HEX 或 HEXA 字符串保存在您的设计系统真相来源中。
• 在工具中使用 HSVA: 在内部编辑器和选择器中呈现 HSV 滑块和 alpha 控制，保存时转换回 HEXA。

与其他颜色格式结合

• 通过 RGB 或 HSL 转换: 在使用标准中间转换时，通常会在 HEXA、HSVA、RGBA 和 HSLA 之间移动。
• 正确限制值: 在生成或动画颜色时，始终保持色相、饱和度、亮度和 alpha 在有效范围内。

保持调色板可预测

• 记录您的约定: 指定 HEXA 存在的位置（令牌）和 HSVA 使用的位置（工具和实用程序），以便其他团队成员可以遵循相同的模式。
• 使用转换器而不是手动计算: 自动化助手使您的颜色在不同表示之间保持同步。

通过少量结构，您可以将 HEXA 和 HSVA 结合在一起，在同一项目中享受紧凑的令牌和直观的编辑控制。

HEXA 到 HSVA 转换表

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

对于任何其他 HEXA 值，您可以使用页面顶部的转换器计算相应的 HSVA 颜色，使用标准算法。

常见问题：HEXA 到 HSVA

• HEXA 与 HEX 有什么不同

  HEX 仅描述 RGB 通道，使用六位数字。HEXA 添加了两个数字用于 alpha，因此您可以在同一紧凑字符串中编码透明度。

• 为什么要将 HEXA 转换为 HSVA

  当您在选择器或内部工具中使用色相、饱和度和亮度滑块时，HSVA 是方便的。从 HEXA 转换为 HSVA 让您可以使用直观的 HSV 控件，同时仍以 HEX 存储令牌。

• 转换会改变视觉颜色吗

  不会。正确转换的 HSVA 值表示与原始 HEXA 字符串相同的颜色和不透明度。只有坐标系统发生变化。

• 我可以从 HSVA 转回 HEXA 吗

  可以。您可以将 HSVA 转换为 RGB 和 alpha，然后将 alpha 缩放回 0 到 255，并将所有四个通道转换为 HEX 对以重建 HEXA 代码。

• 我应该在项目中使用 HSVA 还是 HSLA

  这取决于您如何看待颜色。HSVA 通常更适合选择器和基于强度的控制，而 HSLA 在主题设计和文档中更常见。许多团队使用两者，并有明确的转换规则。

相关转换器：

• HEXA 转 RGBA 转换器

  即时计算 hexa 转 rgba

• HEXA 转 HSLA 转换器

  即时计算 hexa 转 hsla

• RGBA 转 HEXA 转换器

  即时计算 rgba 转 hexa

• RGBA 转 HSLA 转换器

  即时计算 rgba 转 hsla

• RGBA 转 HSVA 转换器

  即时计算 rgba 转 hsva

• HSVA 转 HEXA 转换器

  即时计算 hsva 转 hexa