CSS的配色

日常在开发小程序中，客户总是希望你的配色是美的，但是美如何定义，什么是美的，什么又是不美的。在实践中，如果我们用了一个抽象的定义，那么背后就有一个理论作为支撑，然后结合特定的工具，就可以达到美的效果。我们本篇介绍一下CSS配色的理论知识、相关工具的使用。

1 十六进制

十六进制是一种基于16的数字系统，使用十六个不同的符号来表示数值。这些符号包括数字0-9（表示值0到9）和字母A-F（或a-f，表示值10到15）。

十六进制的主要特点

基数16的系统：

在十六进制中，每个数字代表16的幂。例如，十六进制数1A3可以分解为：
$$1\times 16^2+10\times 16^1+3\times 16^0$$
按照十六进制进行计算
$$1\times 256+10\times 16+3\times 1$$
最终计算十进制的结果
$$256+160+3=419$$

2 CSS中的十六进制

在 CSS 中，颜色的十六进制表示法是一种常用的颜色定义方式，它使用十六进制数字来表示颜色的红、绿、蓝（RGB）分量

2.1 十六进制颜色的基本结构

十六进制颜色通常以 # 符号开头，后面跟随六个十六进制数字。每两个数字分别表示红色、绿色和蓝色的强度。格式如下：

#RRGGBB

• RR：红色分量（00 到 FF）
• GG：绿色分量（00 到 FF）
• BB：蓝色分量（00 到 FF）

2.2 十六进制颜色的范围

每个颜色分量的值范围从 00 到 FF，其中：

• 00 表示该颜色分量的强度为 0（无该颜色）
• FF 表示该颜色分量的强度为 255（最大强度）

例如：

• #FF0000 表示纯红色（红色分量为最大，绿色和蓝色分量为 0）
• #00FF00 表示纯绿色
• #0000FF 表示纯蓝色
• #FFFFFF 表示白色（所有分量都为最大）
• #000000 表示黑色（所有分量都为 0）

2.3 简写形式

如果红、绿、蓝三个分量的值都是两个相同的数字，可以使用简写形式。例如：

• #FFCC00 可以简写为 #FC0，表示相同的颜色
• #AABBCC 可以简写为 #ABC

2.4 透明度

在 CSS 中，十六进制颜色也可以包含透明度信息，使用八位十六进制表示法。格式如下：

#RRGGBBAA

AA：表示透明度（00 到 FF），其中 00 表示完全透明，FF 表示完全不透明

3 CSS的命名颜色

除了用十六进制表示外，我们还可以使用命名颜色表示，如：

• 黑色：black
• 白色：white
• 红色：red
• 绿色：green
• 蓝色：blue
• 黄色：yellow
• 青色（水色）：cyan
• 品红色（洋红）：magenta

一共有140种命名颜色，可以去W3C CSS Color Module Level 3 中找到完整的颜色名称列表

4 配色

一个个去看命名颜色未免效率太低，我们可以依据色轮理论搭配出自己想要的颜色来

4.1 色轮

色轮是颜色的视觉表示，通常包括原色（红、黄、蓝）、次色（绿、橙、紫）和三次色（红橙、黄橙、黄绿、蓝绿、蓝紫、红紫）。

4.2 互补色

互补色是色轮上相对的颜色，搭配使用时可以产生强烈的对比效果。例如，红色和绿色、蓝色和橙色。

4.3 类似色

类似色是色轮上相邻的颜色，搭配使用时可以产生和谐的效果。例如，蓝色、蓝绿色和绿色

4.4 配色工具

可以使用在线的配色工具，如Adobe Color来完成配色

按照我们的配色理论，移动取色的球就可以得到互补色或者相邻色，有两条最佳实践：

1. 通常建议使用 2-4 种主要颜色，以保持设计的简洁性和一致性。过多的颜色可能会使设计显得杂乱无章
2. 选择一种主色作为设计的基础，使用辅色来补充主色，并使用点缀色来突出重要元素