HTML5系列代码:主色调红色的配色方案表

  • hsl() 函数使用色相、饱和度、亮度来定义颜色。
  • HSL 即色相、饱和度、亮度(英语:Hue, Saturation, Lightness)。
  • 色相(H)是色彩的基本属性,就是平常所说的颜色名称,如红色、黄色等。
  • 饱和度(S)是指色彩的纯度,越高色彩越纯,低则逐渐变灰,取 0-100% 的数值。
  • 亮度(L),取 0-100%,增加亮度,颜色会向白色变化;减少亮度,颜色会向黑色变化。
  • HSL 是一种将 RGB 色彩模型中的点在圆柱坐标系中的表示法。这两种表示法试图做到比基于笛卡尔坐标系的几何结构 RGB 更加直观。
    支持版本:CSS3
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>配色方案表</title>
<style type="text/css">
.hsl {
	height:20px;
	border:1px solid #f00;
	padding:10px;
	height:170px;
	background-color:hsl(0, 0%, 90%);
	color:hsl(0, 100%, 50%);
	font-size:12px;
	text-align:center;
	line-height:25px;
	width:320px;
}
ul {
	width:320px;
	margin:0;
	padding:10px 0;
	border-top:1px solid #ccc;
}
li {
	float:left;
	margin:1px 0 0 1px;
	width:50px;
	height:15px;
	list-style:none;
	font-size:12px;
	line-height:15px;
}
/* 第一行 */
li:nth-child(8) {background-color:hsl(0, 100%, 100%);}
li:nth-child(9) {background-color:hsl(0, 75%, 100%);}
li:nth-child(10) {background-color:hsl(0, 50%, 100%);}
li:nth-child(11) {background-color:hsl(0, 25%, 100%);}
li:nth-child(12) {background-color:hsl(0, 0%, 100%);}
/* 第二行 */
li:nth-child(14) {background-color:hsl(0, 100%, 75%);}
li:nth-child(15) {background-color:hsl(0, 75%, 75%);}
li:nth-child(16) {background-color:hsl(0, 50%, 75%);}
li:nth-child(17) {background-color:hsl(0, 25%, 75%);}
li:nth-child(18) {background-color:hsl(0, 0%, 75%);}
/* 第三行 */
li:nth-child(20) {background-color:hsl(0, 100%, 50%);}
li:nth-child(21) {background-color:hsl(0, 75%, 50%);}
li:nth-child(22) {background-color:hsl(0, 50%, 50%);}
li:nth-child(23) {background-color:hsl(0, 25%, 50%);}
li:nth-child(24) {background-color:hsl(0, 0%, 50%);}
/* 第四行 */
li:nth-child(26) {background-color:hsl(0, 100%, 25%);}
li:nth-child(27) {background-color:hsl(0, 75%, 25%);}
li:nth-child(28) {background-color:hsl(0, 50%, 25%);}
li:nth-child(29) {background-color:hsl(0, 25%, 25%);}
li:nth-child(30) {background-color:hsl(0, 0%, 25%);}
/* 第五行 */
li:nth-child(32) {background-color:hsl(0, 100%, 0%);}
li:nth-child(33) {background-color:hsl(0, 75%, 0%);}
li:nth-child(34) {background-color:hsl(0, 50%, 0%);}
li:nth-child(35) {background-color:hsl(0, 25%, 0%);}
li:nth-child(36) {background-color:hsl(0, 0%, 0%);}
</style>
<body>
<div class="hsl">
  <div>色调:0 红色</div>
  <div>竖向:亮度;横向:饱和度</div>
  <ul>
    <li></li>
    <li>100%</li>
    <li>73%</li>
    <li>50%</li>
    <li>25%</li>
    <li>0%</li>
    <li>100%</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li>75%</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li>50%</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li>25%</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li>0%</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
</body>
</html>

展开阅读全文
©️2020 CSDN 皮肤主题: 成长之路 设计师: Amelia_0503 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值