艾萨克·牛顿|B端设计 | 设计师必须了解的色彩系统搭建( 二 ) 色调|饱和度|设计|颜色|Color|色

文章图片
当我们把色调、饱和度、色值、色温结合起来时，我们发现最初的12种颜色中的每一种都有无数的变化。
1.3 色彩调和（Color Harmonies）
那么我们该怎么组合这些色，使颜色使用变得平衡呢？这里有一些常见的方式去组合颜色，也就是我们俗称的配色或色彩调和（Color Harmonies）。
单色（Monochromatic Colors）：我们只要选取一个颜色，并调整明度和饱和度来创建。
互补色（Complementary Color）：这个方案是从色轮的两侧选取两种颜色，也就是色环上对立的180度的两个色。这种配色适合创造强烈的对比的配色。
分散互补色搭配（Split-Complementary Color）：这个方案是选用了互补色的两个邻居颜色。这样既适合创造强烈的对比配色，又让我们多了一个色调的选择。
三角对立配色（Triadic colors）：如果要寻找三种互相平衡的颜色，可以选择12色的色轮上任意三个三角对立的颜色。这样可以组合出大胆而充满活力的颜色。
矩形配色模式(Tetradic Color Scheme)：矩形配色是由两组互补色所构成,通常具有五光十色的缤纷感,但至少有一种主色来突显效果。
邻近色（Analogous Color ）：相似色是指以色相环上邻近的2-4个颜色组成，我们称之为近似色。是最常使用的和谐颜色。

文章图片
角度配色：
同类色：色环角度相距 30° 以内的颜色。这种颜色构成的画面给人一种和谐、统一、高级的感觉，比单色搭配又了一分生动。
近似色：色环角度相距 30°-90° 的颜色。近似色既可以适度色彩对比，又可以协调统一，色彩生动又不失和谐。
对比色：色环角度相距 120°-180° 的颜色。对比色能表达强烈的视觉情感，带来较大的视觉冲击力。
互补色：色环上相对的颜色，也就是色环相距 180° 的颜色为互补色。互补色是色彩对比最为强烈的两个颜色。

文章图片
1.4 配色网站推荐
1.4.1 一键配色：

Paletton
Muzli Colors
Color space
Adobe color

1.4.2 渐变色生成：

Uigradients
Webgradients

1.4.3 色彩灵感

Nipponcolors 日式配色
Brand Colors 所有品牌配色（建议再看品牌搜官网，分析大牌拼色主色和网站主色区别和联系）
Material Colors
Apple Colors
Fluent Colors

1.4.4 图片颜色提取
EagleApp（建议设计师拥有的图片采集工具，储存最好链接iCloud）
二、HSB的概念 2.1 HSB的定义
直接引用百度（这次百度讲的比wiki轻量易懂）的定义：

HSB色彩模式即色度/色调（Hue）、饱和度（Saturation）、亮度（Brightness）。它采用颜色的三属性来表色，即将颜色三属性进行量化，饱和度和亮度以百分比值（0%-100%）表示，色度以角度（0°-360°）表示。HSB色彩模式以人类对颜色的感觉为基础，描述了颜色的三种基本特性。

通过上文色彩理论得知，将组成色彩的四要素改变为HSB的三要素即可，下面我们逐一整合。
2.2 色调（Hue）
H-表示色调，即颜色的相貌，颜色的调性，在色轮上，色相是按位置度量的，取值在0—360度之间（黑色与白色无色相）。这个与色彩理论的色轮是相同的，当我们把色轮展开，就会出现设计软件内拾色器的色相调整带了。