首页
所有分类
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实现简易版的刮刮乐效果
Sep 27 HTML / CSS
CSS3制作圆角图片和椭圆形图片
Jul 08 HTML / CSS
基于CSS3 animation动画属性实现轮播图效果
Sep 12 HTML / CSS
详解HTML5中的标签
Jun 19 HTML / CSS
HTML5地理定位与第三方工具百度地图的应用
Nov 17 HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
Aug 28 HTML / CSS
canvas学习笔记之2d画布基础的实现
Feb 21 HTML / CSS
会走动的图形html5时钟示例
Apr 27 HTML / CSS
用HTML5制作一个简单的弹力球游戏
May 12 HTML / CSS
HTML5页面中尝试调起APP功能
Sep 12 HTML / CSS
html5 canvas的绘制文本自动换行的示例代码
Sep 17 HTML / CSS
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
Jul 22 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
procedure(1) 自定义函数(1) maven(2) Android Gradle(1) 记事本(1) Tablespace(1) V Rising(1) 内置函数(1) Spring Security(2) Navicat(1)
You might like
PHP＋DBM的同学录程序(1)
2006/10/09 PHP
Yii2使用$this-&gt;context获取当前的Module、Controller(控制器)、Action等
2017/03/29 PHP
php上传图片并给图片打上透明水印的代码
2010/06/07 Javascript
extjs grid设置某列背景颜色和字体颜色的实现方法
2010/09/06 Javascript
javascript中input中readonly和disabled区别介绍
2012/10/23 Javascript
jquery常用方法及使用示例汇总
2014/11/08 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
2016/05/19 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
2016/12/28 Javascript
canvas雪花效果核心代码分享
2017/02/19 Javascript
微信小程序实现根据字母选择城市功能
2017/08/16 Javascript
实例教学如何写vue插件
2017/11/30 Javascript
vue this.reload 方法 配置
2018/09/12 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
微信小程序云开发实现增删改查功能
2019/05/17 Javascript
[03:05]《我与DAC》之xiao8：DAC与BG
2018/03/27 DOTA
在Python的Flask框架中使用日期和时间的教程
2015/04/21 Python
Python的Django框架中的表单处理示例
2015/07/17 Python
Python实现返回数组中第i小元素的方法示例
2017/12/04 Python
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
使用Selenium破解新浪微博的四宫格验证码
2018/10/19 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
python是否适合网页编程详解
2019/10/04 Python
python 使用递归回溯完美解决八皇后的问题
2020/02/26 Python
详解python datetime模块
2020/08/17 Python
Python通过len函数返回对象长度
2020/10/22 Python
css3的transition效果和transfor效果示例介绍
2013/10/30 HTML / CSS
英国旅游额外服务市场领导者：Holiday Extras（机场停车场、酒店、接送等）
2017/10/07 全球购物
世界各地的当地人的食物体验：Eatwith
2019/07/26 全球购物
低碳环保倡议书
2014/04/14 职场文书
三年级评语大全
2014/04/23 职场文书
安全隐患整改报告
2014/11/06 职场文书
生死抉择观后感
2015/06/09 职场文书
胡桃夹子观后感
2015/06/11 职场文书
大学生心理健康教育心得体会
2016/01/12 职场文书
新手入门Mysql--概念
2021/06/18 MySQL
Python 阶乘详解
2021/10/05 Python