深入理解CSS六种颜色模式

Posted 2020-06-15

目录

[1]关键字 [2]16进制 [3]RGB模式 [4]RGBA模式 [5]HSL模式 [6]HSLA模式

前面的话

　　赏心悦目的颜色搭配让人感到舒服，修改元素颜色的功能让人趋之若鹜。但颜色规划不当，会让网站用户无所适从。颜色从<font color="">发展至今，保留了很多内容，也增加了新的内容，本文将介绍关于颜色模式的内容

 

颜色模式

　　以前主要采用关键字、16进制和RGB这三种设置颜色的方式。CSS3出现后，增加了RGBA、HSL、HSLA这三种模式，极大地丰富了CSS颜色设置的方式

【1】关键字

　　直接使用的名字的颜色值称为命名颜色

　　CSS支持17种合法命名颜色(标准颜色):

aqua fuchsia lime olive red white black gray maroon orange silver yellow blue green navy purple teal

　　[注意]浏览器支持140种颜色

 

【2】16进制

　　16进制是设置颜色值的常用方式，将三个介于00-FF的十六进制数连接起来，若16进制的3组数各自成对，则可简写为3位

　　#abcdef
　　#aabbcc <=> #abc

<安全颜色>

　　web安全颜色是指在256色计算机系统上总能避免抖动的颜色，表示为RGB值20%和51(相应的16进制值为33)的倍数。因此，采用16进制时，使用00\33\66\99\cc\ff认为是Web安全色，一共6*6*6=216种

【3】RGB模式

　　通过组合不同的红色、绿色、蓝色分量创造出的颜色成为RGB模式的颜色。显示器是由一个个像素构成，利用电子束来表现色彩。像素把光的三原色:红色(R)、绿色(G)、蓝色(B)组合起来。每像素包含8位元色彩的信息量，有0-255的256个单元，其中0是完全无光状态，255是最亮状态

　　rgb(x%,y%,z%)
　　rgb(a,b,c)

　　[注意]若数值小于最小值0,则默认调整为0;若数值大小最大值255,则默认调整为255

【4】RGBA模式(IE8-浏览器不支持)

　　rgba模式是在RGB基础上增加了alpha通道，用来设置颜色的透明度，其中这个通道值的范围是0-1。0代表完全透明，1代表完全不透明

    rgba(r,g,b,a)

 

【5】HSL模式(IE8-浏览器不支持)

　　HSL模式是通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互的叠加得到各式各样的颜色。HSL标准几乎可以包括人类视力所能感知的所有颜色

    hsl(h,s,l)

　　h:色调(hue)可以为任意整数。0(或360或-360)表示红色，60表示黄色，120表示绿色，180表示青色，240表示蓝色，300表示洋红(当h值大于360时，实际的值等于该值模360后的值)

　　s:饱和度(saturation)，就是指颜色的深浅度和鲜艳程度。取0-100%范围的值，其中0表示灰度(没有该颜色)，100%表示饱和度最高(颜色最鲜艳)

　　l:亮度(lightness)，取0-100%范围的值，其中0表示最暗(黑色)，100%表示最亮(白色)

 

【6】HSLA模式(IE8-浏览器不支持)

　　HSLA模式是HSL的扩展模式，在HSL的基础上增加一个透明通道alpha来设置透明度

    hsla(<length>,<percentage>,<percentage>,<opacity>)