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值,以亮度为例
html:
<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>
//亮度$('#ex1').slider().on('change', function (e) { var newValue = e.value.newValue; console.info(newValue); $(document.body).css({ backgroundColor: 'hsl(360,50%,' newValue '%)' });});
完整代码:
<!doctype html><html lang="zh-CN"><head><title>动态hsl调整背景色</title><meta name="Generator" content="Zoomla!逐浪®CMS"><meta name="Author" content="去上云73ic.com"><meta name="Others" content="字体呈现基于逐浪字库f.ziti163.com"><meta name="Keywords" content=""><meta name="Description" content=""><link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/bootstrap-slider/9.4.1/css/bootstrap-slider.css" rel="stylesheet"><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap-slider/9.4.1/bootstrap-slider.min.js"></script></head><body><style>body { padding: 100px;}#ex1Slider .slider-selection {background: #BABABA;}</style><h1>动态hsl调整背景色</h1><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><script>//亮度$('#ex1').slider().on('change', function (e) { var newValue = e.value.newValue; console.info(newValue); $(document.body).css({ backgroundColor: 'hsl(360,50%,' newValue '%)' });});</script> </body></html>
效果如下:
实例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="">色 调:</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="">亮 度:</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();
完整代码:
<!doctype html><html lang="zh-CN"><head><title>新建HTML</title><meta name="Generator" content="Zoomla!逐浪®CMS"><meta name="Author" content="去上云73ic.com"><meta name="Others" content="字体呈现基于逐浪字库f.ziti163.com"><meta name="Keywords" content=""><meta name="Description" content=""><link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/bootstrap-slider/9.4.1/css/bootstrap-slider.css" rel="stylesheet"><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap-slider/9.4.1/bootstrap-slider.min.js"></script></head><body><h1>动态hsl调整背景色@多值</h1> <style> body { padding:100px; } .form-group { margin-bottom:50px; } #ex1Slider .slider-selection { background: #BABABA; } </style> <div class="form"> <div class="form-group"> <label for="">色 调:</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="">亮 度:</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> <script>//色调$('#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();</script></body></html>