神奇的颜色：学了这么久，你真的了解颜色吗从色彩的原理开始，讲述原色、间色、复色，以及色相、饱和度、明度等颜色属性，提及加

风禾尽起，枝叶扶苏。 ---- 又是加班狗的一天。

眼前的黑不是黑，你说的白是什么白。

前言

对于色光的三原色，红绿蓝，我是知道的。小时候总玩三棱镜，因此会比较熟悉。另一方面，由于美术绘画知识相当于是零基础，所以红黄蓝是美术的三原色这件事，知道后我是相当吃惊的，并且在文字写的清清楚楚的时候，我仍表示怀疑过。最终在小朋友的帮助下，一起用实验见证真理，才让我得以信服。

本文目的

本文将介绍色彩的基础，帮你了解色彩的世界，学习各种颜色模型，模型间相互转换的关系，以及思考如何画好一张图，学习思考色彩的运用技巧，仔细观察生活中的色彩搭配，让光的视觉效应更佳美妙。

你将了解

色彩的基础理论知识
几种常见色颜色模型
探究模型间的转换原理
走进好玩的色彩世界

色彩的基础

我们在小学的自然课上学过太阳光谱，太阳光谱分为不可见光与可见光两部分，不可见光分为红外线和紫外线。可见光由红、橙、黄、绿、青、蓝、紫七种颜色组成，雨后的彩虹或者利用三棱镜都可以看到七色光。人们根据颜色间的相互关系，结合各自的特点和性质，总结出色彩的变化规律，把颜色概括为：原色、间色和复色三大类。

美丽的彩虹，不多见，尤其是双彩虹。

1.原色

原色，也称为“基色”、“三原色”，是其他颜色混合的基础色，不能通过任意的颜色搭配混合出来的颜色。不同的颜色模型具有的三原色不同，比如色光的三原色是红绿蓝。

2.间色

间色，又称为“二次色”、“三间色”，是指任意两种原色等量混合形成的颜色。

RGB颜色模型，帮你理解原色、间色和复色

3.复色

复色，又称为“三次色”、“复合色”，也就是色彩的第三次搭配，通常是有原色与间色或间色与间色调配而成的颜色。复色包括了除原色和间色之外的所有颜色。

4.色相

色相？？？对，是这俩字。英文为Hue，也就是HSL/HSV/HSB模型中的H，是指色彩的相貌。你肉眼看到的，能说出来的颜色，就是色相。光谱上的红、橙、黄、绿、青、蓝、紫就是七种不同的基本色相。

5.明度

明度，指色彩的明暗、深浅程度的差别。有两个含义：一个是颜色本身的明与暗，二是说不同色相之间存在着明与暗的差别。

6.纯度

纯度，是指色彩的纯净和浑浊的程度，也称为饱和度。纯正的颜色没有黑色白色或其他颜色的混入。低纯度，给人灰暗、淡雅柔和的感觉，纯度变高，就会给人鲜明、突出、有力，甚至单调刺眼，如果混入太多，又会变得很脏，色调灰暗。

混色理论

色彩的混合分为加法混合和减法混合，还有在进入视觉后才发生的混合，称为中性混合。

1.加色混合

加色法，是指色光的混合。两种以上的光混合在一起，光的亮度会提高，混合色的光的总亮度等于相混各色光亮度之和。

2.减色混合

减色法，是指的色料的混合。白色光线透过有色滤光片后，一部分光线被反射而吸收其余的光线，减少掉一部分辐射功率，最后透过的光是两次减光的结果，这样的色彩混合称为减法混合。

3.中性混合

中性混合是基于人的视觉生理特征所产生的视觉色彩混合，而并不变化色光或发光材料本身，混色效果的亮度既不增加也不减低，所以称为中性混合。

小结：原来色彩还可以分这么多东西出来，掌握色彩的组成，是深入学习模型的基础。

颜色模型

颜色模型，是指以数字方式指定或描述颜色的一种方法。各种不同的颜色模型，有自己独特的三原色，有适用的场景以及通过不同的混色理论组成的配色。

RGB

RGB模型，是我们所熟知的一种颜色模型，比如，在CSS中指定div的背景色和文字颜色，我们使用

div {
  background-color: '#FF0000';
  color: 'rgb(255, 0, 0)';
}

我们之所以能看到这个世界，是因为光。RGB模型，又称为三原色光模型、红绿蓝模型，是色光的加色法混合模型。RGB模型的三原色，也就是光的三原色，红（Red，R）、绿（Green，G）、蓝（Blue，B）。常见的彩色电视机，计算机显示器都是RGB模型，

基于RGB模型的十二色相环图

三原色：红、绿、蓝按照加色法混色模型，任意两种色光等量相加形成青（Cyan，C）、紫（亮紫色，或洋红色，Magenta，M）、黄（Yellow，Y），即三间色，三原色同时等量混合，最终形成白光。白色属于无色系，无色系包含三中颜色，黑（blacK，#000000）白（#FFFFFF）灰（#808080）。

三原色的互补色，均为另外两种原色混合而成的间色，两种互补色放在一起组合成白色。

CMYK

CMYK模型，又成颜料模型，或者印刷四色模式。是彩色印刷采用的一种减色混合模型。是一种用于印刷品依靠反光的色彩模式，比如我们墙上的海报、书籍、高考卷子、报纸等，光照射到这些物品，然后再反射到我们的眼中，这样我们才能够看得见它们。

印刷四色模型 CMYK的三原色，分别分Cyan、Magenta、Yellow，三间色分别为红、绿、蓝，三原色颜料等量混合到一起，最终形成黑色K（blacK）。

RYB

RYB模型，也是一种基于减色法混合的模型。即美术三原色，Red、Yellow、Blue，常说的红黄蓝，红黄蓝，就是它。对应的三间色为绿、橙、紫，原色与间色混合又形成6种颜色，我们可以用原色、间色和复色形成美丽的十二色环（Color Wheel）。

基于RYB模型的伊登十二色环

HSL

HSL是RGB模型的一种表示法，把颜色描述到圆柱坐标系的点。 HSL（Hue，Saturation，Lightness）分别为色相、饱和度、亮度。

HSV

HSV也是RGB模型的另一种表示法，是把颜色排列到一个径向的切片中，围绕中心轴旋转而成的一个六角椎体模型。 HSV（Hue，Saturation，Value）分别为色相、饱和度、明度。也有称为HSB的，B即Brightness。

图片来源于网络

小结：颜色模型还有很多种，例如Ycc、LUV、XYZ、Lab、LCH模型等等，此处仅简单介绍下概念，加深印象。

模型间的相互转换

除RYB模型外，RGB、HSL、HSV、CMYK这几个模型间的相互转换都比较容易，算法也很清晰，相对比较好实现。RGB作为颜色模型的理论基础，列举一下，转换为其他模型的算法。

最容易的是转换为CMYK模型

toCMYK(): CMYK {
    const {0: r, 1: g, 2: b} = this._rgb;
    const max = Math.max(r, g, b) / 255;
    if (max === 0) {
      return {c: 0, m: 0, y: 0, k: 1};
    }
    const k = 1 - max;
    const c = (max - r / 255) / max;
    const m = (max - g / 255) / max;
    const y = (max - b / 255) / max;
    return {c, m, y, k};
  }

转换为HSL模型

toHSL(): HSL {
    const {0: r, 1: g, 2: b} = this._rgb;
    const max = Math.max(r, g, b);
    const min = Math.min(r, g, b);

    const l = (max + min) / 2 / 255;
    const d = max - min;
    let s = 0;
    let h = 0;

    if (max === min) {
      h = 0;
      s = 0;
    } else {
      s = l > 0.5 ? d / (2 * 255 - max - min) : d / (max + min);
      switch (max) {
        case r:
          h = (g - b) / d * 60;
          break;
        case g:
          h = (b - r) / d * 60 + 120;
          break;
        case b:
          h = (r - g) / d * 60 + 240;
          break;
      }
    }

    if (h < 0) {
      h += 360;
    }

    return {
      h,
      s,
      l: Math.ceil(l * 1000) / 1000
    };
  }

转换为HSV模型

toHSV(): HSV {
    const {0: r, 1: g, 2: b} = this._rgb;
    const max = Math.max(r, g, b);
    const min = Math.min(r, g, b);

    const v = Math.ceil(max / 255 * 1000) / 1000;
    const d = max - min;
    const s = max === 0 ? 0 : d / max;
    let h = 0;

    if (max === min) {
      h = 0;
    } else {
      switch (max) {
        case r:
          h = (g - b) / d * 60;
          break;
        case g:
          h = (b - r) / d * 60 + 120;
          break;
        case b:
          h = (r - g) / d * 60 + 240;
          break;
      }
    }
    if (h < 0) {
      h += 360;
    }

    return {
      h,
      s,
      v
    };
  }

上述算法代码中，暂时移除了alhpa的计算逻辑，以及未考虑具体数值的精度计算，不影响理解各个模型间的关系。

小结：当然更好的理解算法，还是先了解模型的原理，知道是怎么回事，鉴于这方面资料内容较多，就不再过多赘述。

色相环

在美术上，我们可以利用十二色环的单色，由不同的明度组合搭配来凸显颜色本身带来的感觉。例如，粉色让人想到梦幻、可爱，蓝色有一种安静的力量，灰色给人冰凉的感觉。

色相环上，相对的两种颜色为互补色。放在一起会有很强烈的对比效果，突出重点，营造一种碰撞的气氛。也可以利用三角色使图片层次更丰富，以及使用类似色（即色相环上三个相邻的颜色）使画面更和谐。

画了几幅比较有意思的图，下面是showtime时间，请拿好遮光板，防止被闪瞎双眼。

基于RGB模型的48色相环

基于RGB模型的96渐进色相环

一个随机颜色调色板，已经不是有点丑，是特别丑，各位掘友，对不住啦。

有点特别的调色板

2021-12-30 23.07.53.gif

渐进式递进的调色板（要多大有多大，多大是大？够用就行。看起来有点不方正？揉揉眼睛）

更多好玩的东西？下次再show吧，我得去做眼保健操，长达5分钟那种。

结语

本文从色彩的原理开始，讲述原色、间色、复色，以及色相、饱和度、明度等颜色属性，提及加色法、减色法等混色原理，并介绍几种常见的颜色模型，最后展示一些个人绘制的效果图，希望能够帮助你更好的了解和学习色彩的知识，走进色彩的世界。

与此同时，在写本文的过程中，作者也比较忐忑，随着色彩知识的深入了解，发现很多自己不能完全掌控的知识，例如在深入探究RYB模型和RGB模型相互转换的算法中，迟迟没有进展，对网上屈指可数的资料，以及找到的算法深入研究后，发现相互转换并不能完全合理的正确匹配，所以文中就没有深入浅出的为大家介绍。还有，对于很多RGB颜色的十六进制表示和真实的颜色命名，不匹配问题也比较踌躇，不知道该使用哪一种来表示，更能够接近真实效果，最终决定使用大多数场景下，我们更容易见到和接受的方式来表示。当然，最重要的是，担心自己的谬论对你造成误导，如果发现文章的任何瑕疵，请一定帮忙斧正。

本文是专栏《神奇的颜色》开篇，后续会逐渐把遇到的各种神奇有趣的模型，用色彩的方式展示出来。如果你感兴趣，期待持续关注，把更多好玩的有趣的色彩世界让更多的人看到。

在计划中的两篇：

我是黑，你是白，我们俩加起来就是白加黑？讲讲alpha混色模式。

绿色的绿到底是不是green，你说的绿是什么绿？

神奇的颜色：学了这么久，你真的了解颜色吗

前言