颜色转换

HSV / HSB 在线转换器

输入 HSV 或 HSB 的色相、饱和度和明度后，系统会实时生成 RGB、HEX、HSL 和 CSS 写法，适合调色、主题扩展和前端样式开发。

实时转换

HSV 与 HSB 在大多数设计软件里可以视为同一套模型，非常适合在保持色相的前提下快速调整色彩强度与亮度。

HSV 与 HSB 在大多数设计软件中可以视为同一套色彩模型。调节色相、饱和度和明度值后，结果会立即同步到 RGB、HEX 和 HSL。

HSV / HSB: 9, 72%, 100%
RGB: 255, 99, 71
HEX: #FF6347
HSL: 9, 100%, 64%
CSS 背景色: background-color: rgb(255, 99, 71);

转换规则

HSV / HSB 更适合调色和主题扩展，RGB 与 HEX 更适合直接落到浏览器与前端代码中。

`H` 表示色相，`S` 表示饱和度，`V / B` 表示明度或亮度。
在很多设计工具里，HSB 可以直接视为 HSV 的另一种命名方式。
完成调色后，通常会转换成 RGB 或 HEX，方便交付给前端或设计系统。

适合哪些场景

HSV / HSB 转换常用于设计稿调色、品牌色扩展和状态色系统设计。

基于同一色相快速生成 hover、active、disabled 等状态色。
把设计软件中的 HSV / HSB 数值转成前端可直接使用的颜色代码。
做配色探索时，通过调整饱和度和亮度更快比较色彩层级。

常见 HSV / HSB 转换参考

下面这组预设可以帮助你快速核对 HSV / HSB、RGB、HEX 和 HSL 的对应关系。

名称HSV / HSBRGBHEXHSL

番茄红9, 72%, 100%255, 99, 71#FF63479, 100%, 64%

海盐蓝208, 87%, 90%30, 136, 230#1E88E6208, 80%, 51%

森林绿123, 63%, 49%46, 125, 50#2E7D32123, 46%, 34%

墨夜蓝215, 44%, 22%31, 42, 56#1F2A38214, 29%, 17%

使用建议

如果你在做一套可扩展主题色板，建议先在 HSV / HSB 空间调节，再转成 RGB 或 HEX 落地。

保持 `H` 不变，只调节 `S` 和 `V`，通常更容易做出统一的状态色系统。
最终上线前，建议确认转换后的 RGB 与 HEX 是否符合浏览器显示预期。
如果颜色最终用于正文或按钮文字，还应再配合对比度检测工具检查可读性。

示例输入输出

示例优先覆盖取色面板里最常见的高饱和颜色输出。

纯红 HSV

适合快速理解 HSV / HSB 到网页色值的映射。

输入

HSV / HSB 输入

0, 100%, 100%

输出

RGB 输出

255, 0, 0

HEX 输出

#FF0000

纯蓝 HSV

适合校对色相环中基础蓝色的转换结果。

输入

HSV / HSB 输入

240, 100%, 100%

输出

RGB 输出

0, 0, 255

HEX 输出

#0000FF

常见问题

HSV / HSB 的 FAQ 重点是解释它和 HSL、RGB 的关系。

HSV 和 HSB 是不是同一种东西？

大多数网页和设计场景里，HSV 和 HSB 可以近似看成同一套逻辑，只是最后一个字母一个写 Value，一个写 Brightness。

为什么调色盘和设计软件里经常能看到 HSV / HSB？

因为它很适合做色相环、亮度调节和快速选色，尤其是在设计软件和颜色选择器里会比纯 RGB 更直观。

HSV / HSB 和 HSL 哪个更适合做网页主题？

两者都能用，但网页主题层级和背景明暗控制通常更常回到 HSL；HSV / HSB 更适合取色和快速调亮暗。