前端解读:css颜色的六种表示方法 css颜色写法

制作丰富多彩的前端网页要不断与颜色打交道，虽然不要求我们像设计师一样对颜色那么敏感，但也要至少了解一下颜色的知识。所有的颜色都是由三种颜色按照不同的比例合成产生，这也就是三原色原理。

如果你能理解三原色原理，下面对颜色的定义也会更容易理解。

css中对颜色的表示法 主要有颜色名、十六进制、RGB和RGBA、HSL和HSLA。下面分别对几种方法进行讲解。

一、颜色名

所有的浏览器都支持颜色名。HTML 和 CSS 颜色规范中定义了 147 中颜色名（17 种标准颜色加 130 种其他颜色）。这种表示方法很直观，但毕竟颜色不多，名字也不好记。所以也就常用的颜色会使用一下。下面列出的是17种标准颜色。

二、十六进制表示法

仔细观察十六进制和对应的颜色，是否发现了什么？没错，前两个字母表示的是红通道，中间两个是绿通道，后两位是蓝通道。还是利用三基色原理生成各种颜色。

三、RGB和RGBA

RGB的工作方式与十六进制值类似。只是用数字0~255而不是十六进制数字来定义红、绿和蓝色通道。

rgb(255,0,0)等同于#ff0000;

rgb(0,255,0)等同于#00ff00;

rgb(0,0,255)等同于#0000ff;

十六进制的ff转换成十进制是多少，不会计算的自行百度。计算的结果就是255。

这下明白吧，从十六进制转换成rgb形式，不用借助工具也可以直接计算了。

RGBA在RGB的基础上 ，加入了第四个值。它用来指定alpha通道或者颜色的不透明度，值范围是0~1；0是完全透明，1是完全不透明。

四、HSL和HSLA

HSL是色调（H）、饱和度（S）和亮度（L）的首字母缩写。它是定义颜色的另一种方式。对此很多人有共鸣，特别是习惯用图形编辑器的设计师们。其语法如下：

hsl(0,100%,50%) 等同于#ff0000；

hsl(0,0%,100%) 等同于#ffffff;

第一个值：色调。取值范围是0~360。这基本上是一个标准色轮里的一个点。

第二个值：饱和度。它指颜色的鲜艳程度（纯度），取值范围是0~100%；100%是颜色全彩色，0%是灰度。

第三个值：亮度。它指颜色的明亮度，取值范围是0~100%。100%是完全亮/白，0%是完全暗/黑。

HSL在很多方面都是有意义的。例如，你可以选择互补的红色阴影搭配前面的红色，只要通过改变亮度，像这样：

HLSA的工作方式与RGBA一样，你只需要对现有的颜色添加alpha通道值即可。例如hsla(0,100%,50%,0.5)，它的结果是50%透明的全红。

另外也完全不用担心浏览器兼容问题，这几种表示方式几乎兼容所有主流浏览器。

五、总结

了解颜色的产生的原理以及存储方式后，css颜色定义并不复杂，合理在网页上使用颜色，能够为你的网站增色不少哦。最后推荐一下w3cschool里面的颜色在线选择工具，几种表示方法可以相互转换。

我是竹风，专职前端开发，分享经验。欢迎订阅，共同学习交流。