设计上 RGB 与 HSB

作者:vkvi 来源:ITPOW(原创) 日期:2021-9-8

RGB

也就是红、绿、蓝,在 CSS 中,可以使用 rgba,带入第 4 个参数,透明度。

HSB

  • Hue [hjuː] 色相。

  • Saturation [ˌsætʃəˈreɪʃn] 饱和度。

  • Brightness [ˈbraɪtnəs] 亮度。也有使用 Value 表示的。

HSB

上面这张图是网上的,很好地说明了 HSB。

  • H 的单位是度,表示是在这个圆盘上的哪个角度,其中:红色是 0 度、绿色是 120 度……

  • S 的单位是 %,值是 0 - 100,表示在这个圆盘上靠近圆心的距离,可以看出:值越大,越远离圆心,颜色越纯。

  • B 的单位是 %,值是 0 - 100,表示在这个圆柱上靠近底面的距离,可以看出:值越大,越远离底面,越亮。

HSB 与 RGB

上面这张图,可以看出,选择的颜色在拾色器横向是一半,所以 S 是 50%,表示掺杂着白色,颜色不是那么纯。再看纵向上接近顶部 90%,所以 B 是 90%,所以还是比较亮的。

折合成 RGB 就是:73e573。

  • 如果我们将小圆点向下移R、G、B 均会降低,因为变黑了,表示参与的颜色越来越少了。

  • 如果我们将小圆点向右移G 不变,R、B 会降低,因为饱和度增加,表示杂色越来越少了,所以 R、B 会降低,而由于色相和亮度不变,所以 G 保持不变。

我们也可以得出:

  • 如果 S 是 0,表示饱和度为 0,那么 H 怎么调都没意义,而此时 B 则影响有多白、有多黑,即灰度。

  • 如果 B 是 0,H、S 怎么调都没意义,因为亮度为 0,谈何颜色呢?所以对应的 RGB 铁定是 000000。

相关文章