风禾尽起，枝叶扶苏。 ---- 又是加班狗的一天。
眼前的黑不是黑，你说的白是什么白。
前言
对于色光的三原色，红绿蓝，我是知道的。小时候总玩三棱镜，因此会比较熟悉。另一方面，由于美术绘画知识相当于是零基础，所以红黄蓝是美术的三原色这件事，知道后我是相当吃惊的，并且在文字写的清清楚楚的时候，我仍表示怀疑过。最终在小朋友的帮助下，一起用实验见证真理，才让我得以信服。
本文目的
本文将介绍色彩的基础，帮你了解色彩的世界，学习各种颜色模型，模型间相互转换的关系，以及思考如何画好一张图，学习思考色彩的运用技巧，仔细观察生活中的色彩搭配，让光的视觉效应更佳美妙。
你将了解
- 色彩的基础理论知识
- 几种常见色颜色模型
- 探究模型间的转换原理
- 走进好玩的色彩世界
色彩的基础
我们在小学的自然课上学过太阳光谱，太阳光谱分为不可见光与可见光两部分，不可见光分为红外线和紫外线。可见光由红、橙、黄、绿、青、蓝、紫七种颜色组成，雨后的彩虹或者利用三棱镜都可以看到七色光。人们根据颜色间的相互关系，结合各自的特点和性质，总结出色彩的变化规律，把颜色概括为：原色、间色和复色三大类。
美丽的彩虹，不多见，尤其是双彩虹。
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渐进色相环
- 一个随机颜色调色板，已经不是有点丑，是特别丑，各位掘友，对不住啦。
- 有点特别的调色板
- 渐进式递进的调色板（要多大有多大，多大是大？够用就行。看起来有点不方正？揉揉眼睛）
更多好玩的东西？下次再show吧，我得去做眼保健操，长达5分钟那种。
结语
本文从色彩的原理开始，讲述原色、间色、复色，以及色相、饱和度、明度等颜色属性，提及加色法、减色法等混色原理，并介绍几种常见的颜色模型，最后展示一些个人绘制的效果图，希望能够帮助你更好的了解和学习色彩的知识，走进色彩的世界。
与此同时，在写本文的过程中，作者也比较忐忑，随着色彩知识的深入了解，发现很多自己不能完全掌控的知识，例如在深入探究RYB模型和RGB模型相互转换的算法中，迟迟没有进展，对网上屈指可数的资料，以及找到的算法深入研究后，发现相互转换并不能完全合理的正确匹配，所以文中就没有深入浅出的为大家介绍。还有，对于很多RGB颜色的十六进制表示和真实的颜色命名，不匹配问题也比较踌躇，不知道该使用哪一种来表示，更能够接近真实效果，最终决定使用大多数场景下，我们更容易见到和接受的方式来表示。当然，最重要的是，担心自己的谬论对你造成误导，如果发现文章的任何瑕疵，请一定帮忙斧正。
本文是专栏《神奇的颜色》开篇，后续会逐渐把遇到的各种神奇有趣的模型，用色彩的方式展示出来。如果你感兴趣，期待持续关注，把更多好玩的有趣的色彩世界让更多的人看到。
在计划中的两篇：
- 我是黑，你是白，我们俩加起来就是白加黑？讲讲alpha混色模式。
- 绿色的绿到底是不是green，你说的绿是什么绿？
参考资料
- 特别好用的颜色网站，可以查询所有颜色信息，强烈推荐收藏。
- 了解图像的大致组成原理
- 一张很有趣的复杂色相环
- 模型间的转换工具，辅助校验颜色转换准确性
- 帮你学习了解美术知识，很涨姿势