CSS3 颜色值HSL表示方式&简单实例

HSL色彩模式：就是色调(Hue)、饱和度(Saturation)、亮度(Lightness)三个颜色通道的改变以及它们相互之间的叠加来获得各种颜色，色调(Hue)色调最大值360，饱和度和亮度有百分比表示0-100%之间。

因为人们看到颜色第一时间会产生“这是什么颜色？深浅如何？明暗如何？”这个疑问不是这是多少红加多少绿多少蓝混合而成的颜色，所以HSL色彩模式是人类对颜色最直接的感知。

HSL(H,S,L)

取值：

H： Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360 S： Saturation(饱和度)。取值为：0.0% - 100.0% L： Lightness(亮度)。取值为：0.0% - 100.0%

兼容性：

HSL被现代浏览器较好的支持，而且不需要任何前缀，IE6-IE7不支持。IE8支持该方式。

实例1:在css中直接使用hsl值

<style> .test{background-color:hsl(360,50%,50%);} </style>

实例2：使用Js修改dom时指定hsl值，以亮度为例

<style>         body {             padding: 100px;         }          #ex1Slider .slider-selection {             background: #BABABA;         }     </style>     <div class="form">         <div class="form-group">             <label for="">亮度：</label>             <input id="ex1" data-slider-id="ex1Slider" type="text"                    data-slider-min="0" data-slider-max="100" data-slider-step="1"                    data-slider-value="15" />         </div>     </div>

js

//亮度 $('#ex1').slider().on('change', function (e) {     var newValue = e.value.newValue;     console.info(newValue);     $(document.body).css({         backgroundColor: 'hsl(360,50%,' + newValue + '%)'     }); });

实例3：修改多个值：

html

<style>         body {             padding:100px;         }         .form-group {             margin-bottom:50px;         }         #ex1Slider .slider-selection {             background: #BABABA;         }     </style>     <div class="form">         <div class="form-group">             <label for="">色&emsp;调：</label>             <input id="Hue" data-slider-id="ex1Slider" type="text"                    data-slider-min="0" data-slider-max="360" data-slider-step="1"                    data-slider-value="180" />         </div>         <div class="form-group">             <label for="">饱和度：</label>             <input id="Saturation" data-slider-id="ex1Slider" type="text"                    data-slider-min="0" data-slider-max="100" data-slider-step="1"                    data-slider-value="50" />         </div>         <div class="form-group">             <label for="">亮&emsp;度：</label>             <input id="Lightness" data-slider-id="ex1Slider" type="text"                    data-slider-min="0" data-slider-max="100" data-slider-step="1"                    data-slider-value="50" />         </div>     </div>

js

//色调 $('#Hue').slider().on('change', function (e) {     showColor(); }); //饱和度 $('#Saturation').slider().on('change', function (e) {     showColor(); }); //亮度 $('#Lightness').slider().on('change', function (e) {     showColor(); }); //统一显示颜色 function showColor() {     var h = $('#Hue').slider('getValue');     var s = $('#Saturation').slider('getValue');     var l = $('#Lightness').slider('getValue');     var value = 'hsl(' + h + ',' + s + '%,' + l + '%)';     console.info(value);     $(document.body).css({         backgroundColor:value     }); } showColor();