首页
所有分类
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美化HTML表单的技巧演示
May 17 HTML / CSS
css3加js做一个简单的3D行星运转效果实例代码
Jan 18 HTML / CSS
css3 边框、背景、文本效果的实现代码
Mar 21 HTML / CSS
html5 canvas 使用示例
Oct 22 HTML / CSS
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
Apr 22 HTML / CSS
HTML5注册表单的自动聚焦与占位文本示例代码
Jul 19 HTML / CSS
html5模拟平抛运动(模拟小球平抛运动过程)
Jul 25 HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
Apr 14 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
Jul 07 HTML / CSS
HTML5头部标签的一些常用信息小结
Oct 23 HTML / CSS
HTML5触摸事件实现移动端简易进度条的实现方法
May 04 HTML / CSS
HTML5拖放API实现自动生成相框功能
Apr 07 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
自荐信(981) 自我评价(886) 推荐信(292) 职业生涯规划书(234) Delphi面试题(13) 创业计划书(312) 求职信(1029) SOA面试题(9) 岗位职责(1324) 自我鉴定(671)
You might like
一步一步学习PHP(6) 面向对象
2010/02/16 PHP
使用php从身份证号中获取一系列线索（星座、生肖、生日等）
2016/05/11 PHP
PHP简单读取PDF页数的实现方法
2016/07/21 PHP
PHP基于curl模拟post提交json数据示例
2018/06/22 PHP
YII框架页面缓存操作示例
2019/04/29 PHP
laravel 多图上传及图片的存储例子
2019/10/14 PHP
Javascript学习笔记6 prototype的提出
2010/01/11 Javascript
锋利的jQuery 要点归纳（三） jQuery中的事件和动画（下：动画篇）
2010/03/24 Javascript
javascript事件冒泡详解和捕获、阻止方法
2014/04/12 Javascript
JavaScript中的数据类型转换方法小结
2015/10/26 Javascript
angularjs中ng-bind-html的用法总结
2017/05/23 Javascript
深入理解Vue官方文档梳理之全局API
2017/11/22 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
2018/04/27 jQuery
Webpack 4.x搭建react开发环境的方法步骤
2018/08/15 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
2019/09/19 Javascript
微信小程序实现录音功能
2019/11/22 Javascript
JavaScript cookie原理及使用实例
2020/05/08 Javascript
JavaScript this指向相关原理及实例解析
2020/07/10 Javascript
关于uniApp editor微信滑动问题
2021/01/15 Javascript
Python简明入门教程
2015/08/04 Python
Python实现购物系统(示例讲解)
2017/09/13 Python
django Admin文档生成器使用详解
2019/07/22 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
python关于调用函数外的变量实例
2019/12/26 Python
Python中Selenium模块的使用详解
2020/10/09 Python
HTML5上传文件显示进度的实现代码
2012/08/30 HTML / CSS
澳大利亚在线消费电子产品商店：TobyDeals
2020/01/05 全球购物
西安众合通用.net笔试题
2013/03/18 面试题
结婚邀请函范文
2014/01/14 职场文书
领导接待方案
2014/03/13 职场文书
公司请假条范文
2014/04/11 职场文书
学生个人总结范文
2015/02/15 职场文书
法律讲堂观后感
2015/06/11 职场文书
2015年小学实验室工作总结
2015/07/28 职场文书
关于考试抄袭的检讨书
2019/11/02 职场文书
一文彻底理解js原生语法prototype,__proto__和constructor
2021/10/24 Javascript