首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

CSS3色彩模式有哪些？CSS3 HSL色彩模式的定义

Posted in HTML / CSS onApril 26, 2016

HSL色彩模式是工业界的一种颜色标准，它通过对色调（H），饱和度（S），亮度（L）三个颜色通道的改变以及他们相互之间的叠加来获得各种颜色。这个标准几乎包括了人类视力可以感知的所有颜色，在屏幕上可以重现16777216种颜色，是目前应用最广的颜色系统之一。

语法：

hsl（<length>,<percentage>,<percentage>）

参数说明：

<length>表示色调（Hue），Hue衍生于色盘，取值可以为任意数值，其中0（或360或-360）表示红色，60表示黄色，120表示绿色，180表示青色，240表示蓝色，300表示洋红，当然可以设置其他数值来确定不同的颜色。

<percentage> 表示饱和度（Saturation），表示该色彩被使用了多少，即颜色的深浅程度和鲜艳程度。取值为0%到100%之间的值，其中0%表示灰度，即没有使用该颜色；100%的饱和度最高，即颜色最鲜艳。

<percentage> 表示亮度（Lightness），取值为0%到100%之间的值，其中0%表示最暗，显示为黑色；50%表示均值，100%最亮，显示为亮色。

实例：网页配色解决方案

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>HSL Color</title>  
  6. <style type="text/css">  
  7. table {   
  8.     border:solid 1px Orange;   
  9.     background:#eee;   
  10.     padding:6px;   
  11. }   
  12. th {   
  13.     color:Orange;   
  14.     font-size:12px;   
  15.     font-weight:normal;      
  16. }   
  17. td {   
  18.     width:80px;   
  19.     height:30px;      
  20. }   
  21. /*第1行*/   
  22. tr:nth-child(4) td:nth-of-type(1) { background:hsl(30,100%,100%);}   
  23. tr:nth-child(4) td:nth-of-type(2) { background:hsl(30,75%,100%);}   
  24. tr:nth-child(4) td:nth-of-type(3) { background:hsl(30,50%,100%);}   
  25. tr:nth-child(4) td:nth-of-type(4) { background:hsl(30,25%,100%);}   
  26. tr:nth-child(4) td:nth-of-type(5) { background:hsl(30,0%,100%);}   
  27. /*第2行*/   
  28. tr:nth-child(5) td:nth-of-type(1) { background:hsl(30,100%,88%);}   
  29. tr:nth-child(5) td:nth-of-type(2) { background:hsl(30,75%,88%);}   
  30. tr:nth-child(5) td:nth-of-type(3) { background:hsl(30,50%,88%);}   
  31. tr:nth-child(5) td:nth-of-type(4) { background:hsl(30,25%,88%);}   
  32. tr:nth-child(5) td:nth-of-type(5) { background:hsl(30,0%,88%);}   
  33. /*第3行*/   
  34. tr:nth-child(6) td:nth-of-type(1) { background:hsl(30,100%,75%);}   
  35. tr:nth-child(6) td:nth-of-type(2) { background:hsl(30,75%,75%);}   
  36. tr:nth-child(6) td:nth-of-type(3) { background:hsl(30,50%,75%);}   
  37. tr:nth-child(6) td:nth-of-type(4) { background:hsl(30,25%,75%);}   
  38. tr:nth-child(6) td:nth-of-type(5) { background:hsl(30,0%,75%);}   
  39. /*第4行*/   
  40. tr:nth-child(7) td:nth-of-type(1) { background:hsl(30,100%,63%);}   
  41. tr:nth-child(7) td:nth-of-type(2) { background:hsl(30,75%,63%);}   
  42. tr:nth-child(7) td:nth-of-type(3) { background:hsl(30,50%,63%);}   
  43. tr:nth-child(7) td:nth-of-type(4) { background:hsl(30,25%,63%);}   
  44. tr:nth-child(7) td:nth-of-type(5) { background:hsl(30,0%,63%);}   
  45. /*第5行*/   
  46. tr:nth-child(8) td:nth-of-type(1) { background:hsl(30,100%,50%);}   
  47. tr:nth-child(8) td:nth-of-type(2) { background:hsl(30,75%,50%);}   
  48. tr:nth-child(8) td:nth-of-type(3) { background:hsl(30,50%,50%);}   
  49. tr:nth-child(8) td:nth-of-type(4) { background:hsl(30,25%,50%);}   
  50. tr:nth-child(8) td:nth-of-type(5) { background:hsl(30,0%,50%);}   
  51. /*第6行*/   
  52. tr:nth-child(9) td:nth-of-type(1) { background:hsl(30,100%,38%);}   
  53. tr:nth-child(9) td:nth-of-type(2) { background:hsl(30,75%,38%);}   
  54. tr:nth-child(9) td:nth-of-type(3) { background:hsl(30,50%,38%);}   
  55. tr:nth-child(9) td:nth-of-type(4) { background:hsl(30,25%,38%);}   
  56. tr:nth-child(9) td:nth-of-type(5) { background:hsl(30,0%,38%);}   
  57. /*第7行*/   
  58. tr:nth-child(10) td:nth-of-type(1) { background:hsl(30,100%,25%);}   
  59. tr:nth-child(10) td:nth-of-type(2) { background:hsl(30,75%,25%);}   
  60. tr:nth-child(10) td:nth-of-type(3) { background:hsl(30,50%,25%);}   
  61. tr:nth-child(10) td:nth-of-type(4) { background:hsl(30,25%,25%);}   
  62. tr:nth-child(10) td:nth-of-type(5) { background:hsl(30,0%,25%);}   
  63. /*第8行*/   
  64. tr:nth-child(11) td:nth-of-type(1) { background:hsl(30,100%,13%);}   
  65. tr:nth-child(11) td:nth-of-type(2) { background:hsl(30,75%,13%);}   
  66. tr:nth-child(11) td:nth-of-type(3) { background:hsl(30,50%,13%);}   
  67. tr:nth-child(11) td:nth-of-type(4) { background:hsl(30,25%,13%);}   
  68. tr:nth-child(11) td:nth-of-type(5) { background:hsl(30,0%,13%);}   
  69. /*第9行*/   
  70. tr:nth-child(12) td:nth-of-type(1) { background:hsl(30,100%,0%);}   
  71. tr:nth-child(12) td:nth-of-type(2) { background:hsl(30,75%,0%);}   
  72. tr:nth-child(12) td:nth-of-type(3) { background:hsl(30,50%,0%);}   
  73. tr:nth-child(12) td:nth-of-type(4) { background:hsl(30,25%,0%);}   
  74. tr:nth-child(12) td:nth-of-type(5) { background:hsl(30,0%,0%);}   
  75.   
  76. </style>  
  77. </head>  
  78.   
  79. <body>  
  80. <table class="hslexample">  
  81.     <tbody>  
  82.         <tr>  
  83.             <th> </th>  
  84.             <th colspan="5">色相：H=30 Red-Yellow (=Orange)  </th>  
  85.         </tr>  
  86.         <tr>  
  87.             <th> </th>  
  88.             <th colspan="5">饱和度 (→)</th>  
  89.         </tr>  
  90.         <tr>  
  91.             <th>亮度 (↓)</th>  
  92.             <th>100% </th>  
  93.             <th>75% </th>  
  94.             <th>50% </th>  
  95.             <th>25% </th>  
  96.             <th>0% </th>  
  97.         </tr>  
  98.         <tr>  
  99.             <th>100 </th>  
  100.             <td> </td>  
  101.             <td> </td>  
  102.             <td> </td>  
  103.             <td> </td>  
  104.             <td> </td>  
  105.         </tr>  
  106.         <tr>  
  107.             <th>88 </th>  
  108.             <td> </td>  
  109.             <td> </td>  
  110.             <td> </td>  
  111.             <td> </td>  
  112.             <td> </td>  
  113.         </tr>  
  114.         <tr>  
  115.             <th>75 </th>  
  116.             <td> </td>  
  117.             <td> </td>  
  118.             <td> </td>  
  119.             <td> </td>  
  120.             <td> </td>  
  121.         </tr>  
  122.         <tr>  
  123.             <th>63 </th>  
  124.             <td> </td>  
  125.             <td> </td>  
  126.             <td> </td>  
  127.             <td> </td>  
  128.             <td> </td>  
  129.         </tr>  
  130.         <tr>  
  131.             <th>50 </th>  
  132.             <td> </td>  
  133.             <td> </td>  
  134.             <td> </td>  
  135.             <td> </td>  
  136.             <td> </td>  
  137.         </tr>  
  138.         <tr>  
  139.             <th>38 </th>  
  140.             <td> </td>  
  141.             <td> </td>  
  142.             <td> </td>  
  143.             <td> </td>  
  144.             <td> </td>  
  145.         </tr>  
  146.         <tr>  
  147.             <th>25 </th>  
  148.             <td> </td>  
  149.             <td> </td>  
  150.             <td> </td>  
  151.             <td> </td>  
  152.             <td> </td>  
  153.         </tr>  
  154.         <tr>  
  155.             <th>13 </th>  
  156.             <td> </td>  
  157.             <td> </td>  
  158.             <td> </td>  
  159.             <td> </td>  
  160.             <td> </td>  
  161.         </tr>  
  162.         <tr>  
  163.             <th>0 </th>  
  164.             <td> </td>  
  165.             <td> </td>  
  166.             <td> </td>  
  167.             <td> </td>  
  168.             <td> </td>  
  169.         </tr>  
  170.     </tbody>  
  171. </table>  
  172. </body>  
  173. </html>  

演示效果图：

CSS3色彩模式有哪些？CSS3 HSL色彩模式的定义

常见网页基本配色方案：

橙色系：朝气活泼，豁然开朗

CSS3色彩模式有哪些？CSS3 HSL色彩模式的定义

黄色系：明亮喜庆，甜蜜幸福

CSS3色彩模式有哪些？CSS3 HSL色彩模式的定义

黄绿色系：自然清新，年轻且富有希望

CSS3色彩模式有哪些？CSS3 HSL色彩模式的定义

绿色系：新鲜自然，明朗宁静

CSS3色彩模式有哪些？CSS3 HSL色彩模式的定义

青绿色系：健康清新，充满信心和活力

CSS3色彩模式有哪些？CSS3 HSL色彩模式的定义

青色系：坚定，古朴庄重

CSS3色彩模式有哪些？CSS3 HSL色彩模式的定义

青蓝色系：爽朗开阔，清凉高远

CSS3色彩模式有哪些？CSS3 HSL色彩模式的定义

蓝色系：和平，淡雅，洁净

CSS3色彩模式有哪些？CSS3 HSL色彩模式的定义

蓝紫色系：成熟，冷静，高贵

CSS3色彩模式有哪些？CSS3 HSL色彩模式的定义

紫色系：神秘高贵，高雅脱俗

CSS3色彩模式有哪些？CSS3 HSL色彩模式的定义

紫红色系：浪漫柔和，华丽高贵

CSS3色彩模式有哪些？CSS3 HSL色彩模式的定义

红色系：吉祥幸福，古典

 

CSS3色彩模式有哪些？CSS3 HSL色彩模式的定义

以上就是关于HSL色彩模式的全部内容，希望对大家了解认识HSL色彩模式有所帮助。

CSS3色彩模式有哪些？CSS3 HSL色彩模式的定义

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
image-set实现Retina屏幕下图片显示详细介绍
Dec 24 HTML / CSS
css3实现超立体3D图片侧翻倾斜效果
Apr 16 HTML / CSS
css3中transition属性详解
Sep 02 HTML / CSS
CSS3实现内凹圆角的实例代码
May 04 HTML / CSS
HTML5中canvas中的beginPath()和closePath()的重要性
Aug 24 HTML / CSS
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
Jan 09 HTML / CSS
IE10 Error.stack 让脚本调试更加方便快捷
Apr 22 HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
May 09 HTML / CSS
Html5页面二次分享的实现
Jul 30 HTML / CSS
html2 canvas生成清晰的图片实现打印功能
Sep 23 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
Dec 03 HTML / CSS
css样式important规则的正确使用方式
Jun 10 HTML / CSS
纯CSS3代码实现文字描边
Apr 25 #HTML / CSS
实例讲解CSS3中Transform的perspective属性的用法
Apr 22 #HTML / CSS
CSS3实现大小不一的粒子旋转加载动画
Apr 21 #HTML / CSS
CSS3绘制超炫的上下起伏波动进度加载动画
Apr 21 #HTML / CSS
深入理解css属性的选择对动画性能的影响
Apr 20 #HTML / CSS
CSS中越界问题的经典解决方案【推荐】
Apr 19 #HTML / CSS
css3 中的新特性加强记忆详解
Apr 16 #HTML / CSS
意向书(73) 竞聘书(31) 委托书(259) 任命书(51) 标语(336) 说明书(38) 担保书(46) 公证书(45) 检举信(8) 协议书(568)
You might like
php二维数组排序方法(array_multisort usort)
2013/12/25 PHP
推荐一款MAC OS X 下php集成开发环境mamp
2014/11/08 PHP
php数组冒泡排序算法实例
2016/05/06 PHP
如何使用php等比例缩放图片
2016/10/12 PHP
PHP实现的同步推荐操作API接口案例分析
2016/11/30 PHP
PHP基于SPL实现的迭代器模式示例
2018/04/22 PHP
PHP按符号截取字符串的指定部分的实现方法
2018/09/10 PHP
Yii框架学习笔记之应用组件操作示例
2019/11/13 PHP
Javascript学习笔记二 之 变量
2010/12/15 Javascript
Jquery下:nth-child(an+b)的使用注意
2011/05/28 Javascript
js的表单操作 简单计算器
2011/12/29 Javascript
js showModalDialog弹出窗口实例详解
2014/01/07 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
2014/01/07 Javascript
JavaScript中的包装对象介绍
2015/01/27 Javascript
JavaScript实现添加及删除事件的方法小结
2015/08/04 Javascript
jQuery 生成svg矢量二维码
2016/08/09 Javascript
jQuery Validate让普通按钮触发表单验证的方法
2016/12/15 Javascript
JS实现给对象动态添加属性的方法
2017/01/05 Javascript
JavaScript数据结构之链表的实现
2017/03/19 Javascript
JavaScript中offsetWidth的bug及解决方法
2017/05/17 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
2018/03/03 Javascript
微信小程序国际化探索实现(附源码地址)
2020/05/20 Javascript
javascript的hashCode函数实现代码小结
2020/08/11 Javascript
Python入门篇之对象类型
2014/10/17 Python
Python中的进程分支fork和exec详解
2015/04/11 Python
python中bytes和str类型的区别
2019/10/21 Python
css3的动画特效之动画序列（animation）
2017/12/22 HTML / CSS
运动鞋、街头服装、手表和手袋的实时市场：StockX
2020/11/25 全球购物
神路信息Java面试题目
2013/03/31 面试题
旅游管理本科生求职信
2013/10/14 职场文书
中专生职业生涯规划书范文
2014/01/10 职场文书
化工专业自荐书
2014/06/16 职场文书
领导班子作风建设剖析材料
2014/10/11 职场文书
就业导师推荐信范文
2015/03/27 职场文书
2016年公司“3.12”植树节活动总结
2016/03/16 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书