CSS3人性化的体现：HSL和HSLA颜色

      看到这个标题，相信大家都很容易想到前面讲过的RGB和RGBA。是的，它们确实存在着密不可分的关系，而其中的区别就在于RGB和HSL了。

　　RGB模式基于非常严谨的数理系统，然而它对肉眼并不友好。大家都可以理解rgb(255,255,255)是白色，rgb(0,0,0)是黑色，rgb(255,0,0)是纯红，但是大概想不通为什么rgb(255,255,0)会是黄色。

　　这就是RGB模式的抽象之处了。所以科学家们创立了另外一套基于视觉感知的色彩系统——HSL，三个字母分别代表色相，饱和度和亮度。

　　色相指示颜色的种类，0和360是红色，接近120的是绿色，240是蓝色。

　　饱和度指示颜色的鲜艳程度，有效值为0~100%为0时必然显示黑白灰这三种最不鲜艳的颜色。

　　亮度指示颜色的明亮程度，有效值为0~100%。0%必然为黑色，100%必然为白色。

　　HSL可以通过色彩空间深入理解，有兴趣的朋友可自行查阅相关资料。

　　现在我们把RGBA教程中所用到的案例搬过来

　　效果如下图所示

　　根据前面的讨论，我们知道红色和绿色的色相值分别为0和120，而且都是纯色，所以饱和度达到最大值100%。至于亮度，由于红光/绿光全部反射出来了，所以我们让它等于100%。

      代码如下

     .red {

　　   background:hsla(0,100%,100%,0.5);

　　}

　　.green {

　　   /*其它样式代码省略*/

　　   background:hsla(120,100%,100%,0.5);

　　}.

　　然而竟然没有显示任何背景

　　前面说了，HSL模式里面，L=100%必然显示白色，所以就跟背景颜色一样了。

　　其实亮度的计算公式是(max+min)/2，对于rgb(255,0,0)和rgb(0,255,0)来说，max都等于255，min都等于0，相除以后等于128，是255的一半，所以亮度应该改成50%。

      代码如下                                                                                   

      .red{

　　   background:hsla(0,100%,50%,0.5);

　　}

　　.green{

　　   /*其它样式代码省略*/

　　   background:hsla(120,100%,50%,0.5);

　　}

　　再次运行，效果就跟之前一样了

　　HSL是一项跨学科的技术，它成功把数学，物理学，生物学和心理学有机结合在一起，实乃视觉编程界的又一重大突破，能被w3c旗下的css3所收录，可谓实至名归。它的出现为web设计师的调试提供了极大的便利，色彩亮度、饱和度等视觉属性的微调，绝对比RGB模式方便得多。需要在photoshop和浏览器之间频繁切换测试颜色的朋友，你们终于解放了！