前端可能需要知道的色彩知识

前端可能需要知道的色彩知识的分享

一般在写页面的时候，css 中经常有 #de1c31, rgb(222, 28, 29), rgb(222, 28, 29, 0.8) 这种字符，他们都是代表某一种红色。

色彩的调和

色光三原色是指红、绿和蓝，一般显示器等电子设备采用这种模式，除此以外还有色料三原色是指红，黄，蓝，美术中就是定义这种为色彩三原色。
由三种颜色混合可以配出丰富的颜色。

#1677b3,这种是用十六进制表示的，分别是 0-f, ff 为最大值，在 #0000ff 中，蓝色的位置是满值，所以此时#0000ff代表纯蓝色。

rgba(22,119,179, 0.8)，这种是用十进制表示的，分别是0-255，0.8 表示透明度。可以理解为给颜色加上一层滤镜。

所以其他颜色就是由这三种原色调出来的，可以理解为每一个位置都有一瓶颜料，颜色分别是红绿蓝。分别往每个容器内倒入不同度量的颜料。就可以得到各种各样的颜色。

色彩的空间

除了RGB外还有另外一种用来描述颜色的方式–HSL和HSB。
rgb这种表示法是基于二维直角坐标系的。
而HSL和HSB是基于圆柱直角坐标系的，这种方式更加直观。

HSL（ad）和HSV（eh）。上半部分（a、e）：两者的3D模型截面。下半部分：将模型中三个参数的其中之一固定为常量，其它两个参数的图像。

H	S	L/V
色相 Hue	饱和度 Saturation	亮度 Lightness/ 明度 Value
色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。	饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取0-100%的数值。	明度（B），亮度（L），取0-100%。

色彩的体系

市面上有很多的设计体系，比如Ant Design, Gogole materia Design等。它们都会有这样的色卡。
有一些组件库也会有自己的色板。

Ant Design 颜色生成方式

他们在设计色卡的时候会使用HSL或HSB模型。其中Ant Design 使用的是HSB模型。以下是Ant Design 3.0 生成颜色的代码。

// 分冷暖色对颜色减淡／加深
var getHue = function(hsv, i, isLight) {
    var hue;
    if (hsv.h >= 60 && hsv.h <= 240) {
      hue = isLight ? hsv.h - hueStep * i : hsv.h + hueStep * i;
    } else {
      hue = isLight ? hsv.h + hueStep * i : hsv.h - hueStep * i;
    }
    if (hue < 0) {
      hue += 360;
    } else if (hue >= 360) {
      hue -= 360;
    }
    return Math.round(hue);
  };

// 减淡饱和度降低，加深则提高
var getSaturation = function(hsv, i, isLight) {
    var saturation;
    if (isLight) {
      saturation = Math.round(hsv.s * 100) - saturationStep * i;
    } else if (i === darkColorCount) {
      saturation = Math.round(hsv.s * 100) + saturationStep;
    } else {
      saturation = Math.round(hsv.s * 100) + saturationStep2 * i;
    }
    if (saturation > 100) {
      saturation = 100;
    }
    if (isLight && i === lightColorCount && saturation > 10) {
      saturation = 10;
    }
    if (saturation < 6) {
      saturation = 6;
    }
    return Math.round(saturation);
  };

// 减淡时明度缓慢升高，加深时明度迅速下降
 var getValue = function(hsv, i, isLight) {
    if (isLight) {
      return Math.round(hsv.v * 100) + brightnessStep1 * i;
    }
    return Math.round(hsv.v * 100) - brightnessStep2 * i;
  };

// 生成颜色的代码
this.colorPalette = function(color, index) {
    var isLight = index <= 6;
    var hsv = tinycolor(color).toHsv();
    var i = isLight ? lightColorCount + 1 - index : index - lightColorCount - 1;
    return tinycolor({
      h: getHue(hsv, i, isLight),
      s: getSaturation(hsv, i, isLight),
      v: getValue(hsv, i, isLight),
    }).toHexString();
  };

1. 根据颜色的冷暖色进行色相的取值。
2. 颜色减淡时，饱和度降低；颜色加深时，饱和度升高。
3. 颜色减淡时明度缓慢升高；颜色加深时明度迅速下降。

Punchline

那么颜色变化时，降低或升高时都是有一定的阶梯的，这个阶梯的值是通过什么方式得到的呢？