css3新增颜色表示方式分享

一、CSS中的颜色表示方法（W3C标准）

让我们深入CSS中的颜色世界，了解不同的颜色表示方式及其特点。

1. 颜色名称方式

通过颜色关键字直接表示对应的颜色，例如红色、蓝色、粉色等。这种方式的优点在于方便快捷，特定颜色的表示相当准确。但缺点在于，颜色名称的数量有限，不支持透明颜色的表示。

2. 十六进制方式（HEX）

使用十六进制来代表颜色，语法为RRGGBB或RGB。其中RR代表红色值，GG代表绿色值，BB代表蓝色值。这种方式的优点在于可以表示的颜色种类非常多，使用也比较方便。但缺点在于，16进制的单位换算有时会造成困扰，且不支持透明颜色的表示。

3. 三原色配色方式（RGB）

通过三原色红、绿、蓝的组合来表示颜色，语法为RGB(R,G,B)。RGB方式同样具有表示颜色种类多的优点，使用也比较方便。但同样不支持透明颜色的表示，特定颜色的调配需要一定的知识和工具配合。

二、CSS3新增的颜色表示方式

进入CSS3时代，颜色的表示方式更加多样和灵活。

1. RGBA模式

在RGB模式的基础上，新增了Alpha透明度，语法为RGBA(R,G,B,A)。A代表透明度，取值在0~1之间。这使得颜色的表现更具层次感。

实例:

在网页中设置一个背景色为半透明的红色：`body{background:rgba(255,0,0,0.5)}`。你还可以看到一个蓝色的div元素漂浮在页面上：`div{width:300px;height:300px;background:rgba(0,0,255,0.4);position:absolute;top:0;left:0;}`。

2. HSL模式（色轮模式）

通过色调、饱和度和亮度来表示颜色，语法为HSL(H,S,L)。H代表色调，取值范围为0 - 360；S代表饱和度，取值范围为0.0% - 100.0%；L代表亮度，取值范围为0.0% - 100.0%。这种表示方式更加直观，便于人们理解颜色的构成。

实例: 这里的背景色采用HSL模式设置为一个绿色调：`body{background:hsl(120,50%,50%)}`。页面上的div元素背景色为绿色与蓝色的混合：`div{width:300px;height:300px;background:hsl(140,50%,50%);position:absolute;top:0;left:0;}`。

3. HSLA模式

这是HSL模式的扩展，增加了Alpha透明度，使颜色的表现更加丰富多彩。在上面的例子中，我们已经看到了如何使用RGBA设置背景色透明度，同理，HSLA也能实现这样的效果。这使得设计师能够更灵活地控制颜色的深浅和透明度。例如，可以使用 `cambrian.render('body')` 来动态渲染页面的背景色变化。