写给开发们的色彩理论

做为一个老是去设计领域闲逛的开发，或许能够更好得把本身对设计的领悟给开发们讲清楚，这也是我输出的第一篇更加偏向于设计领域的文章，毕竟职业仍是开发，只能算一个不入流的旁门左道的设计师，对设计的一些术语表述有误还请设计大佬谅解。

本文旨在给开发者一个基本的色彩的认识，把一些设计知识带入开发者的世界里，但愿开发者们能够从这篇文章中受益。

前言

色彩理论的起源是牛顿三棱镜发现光能够分红七种颜色红橙黄绿青蓝紫，这也初步解释了彩虹的造成。因为是渐变的而且仍是首位相连的那种，因此牛顿同时也发明了色轮，这个是色彩理论的最初的探索。后来歌德完善了色彩理论，还把颜色分为了暖色和冷色。

再后来，颜色理论逐渐被发扬光大，好比蒙塞尔的球体，还有色环，明度，亮度，饱和度，色相，色调，对比度，灰度等等各类各样的发现，若是使用过ps调色的人会很熟悉这些概念，而在大多数的开发者眼里，或许颜色只是计算机里的一个16进制的数值。

很神奇的是，这些理论的奠定者期中一个是你们熟知的物理学家数学家牛顿，另外一个是散文家，诗人大名鼎鼎的《少年维特之烦恼》的做者歌德。但这点偏偏说明色彩不只仅是设计师关注的，也是科学所关注的，而诗人喜欢色彩是由于色彩和文字同样在传递了感情。

颜色的感受

颜色来源于大天然，来源于人的肉眼所能接受到的大天然不一样物体所反射的光线。因此颜色的感受更多的也来源于大天然，好比说

绿色表明生机，因为大天然的包容，因此绿色也表明“原谅”。

红色会充满热情，由于红色就像火焰同样炽热，暗红色会像血液同样，因此红色有时也会有种不详的感受，后来红色也表明党，表示一个在血泪中成长起来，而且充满热情的组织。

蓝色表明冰冷也表明大海。蓝色和白色在会让人联想到冬天的雪后透彻的蓝天和白茫茫的一片。

蓝色和橙色在一块儿会有种落日和大海的感受。

紫色会比较抚媚，也会让人以为浪漫。

感觉不一样的颜色传达的感受这个是一个设计师最基本的能力，也是平面设计或者视觉传达设计中最基础的知识。

RGB

rgb经过三种不一样的颜色混合来表达颜色，也是最多见的颜色表示法，混合颜色一般用三原色，即红绿蓝，用这三种颜色混合能够获得任意颜色，注意这是光的颜色的拆分，而印刷须要的是三基色，web开发者不会接触到印刷方面的颜色问题，感兴趣的能够去搜一下三原色和三基色的区别。

颜色的混合

rgb分别是red green和blue，下边的这张图里能够很清晰的看到混合的过程

当三种颜色都是最大的时候混合出来的颜色就是白色

绿色和红色混合是黄色（第三个块）

蓝色和红色混合是洋红色（第七个块）

绿色和蓝色混合是青色（第五个块）

橙色的话实际上是较多的红色和较少的绿色混合的结果（第二个块），是处于红色和黄色的中间值。

紫色是较少的红色和较多的蓝色（第八个），等量的红色和蓝色其实应该叫作洋红色。

若是熟知这些那么调色就能垂手可得了。

稍微提一下，青，洋红，黄就是三基色，颜色模式种的另一种模式是CMYK，分别就是说Cyan，Magenta，Yellow还有Blank。开发是不会用到印刷知识的，因此不须要知道这点。

计算机中颜色的表示

计算机为了表达颜色也有一些规定，最多见的就是#开头的16进制6位字符串。

16进制是0到f，因此#fff意思是三种颜色都是最大值，因此就是白色。而#fff和#ffffff是等价的，能够认为前者是后者的缩写，好比#ffaa33就能够缩写做#fa3

而上面所示的八种颜色用十六进制就是这样

知道颜色的混合就能很清楚根据给出的色值猜到大概是个什么颜色

好比#014589，拆分红rgb就是红色01，绿色45，蓝色89。因为蓝色最多，绿色次之，而蓝色加绿色是青色，那较多的而蓝色加较少的绿色因此会是一个偏蓝的青色。总体色值较低，因此偏暗一些，所以这个色值接近于藏青色。

也能够根据想要的颜色，写出一个差很少的色值，好比说想要一个下边这样的桃红色

这个颜色很接近洋红色，可是比洋红色更红，或者说蓝色的成分要少一些。而洋红色是#ff00ff，因此这个颜色大概就是为#ff0088。

rgba表示

css还提供了一种表示方法是rgba或者rgb，rgba会比rgb多出一个alpha，为何叫作alpha不叫作opacity呢。

区别在于一张图片的opacity是50%，那么意味着全部的区域都是50%的透明度。

而事实上一张图不一样地方的透明度是不同的，好比一团火焰，火焰其实在淡的区域是能够穿透的，在浓烈的地方能够认为是没有透明度的，那么这意味着不一样地方的颜色的穿透能力不一样，造成了一个颜色的通道，这个通道就叫作alpha通道。因此alpha能够理解为颜色的可穿透的程度。这个点到为止，反正理解成透明度也不会出错。

rgba模式和16进制自己是一摸同样的，只是16进制是00到ff，rgba是0到255，255实际上是2^8。这个是由于计算机的存储颜色的方式，一个色值用8bits。

颜色的度

目前学习的颜色都是不一样的颜色的表示方法，其实通常人所谓的颜色是指色相，什么叫作色相呢，就是说颜色的品相，一般红橙黄绿蓝靛紫就是不一样的色相，就像不一样的星座同样，一个范围内的某种颜色都是一种色相，和星座不一样的是，色相并无严格的规定什么范围到什么范围是什么相。由于对于设计师这种限定并无什么意义。

既然同一种颜色其实包含各类各样的颜色，好比绿色有墨绿，青绿，淡绿等等。因此同一种颜色内，其实须要有各类各样的度。饱和度（纯度），亮度，明度，灰度，对比度。

而这些度里最重要的是色相，饱和度，明度，被称为颜色的三要素。

品颜色须要有强大的感知能力，因此在继续往下读的同时放松双眼。

饱和度

通俗的说饱和度下降就是让颜色显得看起来不那么刺激或者鲜艳。

## 为何饱和度高会让人产生视觉刺激强烈的感受呢？

是由于人眼有三种视锥细胞，用来接受三原色，最后合并为一种颜色。一个颜色对人的眼球产生刺激是由于眼睛接受到的三原色之间的差距很大，三种视锥细胞获得了差距很大的三种颜色就会刺眼，因此就产生了鲜艳感。

饱和度在色值的表现上一般是rgb三种色值的差距缩小，饱和度为0就是三原色的差距为0。而饱和度的数学概念就是三原色的最大值和最小值之间的差，上边说的那个桃红色的饱和度就是ff和00的差值是100%。

当咱们把一张彩色的图片的饱和度变成0那么图片应该只有黑白灰，变得像一张黑白照片同样，可是黑白照片的算法和饱和度为0并不同。

黑白照片的算法是根据颜色的份量计算一个分量相等的灰色，一个图变成黑白以后整个图的直方图信息并不会发生改变，关于这个能够之后再聊。

而饱和度为0是取rgb的最大值和最小值的中间值。让三种颜色同时趋于这个中间值。

明度

通俗的来说，明度就是某个颜色看起来是偏黑仍是偏白。好比说上边说到的藏蓝色的总体色值都比较小，其实就是说他的明度低。若是理解了饱和度的话，再理解明度就会很是简单。

一样，咱们站在生物学和数学两种角度理解这个暗仍是白的问题。

生物学的角度说，暗意味着三种颜色对三种视锥细胞的刺激都很小，相反意味着三种颜色都比较多，会使得颜色看起来发白，而素色就是说明度比较高的颜色，这种颜色比较偏白，只是淡淡的展露出一种颜色，因此看起来感受更淡雅。

明度增长

明度下降

其实明度的变化也会引发饱和度的变化，由于黑色和白色的饱和度也是0。但饱和度和明度是从两个不一样的维度去控制一个颜色的。这也是css中的另外一种颜色表达方式HSL。

HSL模式

工业颜色标准，经过色相 hues，饱和度 saturation 和明度 lightness来表达颜色，能够表达视觉所覆盖的全部颜色，是迄今使用最广的颜色标准，css也支持这种方式来表达颜色。

这个时候不少人就开始吐槽了，是由于rgb表达的颜色不够多仍是很差用，非要造出来这么多奇奇怪怪的模式，css那么多属性都学不动了，学个颜色搞得这么麻烦嘛～

其实颜色确实是门很是复杂的学问，但颜色的学问要比编程容易理解的多，由于颜色很贴近生活。并且若是你继续往下看的话，就能知道hsl能够解决问题是多么的强有力

使用hsl表示颜色

要用hsl，先得知道它是怎么表示颜色的呢

理论上讲一个颜色用HSL表示应该是这样的 hsl(#f00, 100, 50%)，这个表示一个饱和度100，明度在中间值不黑不白的红色。

可是这个事实上应该是这样的 hsl(0, 100, 50%)

0？0既然也能表示颜色，这个让人有点匪夷所思。

上边提到牛顿发明了一个叫作色轮的东西，这个东西就是色相。好吧，我再纠正一下，前边说到的颜色并非真正的色相。

准确的说色相环是饱和度为100%，明度为50%的颜色组成的一个颜色环，就像下边这样。能够经过下降三种颜色值让颜色变幻无穷，同时也能够经过改变明度和饱和度让颜色变幻无穷。

并且后者更容易控制颜色的变幻无穷。

色相环只有一个属性就是角度。0度是红色，360度也是红色，蓝色是240度，而色相环的旋转是按照上边的图逆时针转的，饱和度和明度都是经过0到100来表示百分比的。

hsl有什么用呢

要知道用处是什么，就须要知道他是怎么诞生的，hsl诞生是由于使用颜色的人并不关心颜色的值是多少，须要关心的是这个原色的变化。

好比hsl能够很是很是容易的解决变幻无穷的口红颜色的问题。

有女友的人都知道口红的颜色是一个很是恐怖的东西，但使用hsl来理解口红的颜色就很是简单，假如须要粉一些，就把色相到这转30度，须要淡一些，就把明度往高调一些。要暗一些就把颜色往低调一些。

hsl也能够很好的解决设计师配色的问题，一个视觉效果好的网页色不过三，甚至就颇有可能就一种颜色。

若是两种颜色的话，一般是色相环中相差180度的两种颜色，这个叫作互补色。

若是是三种颜色颇有多是色相环的三种相差120度的颜色。

因此即使是两种颜色，或者三种颜色，只须要定一个主色，而后根据颜色来变更就行了。hsl的最大的特色就是变化。还有一点就是即使是不一样的颜色，他们仍然会有相同的明度还有饱和度。

好比下边就是两个明度饱和度相同的互补色，是否是看起来比较协调统一并且还互补呢。

这两个颜色用hsl表示是 hsl(30, 80, 70) 和 hsl(210, 80, 70)，可是用rgb表示的话是#f3c291和#91c2f3。相比较而言hsl能够更加清楚的看出来二者的关系，也能够配合css中的样式预处理器表示。

hsl还有一个做用就是颜色明度或者饱和度变化，表达颜色的不一样状态。

一般表示鼠标hover active等效果的时候会由设计师给出两个不一样的色值，但实际上是两个明度不一样的色值，因此若是使用hsl的话。

hsl模式能够很是轻松的表达一个颜色和其余颜色的变化关系，因此能够一个颜色走天下，固然前提是这个设计师知道如何配色。若是变量定义的足够好，理想状态下，只须要改变主色的值就能让网站全部的颜色发生相应的改变

因此若是一个公司有很是好的设计规范的话，用hsl的效率要远远大于rgb

HSV

除了hsl之外还有使用hsv模式来控制颜色的，和HSL很类似，经过色相 hues，饱和度 saturation 和亮度 brightness 来表达颜色，由于brightness有的地方会叫作value，因此hsv和hsb都是说这个模式。

ps提供了五种表示颜色的方法，分别是HSV，RGB，16进制，CMYK还有Lab。Lab是基于通道的一种模式，开发不会用到的。

hsv和hsl均可以很是好的表示颜色的变化。两者的区别能够在下面的图中很直观的看出来，前者注重明度的变化，后者注重亮度的变化。

有这种模式的缘由是设计师配色主要看重明度，而修图的后期会重视亮度，因此web开发用hsl，ps中用hsv。