色轮

所有颜色都出自三「原色」,红黄蓝。

  • 红色 + 黄色 = 橙色
  • 红色 + 蓝色 = 紫色
  • 蓝色 + 黄色 = 绿色

有三原色两两等量混合而得的橙色、紫色和绿色叫做「间色」。

把三种「间色」和与之相邻的「原色」再等量混合,得到的是六个「复色」。

三个「原色」,三个「间色」,六个「复色」,总共 12 种颜色,构成色轮。

色轮

色轮

HSV

内容主要源自 Where to begin when trying to level up your colour game?

三个属性分别是

  • 色相 Hue
  • 饱和度 Saturation
  • 明度 Value

Hue,色相,代表什么颜色,色轮上 12 种颜色,就是 12 种色相。

Saturation,饱和度,或者是「色度」,「彩度」,是指某个色相的强度,例如对于红色,这个指来代表到底有多红。饱和度越高,颜色会越鲜艳。

饱和度

饱和度

Value,明度,或者叫「亮度」。往一个颜色里加白色,它的明度就提高,如果加入黑色,明度就降低。所以它的两个极端就是白色和黑色。

明度

明度

有时候降低饱和度,跟调整明度的效果可能有点像。调整明度的极限是白色或黑色,饱和度虽然跟明度没关系,但是降低饱和度的极限是黑白灰这种没有饱和度的颜色,再两者通往极限的道路上,有可能有些色彩在人眼看来都像是变淡了。

饱和度的变化:

调整饱和度

调整饱和度

明度的变化:

调整明度

调整明度

还有两种常见的模型,分别是 HSB 和 HSL。HSB 和 HSV 是一样的,B 所代表的 Brightness 和上面描述的 Value 所表示的含义是相同的。而在 HSL 中,H 还是那个 H,S(Saturation 饱和度)跟 HSV 中的 S 不一样了,L(Lightness)跟 HSV 中的 V 也不同,虽然中文都是「亮度」或者「明度」,具体参考 色彩空间中的 HSL、HSV、HSB 有什么区别?

色彩的搭配

下面介绍的几种颜色搭配,都是基于上文中的色轮。

内容来自《写给大家看的设计书》

互补

色轮中相对(即完全对立)的颜色为互补色。

一般一种作为主色,另一种用于强调。

互补色

互补色

三色组

红、黄、蓝就是基色三色组。在色轮上以相同方向挪动,指向的其他三种颜色也构成三色组。三种间色构成间色三色组。其他复色也可以组成三色组。

最常见的就是基色三色组。

三色组

三色组

分裂互补三色组

从色轮的一边选择一种颜色,再在色轮上找出它对面的互补色,不过并不直接使用这个互补色,而是使用该互补色两侧的颜色。

分裂互补三色组

分裂互补三色组

类似色

类似色组合由色轮上彼此相邻的颜色组成。它们都有相同的基础色。

类似色

类似色