参考：UI 设计知识库
成功的色彩
色彩是由「色相」、「饱和度」以及「明度」三种要素组成
色相
俗称颜色，即每种色彩的相貌、名称，如红、橘红、翠绿、湖蓝，群青等等。色相是区分色彩的主要依据，是色彩的最大特征。
12色环
完整色环
饱和度（纯度）
饱和度是指色彩的鲜艳程度，即各色彩中包含的单种标准色成分的多少，也称色彩的纯度。越是纯的颜色，饱和度越高。饱和度降低，则颜色越灰（越脏）；
我们可以通过在颜色中增加灰色来降低颜色的饱和度；
不同色相所能达到的纯度是不同的，其中红色纯度最高，绿色纯度相对低些，其余色相居中，同时明度也不相同。
明度
明度是指色彩的明暗程度。色彩的明度包括两个方面：一、某一色相的深浅变化，如粉红、大红、深红，都是红，但是一种比一种深。二是指不同色相间存在的明度差别，如六标准色中黄最浅，紫最深，橙和绿、红和蓝处于相近的明度之间。
明度
人们常说的把颜色调亮一点，就是指增加明度；颜色深一点，就是指降低明度
三原色
还记得上小学三年级的美术课上，美术老师讲三原色有两种，一种是光的三原色，一种是颜料三原色
区别在于，光的三原色混合在一起，得到白色
而颜料三原色混合在一起，得到黑色，所以如果黑色染料用完了，不用专门去买黑色染料，只要拿三种原色混合就可以得到黑色
哈哈哈哈哈哈哈
正经。。。。
光的三原色就是RGB，分别是红（Red）、绿（Green）、蓝（Blue）
颜料三原色是CMY，分别是青（Cyan）、洋红（Magenta）以及黄色（Yellow）
三原色
虽然上面提到颜料三原色混合可以得到黑色，但是由于完美无杂质的颜料是不存在的，所以通过混合颜料无法得出纯粹的黑色，因此在印刷品中又加入了黑色（Black），和CMY共同组成 CMYK四个印刷用的颜色。
PS：我很好奇，为什么CMY都取首字母，到了黑色，偏偏区最后一个字母？
试想一下，我们该如何通过调整RGB和CMYK的数值，来让某个颜色更“亮”一些，或者更“深”一些？
GRB & CMKY的位置
由于这两种色彩系统都是通过原色的混合组成颜色，这导致我们不可能在保证色相不变的情况下通过数值来调整颜色的饱和度和明度，只要我稍微调整其中某一个数值，色相立刻会发生改变
栗子1
如：调整RGB中的绿色，从81调整到160
结论1：可以发现 颜色的色相、饱和度发生了变化，明度不变。
栗子2
把绿色调整到200
结论2：色相、饱和度、明度都发生了变化
大总结
在RGB、CMYK中，完全无法通过调整数值来精准调整色相、饱和度、明度
那么问题来了，我们为什么了解RGB和CMYK？仅仅是为了了解色彩的显示原理。如：
显示器是由红、绿、蓝三色组成
在彩色印刷时，起码需要四种颜色的墨水
可对我们而言，知道这些显然没有卵用
我们只需要知道如何调整颜色，以及把十六进制的色值记下来，日后在工作中告诉开发即可
什么？你还不知道什么叫十六进制的色值？
既然你诚心诚意的问了
十六进制色值由6位字母和数字组成（字母不区分大小写），在PS以中的位置如下
十六进制的位置
HSB
既然我们数值的配色方法是基于「色相」、「饱和度」以及「明度」，那么我们需要一套能和这三种属性一一对应的色彩系统
即 HSB，H(hues)表示色相，S(saturation)表示饱和度，B（brightness）表示明度
对我们而言，HSB是最理想的色彩系统
HSB的位置
上图中的彩条，就是色相
在设计软件中，色相的范围在0~360之间，这不难理解，因为色相环是个圆，这个所以有360°不同的色相
我们看到的彩条，可看做被掰直的色相环
改变H的数值即可更改色相，如果想微调色相，只要简单调整数值即可。饱和度在0~100之间，数值越大纯度越高，反之则越低。
以#7ED321为🌰
目前饱和度 S 为84
我们将 S 分别调整为0和100，颜色的变化如下
调整饱和度
选色的点呈水平移动
当饱和度为0时，原本的绿已消失殆尽，变成灰色，当饱和度为100时，绿色最纯
明度也在0~100之间，数值越大颜色越亮，反之越暗
调整明度
选色的点呈垂直移动，当饱和度为100时，绿色最亮
当明度为0时，绿色消失，变为纯黑色#000000
总结：
如果你开始使用HSB的色彩系统，你会发现，调色变得越来越轻松，想让橙色再黄一点？那就稍微增大H的数值，想让饱和度降低？那就调低S的数值
你再也不用拿鼠标在色盘上进行不精准的操作，通常你以为你已经细微的调整了取色点的位置，实际上压根没有变化，或者不是朝着你希望的方向进行移动
冷暖色
色彩的冷暖是配色的重要概念，色彩的冷暖对色彩情感的表达有决定性的作用。
冷暖色
暖色有积极、热情、扩张的情绪效果；冷色有消极、冷静、收缩的 情绪效果。
最强烈的暖色是红、黄，最强烈的冷色是蓝、青。
PS：纯绿和纯紫一般认为没有冷暖倾向。
如：黄绿色和淡紫色与粉红对比显示出冷色的感觉，与淡蓝色对比显示出暖色的感觉。
黄绿色与淡紫色
色彩膨胀
不同的颜色在视觉上有不同的面积倾向，鲜艳的暖色有膨胀的视觉倾向，看起来比实际大小相同的暗淡的冷色面积要更大，这就是色彩的膨胀效应。
三个小球
黄色圆看起来会比黑色、深蓝色圆更有扩张感，面积更大，而黑色圆看起最小
总结：
明度越高，饱和度越高，越接近暖色越有膨胀感，看起来面积越大。
明度越低，饱和度越低，越接近冷色越有收缩感，看起来面积越小。
这意味着在设计图表，尤其是类似于饼状图的时候要注意颜色膨胀性对表示准确性的影响
是不是黄色看上去更大更明显
配色理论
配色的目的在于让画面产生对比或者调和的效果
对比能增加画面的丰富度和视觉吸引力，画面突出重点；而调和则能让画面在视觉上更舒适，浏览起来更轻松愉悦。
一般过程
1.确定配色范围 2.确定主色、辅色、强调色 3.色彩配比
配色范围：人视觉观察画面是有局限性的，不会一眼看到所有内容，所以有层次的画面需要分层次进行配色，一般而言即是确定是为前景的配色还是为背景配色，确定一个对象配色之后再以此考虑另一部分的配色，这样能便于调整保证整体的协调
主色、辅色、强调色：主色是画面整体的色彩基调，强调色是画面最重要的部分，如果是单色调设计只需要主色和强调色，而辅色通常是作用是与主色配合增加画面对比度和空间感。所以主色与强调色之间一般都有强烈对比，辅色如果也是与主色对比的话，对比程度不应该强过主色与强调色之间的对比。
色彩配比：一个对象的配色中色彩的数量一般需要控制在 3~4 类以下。
色彩配比
PS:这里说的类指定是一定范围内的颜色，比如同色相，明度相差不大的一组颜色只算作一类
一类色
配色的基本思想是色彩的需要变化，不一定是色相层次的变化，还可以是明度、饱和度层次的变化。
而色彩面积的方向性的变化对画面有决定性作用：面积最大的主色，比主色面积小的辅色，然后是更小的第二辅色，最后是面积最小的点缀色（强调色）
各种颜色面积的比例无需精确调制，一般只需明确 主色 ≥ 辅色 + 强调色 即可。所以常用的主色、辅色、强调色比是 4:3:1，主色 = 辅色+ 强调色。
网友评论