首页
所有分类
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媒体查询(Media Queries)介绍
Sep 12 HTML / CSS
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
Aug 19 HTML / CSS
CSS3 @font-face属性使用指南
Dec 12 HTML / CSS
HTML5 Web 存储详解
Sep 16 HTML / CSS
基于Canvas+Vue的弹幕组件的实现
Jul 23 HTML / CSS
html5时钟实现代码
Oct 22 HTML / CSS
HTML中fieldset标签概述及使用方法
Feb 01 HTML / CSS
HTML5 创建canvas元素示例代码
Jun 04 HTML / CSS
HTML5无刷新改变当前url的代码
Mar 15 HTML / CSS
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
Apr 07 HTML / CSS
html5移动端禁止长按图片保存的实现
Apr 20 HTML / CSS
分享几个实用的CSS代码块
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
正则表达式(3) Coroutine(1) 静态压缩(1) 驱动模型(1) 乱码(3) 自动播放(1) 接口(1) 信息校验(1) 分区(2) Excel(4)
You might like
PHP中使用smarty生成静态文件的例子
2014/04/24 PHP
如何使用PHP对网站验证码进行破解
2015/09/17 PHP
轻轻松松学习JavaScript
2007/02/25 Javascript
jquery 最简单的属性菜单
2009/10/08 Javascript
ExtJS 工具栏 分页事件参数
2010/03/05 Javascript
js使下拉列表框可编辑不止是选择
2013/12/12 Javascript
js document.write()使用介绍
2014/02/21 Javascript
jQuery中noconflict函数的实现原理分解
2015/02/03 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
2015/06/30 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
2016/01/25 Javascript
Extjs4.0 ComboBox如何实现三级联动
2016/05/11 Javascript
JS 根据子网掩码，网关计算出所有IP地址范围示例
2020/04/23 Javascript
jQuery实现删除li节点的方法
2016/12/06 Javascript
js验证手机号、密码、短信验证码代码工具类
2020/06/24 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
2017/04/13 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
2017/08/25 Javascript
js判断节假日实例代码
2017/12/27 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
2018/03/12 Javascript
cocos2dx+lua实现橡皮擦功能
2018/12/20 Javascript
微信小程序实现文字无限轮播效果
2018/12/28 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
2019/02/21 Javascript
微信小程序下拉菜单效果的实例代码
2019/05/14 Javascript
vue.js实现双击放大预览功能
2020/06/23 Javascript
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
Python实现的ini文件操作类分享
2014/11/20 Python
Python实现删除排序数组中重复项的两种方法示例
2019/01/31 Python
Python常见数据类型转换操作示例
2019/05/08 Python
Python实现屏幕录制功能的代码
2020/03/02 Python
Pandas中DataFrame基本函数整理(小结)
2020/07/20 Python
澳洲国民品牌乡村路折扣店：Country Road & Trenery Outlet
2018/04/19 全球购物
初始化了一个没有run()方法的线程类,是否会出错？
2014/03/27 面试题
测试工程师职业规划书
2014/02/06 职场文书
校长寄语大全
2014/04/09 职场文书
机电一体化专业毕业生自荐信
2014/06/19 职场文书
职场新人刚入职工作总结该怎么写？
2019/05/15 职场文书