本文是博主在阅读了《CSS权威指南（第三版）》相关内容后心血来潮所写，主要内容和脉络来自原书，部分内容被我删减，部分内容添加了我的解释。本文主要目的在于巩固博主所学、帮助新手认识CSS颜色的表示方法。

总体结构是先介绍了CSS中用命名颜色表示颜色的方法，再介绍了用RGB指示颜色的方法，其中函数式表示有两种（一为百分数记法，二为整数三元组记法），十六进制记法有两种（一为全写，二为简写），最后用表格的形式汇总了17种基本命名颜色的相关信息。

本文如有侵权，请联系我删除；本文如有笔误或错误，请不吝赐教。

命名颜色(named-color)

命名颜色是指可以直接按颜色的名字指代颜色的颜色，如red、blue、white。能直接使用red等命名颜色关键字表示颜色是通过CSS预定义完成的。这类 似于提前将一个标识符定义为一个常量值，使用该标识符就相当于使用该标识符代表的常量。在这里，命名颜色关键字相当于对应颜色值的标识符或别名。

诸如red这样已经定义的合法的命名颜色关键字很少。CSS1仅包含HTML4.0中定义和支持的16种基本颜色，CSS2在这16种颜色的基础上添加了orange ，CSS3又添加了很多颜色名，算上先前的17种颜色，命名颜色约有150种。

简单的示例：假如你想将h1~h4级标题依次设置为红、橙、黄、绿四种颜色，你可以像下面的代码一样使用命名颜色。

h1 {color: red;}
h2 {color: orange;}
h3 {color: yellow;}
h4 {color: green;}

直接使用命名颜色表示颜色是很方便的，但是命名颜色不能够包含所有的颜色。如果这些命名颜色都不符合你的需求，那么可以使用下面的方法精确地指定你所需要的颜色。

用RGB指定颜色

计算机通过组合不同的红色、绿色和蓝色分量来创造颜色，这种组合通常称为RGB颜色。你可以由你来确定如何混合红、绿、蓝三种分量，创造你想要的颜色。控制三个分量的方式有4种。

函数式RGB颜色

有种颜色值类型使用函数式RGB记法，一般语法都是rgb(color)，其中color用一个百分数或整数三元组表示。

/*百分数记法*/
h1 {color: rgb(20%,20%,40%);}
/*整数三元组记法*/
h1 {color: rgb(51,51,102);}

如果使用百分数记法表示颜色，那么百分数的数值范围是0%~100%。如果使用整数三元组记法，那么整数的数值范围是0~255。

在百分数记法中，百分号前的数字可以取小数，但是有的用户代理会忽略小数点，其会将该小数四舍五入为整数处理。在整数三元组中只能使用整数。

无论是百分数记法还是整数三元组记法，如果值超出了上述的取值范围，就会“剪裁”到最近的范围边界。

换句话说，如果百分数记法中的数值大于100%就会剪裁到100%，小于0%就会剪裁到0%；如果整数三元组中的整数大于255就会剪裁到255，小于0就会剪裁到0。

h1 {color: rgb(-5%,50%,500%);}  /* 实际效果：h1 {color: rgb(0%,50%,100%);} */
h1 {color: rgb(-5,50,500);}     /* 实际效果：h1 {color: rgb(0,50,100);} */

怎么将百分数记法与整数三元组记法相互转换？由百分数变为整数，可以将百分数乘255后四舍五入取整；由整数变为百分数则反过来，将整数除以255再乘100%即可。

一般来说，整数三元组记法更加常用。

十六进制RGB颜色

整数三元组记法中整数的范围是0~255，可用一个二位十六进制数表示(00~FF)，若将表示红绿蓝三个分量的三个十进制整数均转换为二位十六进制数，再将这三个十六进制数连接起来，即可设置一种颜色，这就是颜色的十六进制记法。十六进制记法与整数三元组记法在数学上是完全等价的。

十六进制记法的一般语法是#RRGGBB。这三个数之间没有任何分隔符，字母大写或小写都可以，不过要注意最前面的#号。

十六进制记法有一种简写。如果十六进制记法中两个R、两个G、两个B分别相同，则可以简写为#RGB，如#88AAFF可简写为#8AF，#123等价于#112233。但是#808080这样的RR=GG=BB形式是不可以简写的。

基本颜色汇总

参考文章：原文链接​