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

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

paste image

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

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

一、颜色名

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

paste image

二、十六进制表示法

paste image

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

三、RGB和RGBA

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

1
2
3
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)的首字母缩写。它是定义颜色的另一种方式。对此很多人有共鸣,特别是习惯用图形编辑器的设计师们。其语法如下:

1
2
hsl(0,100%,50%) 等同于#ff0000;
hsl(0,0%,100%) 等同于#ffffff;

paste image

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

第二个值:饱和度。它指颜色的鲜艳程度(纯度),取值范围是0~100%;100%是颜色全彩色,0%是灰度。

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

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

paste image

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

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

paste image

五、总结

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

竹风原创,转载请注明出处,谢谢!

最后更新:

原始链接: http://wangzc.cc/blog/css-color/