颜色入门

介绍一些颜色

RGB

也叫做三原色，指的是 Red、Green、Blue ，简称 RGB，属于加色系

什么是加色系呢？

在 CSS 中，我们通常用 6 位十六进制来表示颜色，例如 #87ceeb 这个颜色表示天蓝色

我们将这个颜色分解，分别计算三部分的颜色占比：

R = 0x87 = 135 //  135/255 = 52.9%
G = 0xCE = 206   //  206/255 = 80.8%
B = 0xEB = 235   //  235/255 = 92.2%

这说明，这个颜色是加了 52.9% 的红色分量，80.8% 的绿色分量以及92.2% 的蓝色分量合成的

当三种颜色分量都不加的时候，就是黑色

#000000

当只添加其中一种颜色分量，且比例为 100%，其他两种颜色分量为 0% 的时候，我们就得到了纯净的红绿蓝：

#FF0000 、#00FF00 、#0000FF

所以我们给三个颜色分量各自添加不同的比例，组合得到丰富的颜色：

#308247 、#58372e 、#198eb1 、#993388

色光混合过程中，光线叠加后越来越亮，最后变成白色：

#FFFFFF

为什么是红绿蓝

三原色具有独立性，三原色中任何一色都不能用其余两种色彩合成，这就是为什么是三种颜色合成而不是两种或四种，这是由于人的生理特性

从人的视觉生理特性来看，人眼的视网膜上有三种感色视锥细胞——感红细胞、感绿细胞、感蓝细胞，这三种细胞分别对红光、绿光、蓝光敏感。当其中一种感色细胞受到较强的刺激，就会引起该感色细胞的兴奋，则产生该色彩的感觉

人眼的三种感色细胞，具有合色的能力。当一复色光刺激人眼时，人眼感色细胞可将其分解为红、绿、蓝三种单色光，然后混合成一种颜色。

这也就是为什么我们除了能看到红、绿、蓝三种颜色之外的颜色

局限性

由于人眼的生理特性，显示屏等硬件设备也是通过混合三种颜色的不同比例来实现不同的颜色的，但是这种格式不太适合数据处理，要想改变亮度饱和度，三个分量都要修改

例如，我们想要绿色再绿一些，并不只单单修改绿色分量就可以，也需要修改红色和蓝色分量，所以我们有另外一种格式 hsl 来解决这个问题

HSL

指的是 Hue（色相）、Saturation（饱和度）、Lightness（亮度）

hue - (0 到 360) - 0 (或 360) 为红色, 120 为绿色, 240 为蓝色
saturation - 0% 为灰色， 100% 全色
lightness - 0% 为暗, 50% 为普通, 100% 为白

CSS 中的 hsl

CSS 提供了 hsl 方法，由于它的结构特性，使得我们很容易写出一些渐进的颜色

.bg-green-1 {
    background-color: hsl(100, 30%, 50%);
}
.bg-green-2 {
    background-color: hsl(100, 50%, 50%);
}
.bg-green-3 {
    background-color: hsl(100, 70%, 50%);
}

HSV（HSB）

HSV 指的是 Hue、Saturation、Value
HSB 指的是 Hue、Saturation、Brightness

上面 HS的意思都和 HSL 中的 HS 意思一样，难理解的就是 Lightness 和 Value/Brightness 的差别

HSL vs HSV（HSB）

差别主要体现在亮度和明度的计算上

HSL 中的 Lightness 表示颜色相对于灰阶的明亮程度
- Lightness 的计算方式是将最亮和最暗的颜色混合在一起，产生一个介于 0%（黑色）和 100%（白色）之间的值。这意味着具有相同色调和饱和度的颜色在不同亮度下可能看起来相对较暗或明亮
HSV（或HSB）中的 Value 表示颜色的绝对明亮程度
- Value 的计算方式是将最明亮的颜色与最暗的颜色进行比较，忽略了灰度。Value的取值范围也是介于 0% 和 100% 之间

上面的颜色空间对比图表明了这种差异，如果还想查看差别的细节可以参考这个网站

CMYK

最开始我们说到 RGB 是加色模式，颜色从黑色到白色。但这不适用于我们在白色纸张打印文字。所以 CMYK 出现用于色彩印刷模式

Cyan：青色
Magenta：品红色
Yellow：黄色
blacK：黑色（K 也有 Key plate 一说）

CMY来源

三种颜色来源于 RGB 的两两交集

这也就是为什么 CMKY 被称为减色模式，纯白色的 RGB 六位十六进制表示是： #FFFFFF

减去红色分量就是 #00FFFF -> 青色
减去绿色分量就是 #FF00FF -> 品红色
减去蓝色分量就是 #FFFF00 -> 黄色

我们看到 CMYK 和 RGB 是对称的，CMYK 颜色叠加由白色最后变为黑色，这很适合我们打印

K的解释

实际印刷时，由于色料本身并非真正纯色，三色等量相加之后只能形成一种深灰色或深褐色，而非黑色

理想的 CMY 三原色油墨/墨水/彩色碳粉其印出成品的结果应该完全等同 RGB 三色光的补色，但目前现实世界里一般彩色印刷/喷墨/激光所使用的 CMY 三色色料不论何种厂牌实际上均有不同的色偏现象

此外以三层 CMY 叠印产生黑色不仅不容易立即干燥、不利于快速印刷，三色叠印也需要非常精确的套印，用于表现有许多细小线条的文字十分不利；直接以黑色油墨替代不纯的 CMY 三层叠印所产生的不纯黑色，也可以大大节省成本。故此“黑色”虽非“原色”，却成为彩色印刷必备的色彩之一

颜色入门 ​

RGB ​

HSL ​

HSV（HSB） ​

HSL vs HSV（HSB） ​

CMYK ​

颜色入门

RGB

HSL

HSV（HSB）

HSL vs HSV（HSB）

CMYK