首页
所有分类
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 相关文章推荐
详解纯CSS3制作的20种loading动效
Jul 05 HTML / CSS
css3 响应式媒体查询的示例代码
Sep 25 HTML / CSS
10个很棒的 CSS3 开发工具 推荐
May 16 HTML / CSS
一款基于css3和jquery实现的动画显示弹出层按钮教程
Jan 04 HTML / CSS
CSS3中使用RGBa来调节透明度的教程
May 09 HTML / CSS
CSS3中的Transition过度与Animation动画属性使用要点
May 20 HTML / CSS
HTML5拖放功能_动力节点Java学院整理
Jul 13 HTML / CSS
HTML5 离线应用之打造零请求、无流量网站的解决方法
Apr 25 HTML / CSS
带你认识HTML5中的WebSocket
May 22 HTML / CSS
使用phonegap查找联系人的实现方法
Mar 31 HTML / CSS
Canvas globalCompositeOperation
Dec 18 HTML / CSS
小程序实现悬浮按钮的全过程记录
Oct 16 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
腾讯云(1) Foreign Key(1) hook(1) dict(1) JDK(1) Vite(1) 数据备份(2) 外键约束(1) 云服务器(1) expdp(1)
You might like
利用php来自动调用不同服务器上的flash
2006/10/09 PHP
PHP输出九九乘法表代码实例
2015/03/27 PHP
php实现购物车功能（下）
2016/01/05 PHP
不同浏览器的怪癖小结
2010/07/11 Javascript
有趣的javascript数组定义方法
2010/09/10 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
2012/12/17 Javascript
JS.elementGetStyle(element, style)应用示例
2013/09/24 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
2013/11/12 Javascript
JS交换变量的方法
2015/01/21 Javascript
jQuery实现DIV层收缩展开的方法
2015/02/27 Javascript
基于AngularJS实现iOS8自带的计算器
2016/09/12 Javascript
基于JQuery实现的跑马灯效果（文字无缝向上翻动）
2016/12/02 Javascript
Javascript 两种刷新方法以及区别和适用范围
2017/01/17 Javascript
vue 动态修改a标签的样式的方法
2018/01/18 Javascript
webpack之引入图片的实现及问题
2018/10/08 Javascript
简单了解Ajax表单序列化的实现方法
2019/06/14 Javascript
写给新手同学的vuex快速上手指北小结
2020/04/14 Javascript
通过JS判断网页是否为手机打开
2020/10/28 Javascript
Python2/3中urllib库的一些常见用法
2017/12/19 Python
python matplotlib绘图,修改坐标轴刻度为文字的实例
2018/05/25 Python
python中的句柄操作的方法示例
2019/06/20 Python
如何通过50行Python代码获取公众号全部文章
2019/07/12 Python
Python3监控windows,linux系统的CPU、硬盘、内存使用率和各个端口的开启情况详细代码实例
2020/03/18 Python
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
HTML5 Convas APIs方法详解
2015/04/24 HTML / CSS
英国复古皮包品牌：Beara Beara
2018/07/18 全球购物
公务员个人自我评价分享
2013/11/06 职场文书
行政部岗位职责范本
2014/03/13 职场文书
汽车转让协议书范本
2014/12/07 职场文书
大学生助学金感谢信
2015/01/21 职场文书
入党团支部推荐意见
2015/06/02 职场文书
沂蒙六姐妹观后感
2015/06/08 职场文书
优秀乡村医生事迹材料（2016精选版）
2016/02/29 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
Redis之RedisTemplate配置方式(序列和反序列化)
2022/03/13 Redis