CSS3 颜色值HSL表示方式&简单实例
2016-11-01 14:27
211 查看
HSL色彩模式:就是色调(Hue)、饱和度(Saturation)、亮度(Lightness)三个颜色通道的改变以及它们相互之间的叠加来获得各种颜色,色调(Hue)色调最大值360,饱和度和亮度有百分比表示0-100%之间。
因为人们看到颜色第一时间会产生“这是什么颜色?深浅如何?明暗如何?”这个疑问不是这是多少红加多少绿多少蓝混合而成的颜色,所以HSL色彩模式是人类对颜色最直接的感知。
HSL(H,S,L)
实例1:在css中直接使用hsl值
实例2:使用Js修改dom时指定hsl值,以亮度为例
js
实例3:修改多个值:
html
js
关于本实例中的Slider插件:http://blog.csdn.net/u011127019/article/details/52992654
因为人们看到颜色第一时间会产生“这是什么颜色?深浅如何?明暗如何?”这个疑问不是这是多少红加多少绿多少蓝混合而成的颜色,所以HSL色彩模式是人类对颜色最直接的感知。
HSL(H,S,L)
取值:
H:Hue(色调)。0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 - 360S: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="">色 调:</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();
关于本实例中的Slider插件:http://blog.csdn.net/u011127019/article/details/52992654
相关文章推荐
- Css3颜色值RGBA得表示方式
- 如何将c++的struct表示为C#,并把 bytes? Marshal的方式仅支持简单类型,不支持char A[20]的形式。
- 对函数返回形式及传参方式的简单理解(实例)
- 简单实例处理url特殊符号&处理(2种方法)
- 基于MVC4+EF5.0+Ajax+Json+CSS3的简单注册页面(get&post)
- 使用javascript创建快捷方式的简单实例
- js入门·循环与判断/利用函数的简单实例/使用对象/列举对象属性的名称
- 建图方式一 之 ”前向星“ BFS&&DFS 简单应用
- HTML 简单教程-实例004 HTML链接<a>标签
- 简单实例处理url特殊符号&处理(2种方法)
- Android开发实例&nbsp;简单拨打电话
- 回调方式的简单实例
- WPF 实现拖放的简单实例(Drag & Drop)
- 基础才是重中之重~委托实例的几种定义方式(规规矩矩method,逻辑简单delegate,层次清晰lambda
- HTML 简单教程-实例002 HTML标题<h1> - <h6> 标签
- C++泛型编程中算法库<algorithm>和向量<vector>的简单实例
- 简单实例处理url特殊符号&处理
- PHP&nbsp;Socket&nbsp;编程简单实例
- HTML 简单教程-实例005 HTML图像<img> 标签
- css3新增颜色表示方式分享