I/O Lab
UI/UXSectionsIndex
人机交互工程站在科技与人文的交叉口，旨在为每个人打造更完美的工具。
分享者: 王砚渤联系邮箱更多课程安排和内容正在准备中...
§色彩基础
计算机选手对配色可能不是很熟悉，但是我们可以很容易理解色彩的基本原理。
色彩的基本要素
色彩的基本要素是色相、饱和度和明度*。
色相是颜色的基本属性，粗浅地讲它是颜色的名称，比如红色、蓝色、绿色等等。
饱和度是指颜色的纯度，饱和度越高，颜色越纯，越接近于纯色。
明度是指颜色的明亮程度，明度越高，颜色越亮，越接近于白色。
对比度是指两种颜色之间的差异程度，对比度越高，颜色之间的差异越大，越容易被区分。
差异可以是色相、饱和度和明度的差异。除了颜色以外，对比度也可以是形状、大小、纹理、亮度、运动等等。
显而易见，对比度越高，颜色之间的区分度越高，对于视觉系统来说，越容易被区分识别。
§色彩空间
色彩空间是色彩的数学表示，它是色彩的三个基本要素的组合，比如 RGB、CMYK、HSL、HSB 等等。
* 明度并不等于亮度，亮度是指光线的强弱，而明度是指颜色的明亮程度。由于人眼对光强的感受不是线性的，所以二者并不相同。 这在发光的屏幕上会体现出明显的差异。
RGB/CMYK
RGB 即红绿蓝，是光三原色的组合，它是最常见的色彩空间，也是屏幕上最常见的像素组成。
CMYK 即青（Cyan），品红（Magenta），黄（Yellow），黑（Black）， 是印刷中常见的色彩空间，它是四种颜色的组合。
以上两种色彩都可以与实际的物理结构对应起来，RGB 是三种光的组合，CMYK 是四种墨水的组合。
HSL/HSB
HSL 即色相（Hue），饱和度（Saturation），明度（Lightness），是一种基于色相的色彩空间。 色相取值范围为 0-359（超出则循环），也叫做色相环。而饱和度和明度的取值范围都是 0~1。
HSB(aka. HSV) 则将亮度（Brightness）作为第三个要素，更加贴合人眼对颜色明亮程度的直观感知。
色彩空间的拓展与映射
色彩空间是实际上可以表示的色彩，它们通常是肉眼可区分色彩（马蹄形色彩空间）的子集，但部色彩空间可以超出（即被浪费）。
在实际应用场景下，我们通常需要将色彩空间映射到另一个色彩空间，比如将 RGB 映射到 CMYK，或者将 HSL 映射到 RGB。 然而这个过程在一些糟糕的系统实现中是相当不可靠的（如 Windows 的默认色彩管理，Android 的 OEM 色彩管理，过时的 Linux 桌面环境）。
色彩空间的映射涉及到多个层级：原始色彩的配置，应用的色彩空间，系统管理的色彩空间，以及硬件的显示器固件配置的色彩空间等等。 为了减少在创建和修订过程中就掺入巨大色差，我们应该至少在自己的工具软件和整套设备中尽可能做好色彩管理。
在一些情况下，我们可以获得接口或者是利用平台的特性去实现定制化的色彩管理。
§色彩搭配的常见模式
色彩搭配的常见模式有：互补色搭配，三角色搭配，分割色搭配，类似色搭配，中性色搭配，单色搭配。
互补色搭配是指两个色相相反的颜色，即色相环中相对的颜色，比如红色和绿色，蓝色和橙色，紫色和黄色。 互补色搭配的色彩对比度很强，但是由于色相相反，所以在视觉上会产生一种不和谐的感觉。
三角色即是在色相环上以120度为间隔取三个颜色。 相比互补色，三角色之间的色相差异更小，所以感觉更加和谐。
通常我们还会根据取到的色相设定不同的饱和度与亮度，形成一系列色彩组合。
分割色是选取一个颜色，在色相环上找到与之相对的点，并以这个点作为中心对称取色。 这样就得到了一个主要颜色和两个与之形成对比的颜色（色相）。
中性色指的是灰度颜色和相近的颜色。它们很容易和任何颜色搭配而不产生色彩冲突。
类似色则是在色相环上相邻的颜色，而单色则是在色相环上相同的颜色。它们都是和谐的搭配，但对比效果弱 容易感觉乏味。