什么是 HSB 颜色？给 Palette Lab 玩家的一份快速指南

HSB 颜色是一种用 Hue（色相）、Saturation（饱和度）、Brightness（亮度） 描述颜色的方式。它很适合训练色彩直觉，因为它把颜色拆成三个你本来就在观察的问题：它属于哪个色彩家族、它有多鲜艳、它看起来有多亮。

这也是 Palette Lab 在 Toon Tone 中使用 HSB 的原因。大多数人不会凭记忆直接猜一个 HEX 代码，但调整色相、饱和度和亮度，接近设计师在真实工具里调色的方式。

如果你在搜索「HSB 颜色是什么」「HSB 和 HSV 区别」「HSB 和 HSL 区别」「色相饱和度亮度怎么调」，可以先把 HSB 理解成一种更接近人眼描述习惯的颜色坐标：先找颜色方向，再控制鲜艳程度，最后控制明暗。

HSB 颜色模式是什么意思？

HSB 颜色模式把一个颜色写成三个值：

• H：Hue，色相，通常是 0-360 度的角度。
• S：Saturation，饱和度，通常是 0%-100%。
• B：Brightness，亮度，通常是 0%-100%。

举个简单例子：一个鲜艳的亮蓝色，可能有接近蓝色区域的色相、较高的饱和度、较高的亮度。一个灰蓝色，色相仍然可能接近蓝色，但饱和度会低很多。一个深蓝色，色相也可能接近蓝色，但亮度更低。

这就是 HSB 的好处：它不要求你先想红、绿、蓝三个通道分别是多少，而是让你按视觉判断一步步接近目标色。

HSB 颜色先看色相 Hue

色相决定颜色属于哪个家族。红、黄、绿、青、蓝、紫，本质上都是色相判断。

如果一局 Toon Tone 的答案看起来完全不对，通常要先检查色相。一个颜色可以亮度和饱和度都差不多，但只要色相从青偏到蓝，整体感觉就会明显偏掉。

在色轮上，色相一般按角度理解。0 度和 360 度都回到红色，中间依次经过黄色、绿色、青色、蓝色和紫色。你在设计工具、颜色选择器或 HSB color picker 里拖动第一条滑块时，本质上就是在绕色轮移动。

练习时可以先问自己：这个颜色更偏红、橙、黄、绿、青、蓝，还是紫？如果色相错了，后面再怎么调饱和度和亮度，颜色也很难对。

HSB 颜色还要看饱和度 Saturation

饱和度描述颜色有多鲜艳或柔和。高饱和度的橙色会很响亮，低饱和度的橙色可能更接近米色、棕色或灰色。

在图片调色板提取器里，饱和度能帮助你理解为什么两个色相接近的颜色，在界面里会承担完全不同的角色。一个适合做按钮，另一个可能更适合作背景点缀。

饱和度降低时，颜色会逐渐远离「纯色」感觉，变得更灰、更柔和、更像中性色。很多品牌色、插画阴影、背景色并不是单纯降低亮度，而是同时降低饱和度，让颜色不那么刺眼。

如果你想调出柔和的颜色，不要只把亮度拉高。很多时候更有效的方法是：保持大致色相，降低饱和度，再微调亮度。

HSB 颜色最后看亮度 Brightness

亮度描述颜色看起来有多明亮。实际练习时，亮度是很容易出错的维度，因为记忆通常更容易保存颜色家族，而不是精确明暗。

如果你想提高 Toon Tone 分数，可以在每轮最后单独慢慢调整亮度，而不是一直改色相。

在 HSB 里，亮度接近 0% 时颜色会接近黑色；亮度越高，颜色越接近当前色相和饱和度下的明亮版本。它很适合回答这类问题：这个蓝色是亮蓝、普通蓝，还是深蓝？这个红色是鲜亮的红，还是更暗的酒红？

HSB 和 HSV 是一回事吗？

在大多数设计和编程语境里，HSB 和 HSV 通常指同一套颜色模型。HSV 的 V 是 Value，HSB 的 B 是 Brightness，两者都在描述同一个「亮度/明度」维度。

所以当你看到这些说法时，通常可以放在一起理解：

• HSB：Hue, Saturation, Brightness
• HSV：Hue, Saturation, Value
• HSBA：在 HSB 基础上加 Alpha 透明度
• HSVA：在 HSV 基础上加 Alpha 透明度

需要注意的是，不同软件可能对界面命名、数值范围或取整方式有细微差异。比如有的工具把 H 写成 0-360，有的编程 API 会把 H、S、B 都换算成 0-1。概念相同，但复制数值时要确认格式。

HSB 和 HSL 有什么区别？

HSB 和 HSL 最容易混淆，因为它们都有 H 和 S，也都比 RGB 更接近人类语言。但它们的第三个维度不同：

• HSB 的 B 是 Brightness，关注颜色在当前模型里的最大通道亮度。
• HSL 的 L 是 Lightness，关注黑到白之间的对称明度位置。

实际使用时，你可以这样分：

• 想在设计软件里像调色板一样快速找颜色，用 HSB/HSV 往往更直观。
• 想在 CSS 里写 hsl()、统一调整界面颜色的 lightness，用 HSL 更常见。
• 想让颜色在视觉感知上更均匀，可以进一步了解 OKLCH。

一个常见误区是：HSB 的 brightness 和 HSL 的 lightness 不是完全一样的数值。两个颜色看起来类似时，HSB 和 HSL 的第三项可能不同；反过来，第三项相同也不代表视觉明暗一定一致。

HSB、RGB、HEX 分别适合什么时候用？

HSB、RGB 和 HEX 不是互相替代的关系，更像是同一个颜色的不同表达方式。

RGB 把颜色拆成红、绿、蓝三个通道，适合屏幕显示、Canvas、图像处理和 JavaScript 色彩计算。HEX 是 RGB 的十六进制写法，比如 #4F8CFF，适合 CSS、设计标注和品牌规范。HSB 则适合选色、调色、训练色彩判断，因为它让你直接控制色相、饱和度和亮度。

如果你要在网页里落地颜色，通常会先用 HSB 或 HSL 找到想要的视觉效果，再复制 HEX、RGB、CSS 变量或 JSON 到项目里。

怎么用 HSB 调出想要的颜色？

可以按这个顺序调：

1. 先调色相：确定颜色家族，比如橙色、蓝色或绿色。
2. 再调饱和度：决定颜色是鲜艳、柔和、偏灰，还是接近纯色。
3. 最后调亮度：决定它是浅色、常规亮度，还是深色。

如果颜色「方向不对」，优先改色相。如果颜色「太脏」或「太冲」，优先改饱和度。如果颜色「太轻」或「太沉」，优先改亮度。

在 UI 设计中，这个顺序也很实用。比如你要从一个品牌主色延伸出 hover 色、浅背景色或强调色，先保持色相稳定，再调整饱和度和亮度，通常比随机挑一组 HEX 更可控。

在 Palette Lab 中使用 HSB 颜色

当你想训练色彩记忆时，可以玩 Toon Tone。当你想把图片转成项目可用的颜色时，可以使用 Palette Lab 图片调色板提取器，复制 HEX、RGB、HSB、OKLCH、CSS 变量和 JSON。

游戏和工具放在一起，能让 HSB 颜色不再抽象：你可以猜一个颜色、对比结果、提取真实调色板，然后继续练习。

更具体地说：

• 用 Toon Tone 练习「看到一个缺失颜色后，如何用 HSB 三个维度把它还原出来」。
• 用图片调色板提取器观察真实图片里的主色，比较它们的 HEX、RGB、HSB 和 OKLCH。
• 把提取到的颜色复制成 CSS 变量或 JSON，用到网页、原型、设计系统或小游戏里。

HSB 颜色常见问题

HSB 适合网页 CSS 吗？

CSS 原生更常见的是 HEX、RGB、HSL、OKLCH 等写法。HSB 本身不是最常用的 CSS 函数，但你可以用 HSB 作为选色和理解颜色的工具，再把结果转换成 HEX、RGB、HSL 或 OKLCH。

HSB 里的亮度等于人眼感知亮度吗？

不完全等于。HSB 的 brightness 是模型里的亮度维度，不是严格的人眼感知亮度。不同色相在同样 HSB 亮度下，看起来可能仍然有明暗差异。做可读性、对比度和无障碍检查时，不要只看 HSB 亮度。

为什么两个 HSB 数值接近的颜色，看起来差很多？

可能是色相跨过了敏感区域，也可能是饱和度和亮度的组合改变了颜色角色。比如高饱和高亮度的黄色会很醒目，但同样高亮度的低饱和黄色可能更像柔和背景。颜色是否好用，不只看单个数值，也要看它和周围颜色的关系。

学 HSB 对设计和绘画有什么帮助？

它能让你更快说清楚颜色问题：不是笼统地说「这个颜色不对」，而是判断它是色相偏了、饱和度太高，还是亮度太低。无论你是在做 UI、画插画、配品牌色，还是玩 Palette Lab 的颜色猜测游戏，这种拆解都能提高调色效率。