HEX 转 HSV 转换器

什么是 HEX 颜色代码

HEX 颜色是一种使用十六进制数表示 RGB 值的简写方式，格式为 #RRGGBB，其中每一对字符分别表示红、绿、蓝三个颜色通道。

每一对字符的取值范围是 00 到 FF。接近 00 表示该通道强度较低，接近 FF 表示强度较高。例如，#000000 关闭所有通道，得到黑色；#FFFFFF 将所有通道设为最大值，得到白色。

浏览器读取 HEX 值时，会将其拆分为三部分，并转换为 0 到 255 的十进制数，得到渲染引擎使用的 RGB 三元组。HEX 本质上是 RGB 的一种文本表示形式，适合用于 CSS 和设计工具。

什么是 HSV

HSV 表示 Hue（色相）、Saturation（饱和度）和 Value（亮度）。这是一种通过颜色的基本色调、强度和整体亮度来描述颜色的模型，而不是分别处理 RGB 通道。

色相 以 0 到 360 的角度表示，对应颜色圆环上的位置。饱和度和亮度以 0% 到 100% 表示。饱和度决定颜色是鲜艳还是偏灰，亮度决定颜色相对于黑色的明暗程度。

当饱和度较低时，颜色会趋近于灰色；当亮度较低时，颜色会变暗并接近黑色。提高亮度会让颜色变亮，提高饱和度会让颜色更浓烈。这三个参数共同组成 HSV 值，例如 hsv(210, 50%, 70%)。

HEX 转 HSV 的计算方式

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

1) Convert each pair to decimal:
   RR, GG, BB -> r, g, b in [0, 255]
2) Normalize to the range [0, 1]:
   r' = r / 255, g' = g / 255, b' = b / 255
3) Find max and min of r', g', b':
   max = max(r', g', b')
   min = min(r', g', b')
   delta = max - min
4) Compute value:
   v = max
5) Compute saturation:
   if max == 0 then s = 0
   else s = delta / max
6) Compute 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)
7) Convert h to [0, 360), s and v to percentages:
   H = h
   S = s * 100
   V = v * 100

该算法首先将 HEX 解码为 RGB，并对通道值进行归一化，然后根据最大值和最小值之间的差值计算色相、饱和度和亮度。最终得到的 HSV 三元组与原始颜色一致，但在视觉调整上更直观。

#4FA3C2 的示例

1) HEX 转 RGB:
   #4FA3C2 -> (79, 163, 194)
2) 归一化:
   r' = 79 / 255
   g' = 163 / 255
   b' = 194 / 255
3) 计算 max、min、delta，然后计算 h、s、v
4) 最终 HSV (四舍五入):
   hsv(196, 59%, 76%)

HEX 转 HSV 的分步过程

将 HEX 转换为 HSV 时，始终需要先经过 RGB 表示。HEX 值会被拆分为三对字符，转换为十进制数后，再代入 HSV 计算公式。

#1A2B3C
split into [1A, 2B, 3C]
-> rgb(26, 43, 60)
-> hsv(h, s, v)

下面以颜色 #1A2B3C 为例，说明具体步骤。

• 步骤 1：拆分 HEX 值

  [1A] [2B] [3C]

• 步骤 2：将每一对字符转换为十进制

  每一对字符都是一个十六进制数，转换为十进制后即可得到 0 到 255 范围内的 RGB 通道值，用于后续 HSV 计算。

  1A = (1 * 16) + 10 = 26
  2B = (2 * 16) + 11 = 43
  3C = (3 * 16) + 12 = 60

• 步骤 3：将 RGB 转换为 HSV

  将 RGB 值归一化到 0 到 1 的范围，计算最大值、最小值及其差值，然后应用 HSV 的计算公式得到 H、S 和 V，最后将饱和度和亮度转换为百分比。

  hsv(210, 57%, 24%)

这一流程适用于任何有效的 HEX 颜色：先转换为 RGB，再计算 HSV，并根据 CSS 或设计系统的需要进行取整。

HEX 和 HSV 的使用场景

HEX 和 HSV 从不同角度描述同一个颜色空间。HEX 结构紧凑，开发者使用频繁；HSV 更接近人在使用滑块或色环时对颜色的理解方式。

HEX 的使用场景

• 简短的颜色标记: HEX 值易于阅读和复制，适合用于设计 token 和文档。
• 静态调色板: 当颜色很少变动时，使用单个 HEX 字符串即可，代码更整洁。
• 工具兼容性: 大多数图形编辑器和浏览器都直接支持 HEX 输入，因此它是安全的默认选择。

HSV 的使用场景

• 交互式取色器: 许多取色器使用色环表示色相，用滑块表示饱和度和亮度，这正好对应 HSV 模型。
• 生成颜色变体: 只需调整饱和度和亮度，就可以得到更亮、更暗或更柔和的颜色变体。
• 配色探索: 在尝试不同配色方案时，调整 HSV 通常比直接操作三个 RGB 通道更直观。

总结

当需要紧凑、稳定的颜色代码时使用 HEX；在使用取色器、生成颜色梯度或直接调整亮度和强度时选择 HSV。两种格式之间可以相互转换，不会丢失颜色信息。

在 CSS 和设计工具中使用 HSV 的实践建议

CSS 原生支持 RGB 和 HSL，但很多设计师习惯使用 HSV，因为大多数取色器展示的就是这种模型。以下建议有助于在不同表示方式之间切换时保持清晰。

将 HSV 与设计系统对齐

• 确定基础色相: 为品牌色选择一个固定的色相，通过调整饱和度和亮度来构建 hover、active 和 disabled 等状态。
• 用饱和度控制强弱: 背景使用较低的饱和度，主要操作和强调元素使用较高的饱和度。

在 HSV 与其他格式之间切换

• 一次转换，多次使用: 使用转换器将 HSV 转换为 HEX 或 HSL，并在代码中统一保存为一种格式。
• 透明度单独处理: 需要透明度时，在 CSS 中使用 RGBA 或 HSLA，但基础颜色的选择仍然可以基于 HSV。

常见错误

• 混淆 value 和 lightness: 在 HSV 中，value 表示相对于黑色的亮度，而不是像 HSL 那样表示黑白之间的平衡。
• 只调整亮度: 应同时调整饱和度和亮度，避免颜色过于灰暗或过于刺眼。
• 混用过多格式: 在样式中选择一种主要格式（HEX、RGB 或 HSL），仅在需要时从 HSV 进行转换。

遵循这些规则可以让颜色表现更加稳定，也更容易维护，即使在不同工具和颜色模型之间切换。

HEX 转 HSV 对照表

下表列出了一些常见的 HEX 颜色及其对应的 HSV 值，涵盖了基础颜色、灰度级以及界面中常见的颜色。

表中的 HSV 数值经过四舍五入以便阅读。如需精确结果，可使用转换器计算任意有效 HEX 颜色的 HSV 值。

常见问题：HEX → HSV

• 为什么要将 HEX 转换为 HSV

  HEX 适合存储颜色标记，而在调整亮度或强度时，HSV 更直观。两者之间的转换可以同时兼顾简洁性和可控性。

• H、S 和 V 的取值范围是多少

  色相以 0 到 360 的角度表示，饱和度和亮度以 0 到 100 的百分比表示。许多工具将 HSV 显示为三个数值字段或滑块。

• HSV 是否比 HEX 或 RGB 更精确

  不是。这些格式描述的是同一组颜色，区别只在于信息的组织方式以及手动调整的便利程度。

• HSV 和 HSL 有什么区别

  两种模型都使用色相和饱和度，但第三个参数不同。HSL 使用 lightness，表示黑白之间的平衡；HSV 使用 value，表示相对于黑色的亮度。

• 可以在一个项目中同时使用 HEX、HSV、RGB 和 HSL 吗

  可以。许多团队会选择一种主要格式用于 token，在需要时再转换为其他格式。关键是保持一致性，并依赖转换工具而不是手算。

相关转换器：

• HEX 转 RGB 转换器

  即时计算 hex 转 rgb

• HEX 转 HSL 转换器

  即时计算 hex 转 hsl

• RGB 转 HEX 转换器

  即时计算 rgb 转 hex

• RGB 转 HSL 转换器

  即时计算 rgb 转 hsl

• RGB 转 HSV 转换器

  即时计算 rgb 转 hsv

• HSV 转 RGB 转换器

  即时计算 hsv 转 rgb