色相环、饱和度、亮度基本知识以及色环基本配色方案

在公司做UI设计的过程中，接触了很多关于颜色方面的内容，一直想系统地学习了解关于色相环、饱和度、亮度的基本知识，在学习了一些前辈的知识后，自己重新梳理了一遍，然后制作了总结素材，和大家共同分享。

色相、饱和度、亮度

我们先来看一个大家最熟悉的PS拾色器，R、G、B和#就不用说了，L、a、b不常用，C、M、Y、K应用于印刷行业，我们暂不讨论。在这个位置（蓝色框）有H、S、B，以及他们对应的值。

先看H，这个H代表的就是色相(Hues)。我们把值调成这样，这个竖条就是调整颜色的色相，我们可以看到它有不同的颜色，从下往上看，就是我们熟悉的红、橙、黄、绿、青、蓝、紫，再到红，循环的。取值可以从0°~360°，每一个值对应一个颜色相。说白了就是这个值告诉我们它是什么颜色，红色啊，绿色啊，蓝色啊、黄色啊等等。

然后看S，这个S代表的就是饱和度(Saturation)。就是一个颜色的纯度，比如这里我们选择的是红色，最上面就是最红的，最下面就是最不红的，中间就是深红，浅红，不红。取值是0%~100%。

比如我们这里随便取了一个颜色，RGB(85,149,198)，它对应HSB(206,57,78)。这是一个蓝色系的颜色，然后饱和度只有57%，所以就没那么蓝。

最后看B（嗯……有点怪怪的），这个B代表的就是亮度(Brightness)。指的就是一个颜色的明亮度，越亮就越接近这个颜色本来的色彩，越暗就越黑。

还是刚才的这个颜色，通过竖条我们就可以调节它的亮度，是越黑还是越亮。

OK，基于上面的原理，我做了一些总结和举例说明。

色相环。这里我制作了24色相环，基于红色做的，也就是纯色色相环。就是通过改变H值，然后将得到的颜色排成圆环，任何其他颜色都可以通过这个原理制作出对应的色相环。比如我们工作中就可以把品牌色定为基本色（主色），然后通过色环得到与之相关的其他颜色，以备用。

饱和度

亮度

有了基本的色环，我们就可以得到一些基本的配色方案。

0°基色

15°同类色

下面这些距离基色15°的都属于同类色，基色就是中间那个颜色。

30°类似色

下面这些距离基色30°的都属于类似色。

60°邻近色

90°中差色

120°对比色

180°互补色

分裂互补色

总结一下，颜色的三个属性分别是色相、饱和度、亮度，通过这三个属性值就可以确定一个颜色。确定某个基色后，我们就可以得到色环，在色环上我们就可以得到一些基本的配色方案。

以上就是我个人的一些经验，不足之处还请各位大佬指正。

End。