一、背景和意义

在前端开发中，给页面元素设置颜色是最常见的一个操作之一。如果一个产品需求有UI设计稿，可以在上面拾取颜色编码，但如果有些产品需求没有UI设计稿，就需要前端开发者自己去选择和设置颜色。要是能记住常见的CSS颜色编码，在开发过程中就可以快速写出来，在一定程度上可以提升开发效率。本文将简单介绍一些常见的CSS颜色编码以及记住这些颜色编码的方法。

二、灰度颜色的CSS编码

CSS中最简单和常见的颜色恐怕就是白色和黑色了：

在常用的六位的CSS颜色编码中，前两位表示红色的含量（或者叫成分值），接下来两位表示绿色的含量，最后两位表示蓝色的含量：

红绿蓝全部加满则是白色，红绿蓝全部清零一点颜色都没有时就是黑色。红绿蓝含量相等，但介于0到ff之间，则应该是灰色，且含量越少"灰"的程度也越深：

故黑白灰属于CSS中比较好记的颜色编码。

三、单一颜色的CSS编码

CSS中的三大单一颜色是红绿蓝。如果CSS编码前两位有值而后四位没值（即为0）则表示红色，且含量越高越亮，含量越低越暗：

类似地，中间两位有值其他四位没值则是绿色，同样遵循含量越高越亮，含量越低越暗的规律：

后两位有值前四位没有值则表示蓝色：

三、双重混合色的CSS编码

这里继续进一步列出红绿蓝三色其中两个有值，另外一个没有值（取0）的情况。红绿蓝两两之间混合可以构成另外3种颜色，这就需要记住下面一张图了：

红色与绿色等量混合则是黄色，当红色与绿色保持含量一样，且从小到大逐渐增加时，黄色也是从暗到亮逐渐变化：

如果红色与绿色含量不相等时，红色多一点就是橙色，绿色多一点则是黄绿色：

类似地，红色与蓝色等量混合就是紫色，红色部分多一点就有一些泛红（紫红色），蓝色部分多一点则泛紫（靛色）：

绿色与蓝色混合则是生活中不那么常见的青色：

四、三重混合色的CSS编码

红绿混合是黄色，如果黄色里再掺一些蓝色，会逐渐地泛白：

同样地，蓝色里掺一些黄色，也会逐渐地泛白：

类似地，紫色（即等量红蓝混合）掺绿或者绿色掺紫会逐渐泛白：

青色（即等量蓝绿混合）掺红或者红色掺青也会泛白：

五、颜色的调亮与调暗

在时候确定了某一个颜色是一个差不多合适的颜色，只是如果再亮一点或者再暗一点就好了。这时候只需要将红绿蓝三个颜色的含量乘以一个相同的系数即可。例如，假设#5f9ea0这个颜色感觉还可以，只是想再调亮一点或者调暗一点看看效果，那么将5f、9e、a0三个颜色值分别乘以1.2或者1.4就可以调亮一些，或者分别乘以0.8、0.6就可以调暗一些。但十六进制相乘会比较麻烦，如果用rgb格式做相乘操作有时候还可以用口算大致算一下（差不多就行，不用太准确）。#5f9ea0转换到对应的rgb格式的颜色编码是rgb(95, 158, 160)（在实际开发中，如果一开始就用rgb格式的颜色编码，就不用做转换）。3个颜色值乘以相同系统调亮或调暗的效果如下：