HSV 转 HEX 转换器

什么是 HSV

HSV 代表 色相、饱和度 和 明度。它通过色轮上的色相角度、色相的强度以及与黑色相比颜色的亮度来表示颜色。

色相以 0 到 360 度表示。饱和度和明度是从 0% 到 100% 的百分比。当饱和度较低时，颜色看起来较为柔和，接近灰色。当明度较低时，颜色变得更暗，接近黑色。

这种布局使得 HSV 成为颜色选择器和数字绘画软件中的热门选择。它让人们能够根据颜色的强度和亮度进行讨论，而不是考虑三个独立的 RGB 通道。

什么是 HEX 颜色代码

HEX 颜色是一种使用十六进制数字系统写 RGB 颜色的紧凑方式。标准形式为 #RRGGBB，其中每对字符表示红色、绿色和蓝色通道。

每对的范围从 00 到 FF。接近 00 的值表示该通道贡献很少，而接近 FF 的值表示该通道的强度达到最大。例如，#000000 是黑色，#FFFFFF 是白色，#FFA500 是明亮的橙色。

浏览器和工具解析 HEX 字符串，将其拆分为三个对，将每对转换为十进制数字，然后将结果作为 RGB 进行处理。因此，HEX 只是 RGB 的一种简短且可读的包装，适合用于 CSS 和设计令牌。

HSV 转 HEX 转换公式

hsv(h, s, v) -> #RRGGBB

给定：
  h 在 [0, 360) 范围内
  s 在 [0, 100] 范围内
  v 在 [0, 100] 范围内

1) 将 HSV 转换为 RGB（中间步骤）：
   a) 归一化饱和度和数值：
      s' = s / 100
      v' = v / 100
   b) 计算色度：
      c = v' * s'
   c) 辅助值：
      x = c * (1 - |((h / 60) mod 2) - 1|)
   d) 基于色相区段的临时三元组：
      如果    0 <= h < 60   则 (r1, g1, b1) = (c, x, 0)
      否则如果 60 <= h < 120 则 (r1, g1, b1) = (x, c, 0)
      否则如果 120 <= h < 180 则 (r1, g1, b1) = (0, c, x)
      否则如果 180 <= h < 240 则 (r1, g1, b1) = (0, x, c)
      否则如果 240 <= h < 300 则 (r1, g1, b1) = (x, 0, c)
      否则                        (r1, g1, b1) = (c, 0, x)
   e) 添加偏移：
      m  = v' - c
      r' = r1 + m
      g' = g1 + m
      b' = b1 + m
   f) 缩放到 0-255：
      r = round(r' * 255)
      g = round(g' * 255)
      b = round(b' * 255)

2) 将 RGB 转换为 HEX：
   RR = dec_to_hex(r)
   GG = dec_to_hex(g)
   BB = dec_to_hex(b)

   dec_to_hex(x) = to_hex(x).padStart(2, "0")

3) 连接部分：
   #RRGGBB

在实践中，转换器首先构建 HSV 颜色的 RGB 表示，然后将每个通道重写为两位十六进制字符串。视觉颜色保持不变；只有文本格式从 HSV 更改为 HEX。

hsv(196, 59%, 76%) 的示例
1) 使用上述规则将 HSV 转换为 RGB
2) 假设四舍五入后的 RGB 结果为：
   rgb(79, 163, 194)
3) 将每个通道转换为 HEX：
   79  -> 4F
   163 -> A3
   194 -> C2
4) 最终 HEX：
   #4FA3C2

HSV 转 HEX 转换的逐步工作原理

尽管 HSV 转 HEX 算法乍一看似乎很长，但它始终遵循相同的模式。您将 HSV 解释为 RGB 颜色，然后将该 RGB 颜色写成 HEX 表示。

hsv(210, 57%, 24%)
-> rgb(r, g, b)
-> #RRGGBB

以下是 hsv(210, 57%, 24%) 的简化步骤。

• 步骤 1 - 将 HSV 转换为 RGB

  标准化饱和度和明度，计算色度和辅助值，根据色相区选择临时三元组，然后添加偏移量并缩放到 0 到 255 的范围。

  s' = 57 / 100
  v' = 24 / 100
  rgb(26, 43, 60) 四舍五入后

• 步骤 2 - 将 RGB 通道转换为 HEX

  将每个 RGB 通道转换为十六进制，并在需要时填充前导零。这确保最终的 HEX 代码在哈希符号后始终有六位数字。

  26 -> 1A
  43 -> 2B
  60 -> 3C

• 步骤 3 - 将各部分连接成一个 HEX 字符串

  将三个对连接在一起，并在前面加上 #。结果是原始 HSV 颜色的 HEX 表示。

  #1A2B3C

相同的流程适用于任何有效的 HSV 输入，因此转换器或工具函数通常比尝试从记忆中重新计算更可靠。

选择 HSV 和 HEX

HSV 和 HEX 解决不同的问题。HSV 适合交互式编辑和探索，而 HEX 则紧凑且稳定，适合存储和共享。

何时使用 HSV 更为实用

• 颜色选择器和滑块: 色相、饱和度和明度可以通过简单的控件轻松调整。
• 探索变化: 明度或饱和度的小变化可以迅速产生基础颜色的更亮、更暗或更生动的版本。
• 艺术家友好的控件: 许多绘画工具和 3D 应用程序出于这个原因以 HSV 形式呈现颜色。

何时使用 HEX 更合适

• 设计令牌和调色板: 短 HEX 字符串作为品牌和中性色的最终值效果很好。
• 在工具之间复制: 大多数编辑器和浏览器以 HEX 显示颜色，因此您可以在不需要额外转换步骤的情况下复制和粘贴值。
• 可读的配置: HEX 代码在 JSON、CSS 和文档表中易于对齐。

总结

在您实验和调整颜色时使用 HSV。当您想要紧凑、稳定的代码和设计系统表示时，将这些颜色转换为 HEX。

同时使用 HSV 和 HEX 的最佳实践

您不必为整个项目选择单一的颜色格式。通过一套简单的规则，您可以并排使用 HSV 和 HEX，而不会造成混淆。

将编辑与存储分开

• 使用 HSV 进行编辑：在选择器和内部工具中调整色相、饱和度和明度。
• 使用 HEX 进行令牌：将最终颜色存储为 HEX，以便用于 CSS、文档和导出的设计文件。

在需要时与其他模型结合

• 通过 RGB 或 HSL 转换：许多库已经提供了 HSV 转 RGB 或 HSV 转 HSL 的帮助程序，您可以将其与 HEX 转换链式连接。
• 使用带有透明度的 RGBA 或 HEX：基础颜色可以存储为 HEX，而覆盖和阴影使用 RGBA 或带有 alpha 组件的八位 HEX。

保持系统可预测

• 定义明确的职责：例如，在选择器中使用 HSV，在令牌中使用 HEX，在图形 API 要求时使用 RGB。
• 避免手动重新计算：依赖转换器和工具函数，而不是手动编辑 HEX 或 HSV 值。

通过少量结构，您可以享受直观的 HSV 编辑，同时在生产中交付一个干净的基于 HEX 的颜色系统。

HSV 转 HEX 转换表

下表列出了以 HSV 和 HEX 形式书写的一些常见颜色。值进行了四舍五入，以便于阅读，因此在需要精确数字时，请使用页面顶部的转换器。

对于任何其他 HSV 组合，您可以依赖页面顶部的转换器，它应用标准的 HSV 转 RGB 转 HEX 算法来计算精确值。

常见问题：HSV 转 HEX

• 为什么要将 HSV 转换为 HEX

  HSV 适合编辑和选择器，但 HEX 是代码、样式指南和导出调色板的常见格式。转换使您能够从直观的编辑模型转移到紧凑的存储格式。

• HSV 和 HEX 表示不同的颜色吗

  不。HEX 只是以不同的方式书写相同的 RGB 颜色，您从 HSV 值中获得。只要转换正确，这两种格式描述的是相同的视觉颜色。

• 转换时色相会改变吗

  色相信息在 HSV 转 RGB 步骤中得以保留。当您查看最终的 HEX 字符串时，该色相被编码在 HEX 值所代表的 RGB 通道中。

• 我可以从 HEX 回到 HSV 吗

  可以。您可以将 HEX 转换为 RGB，然后将 RGB 转换为 HSV。除了小的四舍五入差异外，可以恢复原始颜色。

• HEX 是否总是优于 HSV

  并非在每种情况下。HEX 作为最终存储和共享格式表现出色，而 HSV 更适合实时调整和视觉探索。在一个工作流程中同时使用两者是很常见的。

相关转换器：

• HEX 转 RGB 转换器

  即时计算 hex 转 rgb

• HEX 转 HSL 转换器

  即时计算 hex 转 hsl

• HEX 转 HSV 转换器

  即时计算 hex 转 hsv

• RGB 转 HEX 转换器

  即时计算 rgb 转 hex

• RGB 转 HSV 转换器

  即时计算 rgb 转 hsv

• HSV 转 RGB 转换器

  即时计算 hsv 转 rgb