目录
- 1 十六进制
- 2 CSS中的十六进制
- 2.1 十六进制颜色的基本结构
- 2.2 十六进制颜色的范围
- 2.3 简写形式
- 2.4 透明度
- 3 CSS的命名颜色
- 4 配色
- 4.1 色轮
- 4.2 互补色
- 4.3 类似色
- 4.4 配色工具
日常在开发小程序中，客户总是希望你的配色是美的，但是美如何定义，什么是美的，什么又是不美的。在实践中，如果我们用了一个抽象的定义，那么背后就有一个理论作为支撑，然后结合特定的工具，就可以达到美的效果。我们本篇介绍一下CSS配色的理论知识、相关工具的使用。
1 十六进制
十六进制是一种基于16的数字系统，使用十六个不同的符号来表示数值。这些符号包括数字0-9（表示值0到9）和字母A-F（或a-f，表示值10到15）。
十六进制的主要特点
基数16的系统：
在十六进制中，每个数字代表16的幂。例如，十六进制数1A3可以分解为：
1
×
1
6
2
+
10
×
1
6
1
+
3
×
1
6
0
1 \times 16^2 + 10 \times 16^1 + 3 \times 16^0
1×162+10×161+3×160
按照十六进制进行计算
1
×
256
+
10
×
16
+
3
×
1
1 \times 256 + 10 \times 16 + 3 \times 1
1×256+10×16+3×1
最终计算十进制的结果
256
+
160
+
3
=
419
256 + 160 + 3 = 419
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来完成配色
按照我们的配色理论，移动取色的球就可以得到互补色或者相邻色，有两条最佳实践：
- 通常建议使用 2-4 种主要颜色，以保持设计的简洁性和一致性。过多的颜色可能会使设计显得杂乱无章
- 选择一种主色作为设计的基础，使用辅色来补充主色，并使用点缀色来突出重要元素
