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>

HTML5系列代码：主色调红色的配色方案表相关推荐

HTML5系列代码：设置滚动条
scrolling 属性规定是否在 iframe 中显示滚动条. 默认地,如果内容超出了 iframe,滚动条就会出现在 iframe 中. <html ><head>< ...
HTML5系列代码：RGBA半透明效果
CSS 中的颜色有三种定义方式:使用颜色方法(RGB.RGBA.HSL.HSLA),十六进制颜色值和预定义的颜色名称. RGBA 是代表Red(红色) Green(绿色) Blue(蓝色)和 Alph ...
HTML5系列代码：框模型的大小
margin 简写属性在一个声明中设置所有外边距属性.该属性可以有 1 到 4 个值. 这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度. 块级元素的垂直相邻外边距会合并,而行内元 ...
HTML5系列代码：使用自定义图像来作为空距
white-space 属性设置如何处理元素内的空白. 这个属性声明建立布局过程中如何处理元素中的空白符.值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的. <html& ...
HTML5系列代码：个人页面
text-decoration 属性规定添加到文本的修饰. 注释:修饰的颜色由 "color" 属性设置. <!DOCTYPE html PUBLIC "-//W3 ...
HTML5系列代码：使用三种方法插入图像
drawImage() 方法在画布上绘制图像.画布或视频. drawImage() 方法也能够绘制图像的某些部分,以及/或者增加或减少图像的尺寸. <!DOCTYPE HTML> < ...
HTML5系列代码：模仿杂志的多列版式
column-span 属性规定元素应横跨多少列. font-weight 属性设置文本的粗细. 该属性用于设置显示元素的文本中所用的字体加粗. 数字值 400 相当于关键字 normal,700 ...
HTML5系列代码：一个完整简单的页面
超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言. 您可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上 ...
HTML5系列代码：为文字设置深灰色阴影
text-shadow 属性向文本设置阴影. 默认值: none 继承性: yes 版本: CSS3 JavaScript 语法: object.style.textShadow="2px ...

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

HTML5系列代码：主色调红色的配色方案表相关推荐

最新文章

热门文章