色轮
所有颜色都出自三「原色」,红黄蓝。
- 红色 + 黄色 = 橙色
- 红色 + 蓝色 = 紫色
- 蓝色 + 黄色 = 绿色
有三原色两两等量混合而得的橙色、紫色和绿色叫做「间色」。
把三种「间色」和与之相邻的「原色」再等量混合,得到的是六个「复色」。
三个「原色」,三个「间色」,六个「复色」,总共 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 有什么区别?。
色彩的搭配
下面介绍的几种颜色搭配,都是基于上文中的色轮。
内容来自《写给大家看的设计书》。
互补
色轮中相对(即完全对立)的颜色为互补色。
一般一种作为主色,另一种用于强调。
互补色
三色组
红、黄、蓝就是基色三色组。在色轮上以相同方向挪动,指向的其他三种颜色也构成三色组。三种间色构成间色三色组。其他复色也可以组成三色组。
最常见的就是基色三色组。
三色组
分裂互补三色组
从色轮的一边选择一种颜色,再在色轮上找出它对面的互补色,不过并不直接使用这个互补色,而是使用该互补色两侧的颜色。
分裂互补三色组
类似色
类似色组合由色轮上彼此相邻的颜色组成。它们都有相同的基础色。
类似色