编者按：本系列文章适用于热衷于创建易用且美观的网站与应用程序的开发者。 这份设计初学者投喂学习指南，会教你如何运用设计范式，创建属于自己的用户界面（UI）。 你会学习到如何选择颜色(Colors)，并有效利用布局(Layout)与组件(Components)来构建网站与应用程序。 希望你在读完本系列后，能够掌握一些基本的设计原则，从而设计出美观的网站与应用程序。
本文主要介绍色彩相关理论，可以让我们更好地理解色彩，主要涵盖以下核心内容：
- 原色、间色与复色
- 色相与色温
- 饱和度
- 浅色调/深色调/中间调
- 类比色与互补色
- 色彩心理学
- 色彩权重
- 对比度
色彩模式
在介绍色彩的基本概念之前，我们先了解色彩模式(Color Mode)。
在数字图像或图形设计中，色彩模式是用来描述和定义颜色的一种数学模型或系统。它决定了图像可以包含哪些颜色，以及这些颜色是如何通过数值来表示和存储的。
简单来说，色彩模式就是一套表示颜色的规则和方法。不同的色彩模式适用于不同的应用场景，主要是区分屏幕显示（发光）和印刷品（反光/吸光）。
当前，主要的色彩模式如下：
| 色彩模式 | 全称 | 原理 | 主要用途 | 特点/备注 |
|---|---|---|---|---|
| RGB | 红绿蓝 (Red, Green, Blue) | 加色模式 (Additive) - 光线叠加 | 屏幕显示 (网页, App, 视频, UI设计等) | - 色域较广, 适合发光设备。 - 混合为白色。 |
| CMYK | 青品黄黑 (Cyan, Magenta, Yellow, Key/Black) | 减色模式 (Subtractive) - 油墨吸收 | 商业印刷 (书籍, 海报, 宣传册等) | 色域相对较窄, 颜色叠加变暗。混合为深浊色，K用于纯黑。 |
| RYB | 红黄蓝 (Red, Yellow, Blue) | 减色模式 (Subtractive) - 颜料混合 | 传统美术 (绘画), 艺术教育 | 历史悠久的艺术模型, 基于物理颜料混合, 色域相对有限, 非数字/印刷标准。 |
| HSB / HSL | 色相, 饱和度, 亮度 / 明度 (Hue, Saturation, Brightness / Luminance) | 基于人类感知 (Perceptual) | 颜色选择与调整 (设计软件中) | 直观符合人类对颜色的描述方式，非最终输出模式。 |
| 灰度 (Grayscale) | 灰度 | 不同级别的灰，仅包含亮度信息 | 黑白图像, 单色印刷 | 只包含灰色调，文件通常比彩色小。 |
| 位图 (Bitmap) | 位图(Bitmap)/黑白模式 (Black & White) | 只包含两种颜色：纯黑和纯白。 | 主要用于线条图、文字扫描等需要极高对比度的图像 | 最简单的模式，每个像素只有 1 位数据，文件非常小 |
不想看表格，那我们就用前端开发人员小若的日常工作或生活来形象总结一下各色彩模式用在什么地方。
小若主导了一个前端项目，由于没有专业设计师参与，他只能靠工作之余看一本
CMYK模式印刷的彩色书籍里学习设计知识。他首先为自己的网站制作配色方案, 在RGB模式显示器上打开Photoshop，在拾色器面板上他基于HSB模式的拾色器上调试，然后熟练地写下CSS代码。中午吃完午饭休息了，他拿起了那本从京东上购买的关于AI的书籍学习，这本书没有色彩，是Gayscale色彩模式。而在下班之后，小若喜欢在家进入RYB的世界里，用各种颜料绘画作品。
你看，这样就知道了各种色彩模式的使用场景了吧。
原色、间色与复色
原色（Primary Colors）是色彩中不可再分解的基本色。
在用于数字显示屏幕的RGB色彩模式里，原色有三种：红色Red、绿色Green与蓝色Blue：
而在绘画颜料领域里的RYB色彩模式里，原色也有三种：红色Red、黄色Yellow与蓝色Blue：
我们可以发现，RGB 与 RYB 色彩模式的命名都是以三原色英文名称的首字母命名的。
这里，我们着重讲一下RYB色彩模式里的三原色。
我们把原色两两混合，可以得到间色（Secondary Colors） ：
- 红 + 黄 = 橙色Orange
- 黄 + 蓝 = 绿色Green
- 蓝 + 红 = 紫色Violet
构成间色的色轮如下：
在色轮上选用彼此靠近的颜色，有助于营造视觉上的平衡感——即所谓的“色彩和谐”。相反，如果选用色轮上相距较远的颜色，就会打破这种和谐。
混合颜色（调色）也能帮助你构建色轮，以辅助选择互补色和邻近色。
然后，将相邻的原色和间色混合，可以得到复色（Tertiary Colors） ，例如：
- 红 + 橙 = 橙红vermillion 朱红
- 橙 + 黄 = 橙黄amber 琥珀色
- 黄 + 绿 = 黄绿chartreuse 查特酒绿
- 绿 + 蓝 = 蓝绿teal 水鸭色
- 蓝 + 紫 = 蓝紫violet 紫罗兰色
- 紫 + 红 = 品红magenta 洋红
这三种类型的颜色（原色、间色、复色）共同构成了经典的牛顿色环：
牛顿色环的发明者是英国物理学家、数学家、天文学家、自然哲学家和炼金术士艾萨克·牛顿爵士。
这个色环至今仍被用来帮助选择色彩搭配、混合颜色以及构建和谐色彩。因为这个色轮被众多设计师验证过，有助于选择更加和谐的颜色，比通常使用的RGB或HEX选择的颜色更好。
色相(HUE) / 色轮(COLOR WHEEL)
色相就是色彩的基本样貌，是区分不同颜色的基本特征（如红色、黄色、蓝色等），不涉及颜色的明暗或饱和度
色相指的就是我们所选定的特定颜色。
色轮则是由原色、间色和三次色（复色）扩展构成的。
Adobe 提供了一个很棒的色轮工具，你可以在上面选择颜色。
试一试这个工具，你就会发现：
改变色相，本质上就是在色轮上进行旋转操作。
色温（Color temperature）
色温是指色彩的冷暖程度。
参照自然界，色温很容易辨别：红色、橙色和黄色属于暖色，而蓝色、绿色和紫色则属于冷色。通过给颜色添加蓝色或黄色，可以调整其色温。
当冷暖色一起使用时，我们可以帮助用户更好地识别关注的焦点。
暖色总比冷色更能吸引注意力。
饱和度（Saturation）
色彩的饱和度由其纯度决定。加入白色、黑色或灰色都会降低饱和度（使颜色不那么鲜艳）。
例如，一个纯蓝色可能会太过鲜艳刺眼，所以我们常通过添加不同程度的灰度、白色或黑色（也就是调整色彩的色调 Tone、明色调 Tint 和暗色调 Shade）来让颜色达到平衡。 通常建议，在选择颜色时，从（图示的）虚线方框区域内选取。 这个区域内的颜色对多数人而言是视觉安全且舒适的，因为过于饱和的颜色容易给人刺眼或不适感。
亮（明）色调（Tint）
向颜色中添加或减少白色会改变其色调，并因此降低减轻其饱和度。
色调会使颜色变浅，使副文本或描述的重要性降低。
灰色调 （Tone）
向颜色中加入或去除灰色会改变其色调，并因此降低颜色的饱和度。
那些灰色成分更多、饱和度更低的颜色，在视觉上会让人感觉更平静、更舒缓。
暗色调（Shade）
向颜色中加入或去除黑色会改变其暗色调，并因此降低其饱和度。
暗色调会使颜色变深，从而能够产生更强的对比度并提高（视觉）优先级。
选择颜色
无论是构建网站还是应用程序，选用色彩搭配得当都非常关键。要成功挑选出和谐的颜色组合，可以运用一些诀窍。
我们可以利用色轮，并采用下列配色方法，来找出彼此协调、效果良好的颜色组合（通常涉及原色与二次色及其互补色）
- 单色组合 (Monochromatic colors): 基于单一色相的不同色调、明暗和饱和度。
- 类似色组合 (Analogous colors): 色轮上相邻的颜色。
- 三色组合 (Triadic colors): 色轮上等距分布的三种颜色。
- 四色组合/矩形配色 (Tetradic colors / Double complementary): 由两对互补色组成的四种颜色。
- 类似色与互补色组合 (Analogous complementary colors): 类似色组加上其中主色的互补色。
单色组合 (Monochromatic colors)
运用单一的基础色，并通过混合其明色调（Tint加白）、灰调（Tone加灰）和暗色调（Shade加黑），你就可以生成多种色彩变体。
这些不同的色彩在饱和度上会有所差异。 其中，颜色较深的（暗色调）适合用作标题和按钮（以突出重点），而颜色较浅的（明色调）则适合用作背景和边框（以提供衬托或区隔）
类似色组合 (Analogous colors)
要想选出搭配起来效果不错的多种颜色，诀窍是选择色轮上紧挨着主色的颜色（即类似色）。 比如，绿色在色轮上的“邻居”就有蓝色和黄绿色（Chartreuse）。
运用这种方法，我们就能得到三种类似色，可以灵活地在设计中进行组合与搭配。
互补色组合 (Complementary colors)
作为替代方案，我们可以选择两种能够良好搭配的颜色，方法是找到它们在色轮上的“对家”（即互补色）。这些互补色就位于色轮直径的两端，彼此正对。 比如蓝色配橙色、红色配绿色，就是典型的互补色组合。 选定基础互补色后，我们还可以进一步调整它们的明暗度（通过明色调/暗色调）和饱和度（通过灰调），来丰富和完善最终的配色方案。
三色组合 (Triadic colors)
若想选出三种对比鲜明的颜色，可以采用三色组（Triadic）配色方案，也就是在色轮上选取构成（通常是等边）三角形的三个颜色。 在选出的这三种颜色中，通常会确定两种作为设计中的主色调，而剩下的一种则作为次要色，经常用于背景区域。
什么是色彩心理学？
颜色根据其用法和搭配方式会传达不同的含义。这就是为什么警报信息通常用红色显示，而确认按钮则用绿色。
了解不同颜色的含义，有助于你选用最贴切的色彩来传达预设信息，从而打造出更优秀的网站和应用程序。
背景颜色的选择，对于用户如何感知网站的权威感也扮演着关键角色。
诸如绿色、黄色、粉色等鲜艳色彩能为网站注入更年轻活泼的气息；相比之下，深蓝色和黑色则更容易营造出商务化或企业化的感觉。
| 颜色名称 | 传递信息关键词 |
|---|---|
| 红色 (Red) | 危险，强大，重要 |
| 橙红色 (Vermillion) | 警告，友好，成功 |
| 橙色 (Orange) | 强调，乐趣，表达 |
| 黄橙色 (Amber) | 友好，动感，吸引 |
| 黄色 (Yellow) | 突出，积极，活力 |
| 黄绿色 (chartreuse) | 信息，积极，教育 |
| 绿色 (Green) | 安全，稳定，平衡 |
| 青色/蓝绿色 (Teal) | 细节，沟通，信任 |
| 蓝色 (Blue) | 可靠，财务，忠诚 |
| 靛蓝 (Violet) | 启发，神秘，创意 |
| 紫色 (Purple) | 勇气，高贵，奢华 |
| 品红/紫红色 (Magenta) | 创造力，想象力，年轻 |
如何使用色彩权重？
就像字体有粗细之分，颜色也可以设定不同的“权重”或“色阶”，理想的数值范围通常是从 100、200… 一直延续到 700、800。 数值越低，表示颜色越浅（更接近白色，即增加了明色调/tint）；数值越高，则表示颜色越深（更接近黑色，即增加了暗色调/shade）。
为网站挑选颜色时，预先定义好这些不同的颜色权重（色阶）非常重要，这些定义将成为后续样式指南的基础。
定义好的颜色权重可以被引用，用于指定标题、背景、按钮以及悬停状态等不同元素的具体颜色。
当切换到深色模式（Dark Mode）时，通常意味着要将这些权重的应用顺序颠倒过来，比如，原先在浅色模式下使用 100（最浅）的地方，在深色模式下可能会对应使用 800（较深）的颜色。
当切换到深色模式（Dark Mode）时，通常意味着要将这些权重的应用顺序颠倒过来，比如，原先在浅色模式下使用 100（最浅）的地方，在深色模式下可能会对应使用 800（较深）的颜色。
使用颜色对比
在不同组件之间使用恰当的对比度，可确保它们清晰可见。
对比度可以通过调整单一颜色的不透明度和（颜色）权重来实现。应避免使用过于接近的（不透明度或权重）值。
对比也可以产生于两种不同颜色之间，以及它们如何并置（搭配）。应选用那些搭配使用时易于区分的颜色组合。
有一个检查网站对比度是否足够的小技巧：以灰度模式查看网站。
Web 可访问性与对比度
《Web 内容可访问性指南》（WCAG）2.0 提供了最佳实践指导，旨在确保前景文字与背景色之间有足够的对比度。这是通过一个具体的对比度比率标准来实现的。所需达到的比率值会根据相关文本的字号大小和字体粗细（字重）而有所不同。
两种颜色之间的亮度差异用一个比率来表示，这个比率的范围从 1:1（能达到的最低对比度，比如白底配白字）一直到 21:1（能达到的最高对比度，比如白底配黑字，或者反过来黑底配白字）。
通常，WCAG 设立的最低对比度比率标准为 4.5:1。
总结
本文主要介绍了色彩相关的理论知识，如果对你有帮助，请用您发财的小手加个关注，给个赞。
下篇我会结合tailwind CSS 4.0 版本来介绍CSS 色彩方案的设计。
