色彩篇01 | 什么是色？初窥色彩之门

我们接触这个世界最直接的方式就是通过眼睛来“看”。

前言：

色彩篇1-5全篇，没看过的之前的可以点击传送门：
色彩篇01 | 什么是色？初窥色彩之门
色彩篇02 | 2分钟读懂高大上的色相环
色彩篇03 | 两色搭配！简单有效的邻近色
色彩篇04 | 升级技能！实用有节奏的间隔色！
色彩篇05 | 终极必杀技！激烈的对比色

毕竟我们接触这个世界最直接的方式就是通过眼睛来“看”。

而我们眼睛能看到的可见光就构成了绚丽多彩的色彩。

然而我们跟它相处了这么久，却从来没有好好的了解过它。

黄色的沙发想要添加一个靠垫，应该用什么颜色？

穿了件蓝色的上衣应该搭配什么样的裙子和包包？

被指定红色的页面应该怎么进行配色？

这一期教程我们就来真正的认识一下色彩。

01

要想灵活的使用色彩、那我们就得先从了解它开始。

不同的色彩千姿百态，都离不开色彩的三个属性，它需要我们理解和牢记它。

分别是：

① 色相：H（Hue）——颜色的相貌

如果你把颜色拟人化，或许你能够更容易去理解和记忆色相的含义。

每个人有不同的相貌，每种色彩也有不同的相貌。

我们普通人看一个东西，例如衣服：

我们会说这两件衣服颜色不一样，左边是蓝色；右边是红色的。

但是专业的说法、在做设计中，我们通常会用更为专业的名称——色相；来替代——“这两件衣服色相不同”

色相是颜色的另一种说法，属于专业术语，但颜色会在我们口语中经常出现。

image.png

② 纯度/饱和度：S（Saturation）——颜色的纯净度

把颜色比喻做水，掺入不同的颜色，它就会发生变化，掺入越多它本身的纯度就越低。

image.png

当红色降低了50%的饱和度（如上图所示）

image.png

当红色降低了100%的饱和度之后它变成了无颜色的——白色。（黑白灰属于无彩色）

也就是说当一张图彩色的图片，我们把它的饱和度降低到0的时候，它就会变成黑白的图片。

彩色原图 ↑

降低保护度为0——成为黑白图片 ↑

③ 明度：B（Brightness）—— 颜色的明暗度

还是拿红色举例

image.png

100%纯度的红 ↑

image.png

降低了50%明度的红（变成了深红色） ↑

image.png

降低了100%明度的红（变成了纯黑色）

再看一下明度对普通彩色图片的变化：

正常明度的彩色图片 ↑

降低50%明度的图片 ↑

提高50%明度的图片 ↑

其实也就是说，当一张图片，你提高和降低明度相当于就是加入白色或黑色，当你明度提高100%的时候，它就变成了纯白色，当你明度降低100%的时候它就变成了黑色。

image.png

02

色相、饱和度、明度，这三个属性都是相互影响和相互作用的。