CSS3色彩模式有哪些？CSS3 HSL色彩模式的定义-侯体宗的博客

CSS3色彩模式有哪些？CSS3 HSL色彩模式的定义
前端 / 管理员发布于 7年前 166

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复制内容到剪贴板

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HSL Color</title>
<style type="text/css">
table {
border:solid 1px Orange;
background:#eee;
padding:6px;
}
th {
color:Orange;
font-size:12px;
font-weight:normal;
}
td {
width:80px;
height:30px;
}
/*第1行*/
tr:nth-child(4) td:nth-of-type(1) { background:hsl(30,100%,100%);}
tr:nth-child(4) td:nth-of-type(2) { background:hsl(30,75%,100%);}
tr:nth-child(4) td:nth-of-type(3) { background:hsl(30,50%,100%);}
tr:nth-child(4) td:nth-of-type(4) { background:hsl(30,25%,100%);}
tr:nth-child(4) td:nth-of-type(5) { background:hsl(30,0%,100%);}
/*第2行*/
tr:nth-child(5) td:nth-of-type(1) { background:hsl(30,100%,88%);}
tr:nth-child(5) td:nth-of-type(2) { background:hsl(30,75%,88%);}
tr:nth-child(5) td:nth-of-type(3) { background:hsl(30,50%,88%);}
tr:nth-child(5) td:nth-of-type(4) { background:hsl(30,25%,88%);}
tr:nth-child(5) td:nth-of-type(5) { background:hsl(30,0%,88%);}
/*第3行*/
tr:nth-child(6) td:nth-of-type(1) { background:hsl(30,100%,75%);}
tr:nth-child(6) td:nth-of-type(2) { background:hsl(30,75%,75%);}
tr:nth-child(6) td:nth-of-type(3) { background:hsl(30,50%,75%);}
tr:nth-child(6) td:nth-of-type(4) { background:hsl(30,25%,75%);}
tr:nth-child(6) td:nth-of-type(5) { background:hsl(30,0%,75%);}
/*第4行*/
tr:nth-child(7) td:nth-of-type(1) { background:hsl(30,100%,63%);}
tr:nth-child(7) td:nth-of-type(2) { background:hsl(30,75%,63%);}
tr:nth-child(7) td:nth-of-type(3) { background:hsl(30,50%,63%);}
tr:nth-child(7) td:nth-of-type(4) { background:hsl(30,25%,63%);}
tr:nth-child(7) td:nth-of-type(5) { background:hsl(30,0%,63%);}
/*第5行*/
tr:nth-child(8) td:nth-of-type(1) { background:hsl(30,100%,50%);}
tr:nth-child(8) td:nth-of-type(2) { background:hsl(30,75%,50%);}
tr:nth-child(8) td:nth-of-type(3) { background:hsl(30,50%,50%);}
tr:nth-child(8) td:nth-of-type(4) { background:hsl(30,25%,50%);}
tr:nth-child(8) td:nth-of-type(5) { background:hsl(30,0%,50%);}
/*第6行*/
tr:nth-child(9) td:nth-of-type(1) { background:hsl(30,100%,38%);}
tr:nth-child(9) td:nth-of-type(2) { background:hsl(30,75%,38%);}
tr:nth-child(9) td:nth-of-type(3) { background:hsl(30,50%,38%);}
tr:nth-child(9) td:nth-of-type(4) { background:hsl(30,25%,38%);}
tr:nth-child(9) td:nth-of-type(5) { background:hsl(30,0%,38%);}
/*第7行*/
tr:nth-child(10) td:nth-of-type(1) { background:hsl(30,100%,25%);}
tr:nth-child(10) td:nth-of-type(2) { background:hsl(30,75%,25%);}
tr:nth-child(10) td:nth-of-type(3) { background:hsl(30,50%,25%);}
tr:nth-child(10) td:nth-of-type(4) { background:hsl(30,25%,25%);}
tr:nth-child(10) td:nth-of-type(5) { background:hsl(30,0%,25%);}
/*第8行*/
tr:nth-child(11) td:nth-of-type(1) { background:hsl(30,100%,13%);}
tr:nth-child(11) td:nth-of-type(2) { background:hsl(30,75%,13%);}
tr:nth-child(11) td:nth-of-type(3) { background:hsl(30,50%,13%);}
tr:nth-child(11) td:nth-of-type(4) { background:hsl(30,25%,13%);}
tr:nth-child(11) td:nth-of-type(5) { background:hsl(30,0%,13%);}
/*第9行*/
tr:nth-child(12) td:nth-of-type(1) { background:hsl(30,100%,0%);}
tr:nth-child(12) td:nth-of-type(2) { background:hsl(30,75%,0%);}
tr:nth-child(12) td:nth-of-type(3) { background:hsl(30,50%,0%);}
tr:nth-child(12) td:nth-of-type(4) { background:hsl(30,25%,0%);}
tr:nth-child(12) td:nth-of-type(5) { background:hsl(30,0%,0%);}
</style>
</head>
<body>
<table class="hslexample">
<tbody>
<tr>
<th> </th>
<th colspan="5">色相：H=30 Red-Yellow (=Orange) </th>
</tr>
<tr>
<th> </th>
<th colspan="5">饱和度 (→)</th>
</tr>
<tr>
<th>亮度 (↓)</th>
<th>100% </th>
<th>75% </th>
<th>50% </th>
<th>25% </th>
<th>0% </th>
</tr>
<tr>
<th>100 </th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>88 </th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>75 </th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>63 </th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>50 </th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>38 </th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>25 </th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>13 </th>
<

上一条：
CSS3弹性盒模型开发笔记（二）
下一条：
利用CSS中linear制作复杂的边框效果

0条评论 (评论内容有缓存机制,请悉知!)

最新最热

相关文章
使用 Alpine.js 排序插件对元素进行排序(0个评论)
在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
使用mock-server实现模拟接口对接流程步骤(0个评论)
vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)

近期文章
智能合约Solidity学习CryptoZombie第三课:组建僵尸军队(高级Solidity理论)(0个评论)
智能合约Solidity学习CryptoZombie第二课:让你的僵尸猎食(0个评论)
智能合约Solidity学习CryptoZombie第一课:生成一只你的僵尸(0个评论)
在go中实现一个常用的先进先出的缓存淘汰算法示例代码(0个评论)
在go+gin中使用"github.com/skip2/go-qrcode"实现url转二维码功能(0个评论)
在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)

近期评论
122 在
学历：一种延缓就业设计，生活需求下的权衡之选中评论工作几年后，报名考研了，到现在还没认真学习备考，迷茫中。作为一名北漂互联网打工人..
123 在
Clash for Windows作者删库跑路了，github已404中评论按理说只要你在国内，所有的流量进出都在监控范围内，不管你怎么隐藏也没用，想搞你分..
原梓番博客在
在Laravel框架中使用模型Model分表最简单的方法中评论好久好久都没看友情链接申请了，今天刚看，已经添加。..
博主在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了，可以看看近期评论的其他文章..
1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论网站不能打开，博主百忙中能否发个APP下载链接，佛跳墙或极光..

Top