CSS3色彩模式有哪些？CSS3 HSL色彩模式的定义

HSL色彩模式是工业界的一种颜色标准，它通过对色调（H），饱和度（S），亮度（L）三个颜色通道的改变以及他们相互之间的叠加来获得各种颜色。这个标准几乎包括了人类视力可以感知的所有颜色，在屏幕上可以重现16777216种颜色，是目前应用最广的颜色系统之一。

语法：

hsl（,,）

参数说明：

表示色调（Hue），Hue衍生于色盘，取值可以为任意数值，其中0（或360或-360）表示红色，60表示黄色，120表示绿色，180表示青色，240表示蓝色，300表示洋红，当然可以设置其他数值来确定不同的颜色。

表示饱和度（Saturation），表示该色彩被使用了多少，即颜色的深浅程度和鲜艳程度。取值为0%到100%之间的值，其中0%表示灰度，即没有使用该颜色；100%的饱和度最高，即颜色最鲜艳。

表示亮度（Lightness），取值为0%到100%之间的值，其中0%表示最暗，显示为黑色；50%表示均值，100%最亮，显示为亮色。

实例：网页配色解决方案

1.   
2.   
3.   
4.   
5.   
6.   
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.   
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.   
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.   
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.   
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.   
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.   
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.   
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.   
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.   
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.   
77.   
78.   
79.   
80.   
81.       
82.           
83.                
84.             色相：H=30 Red-Yellow (=Orange)    
85.           
86.           
87.                
88.             饱和度 (→)  
89.           
90.           
91.             亮度 (↓)  
92.             100%   
93.             75%   
94.             50%   
95.             25%   
96.             0%   
97.           
98.           
99.             100   
100.                
101.                
102.                
103.                
104.                
105.           
106.           
107.             88   
108.                
109.                
110.                
111.                
112.                
113.           
114.           
115.             75   
116.                
117.                
118.                
119.                
120.                
121.           
122.           
123.             63   
124.                
125.                
126.                
127.                
128.                
129.           
130.           
131.             50   
132.                
133.                
134.                
135.                
136.                
137.           
138.           
139.             38   
140.                
141.                
142.                
143.                
144.                
145.           
146.           
147.             25   
148.                
149.                
150.                
151.                
152.                
153.           
154.           
155.             13   
156.                
157.                
158.                
159.                
160.                
161.           
162.           
163.             0   
164.                
165.                
166.                
167.                
168.                
169.           
170.       
171.   
172.   
173.   

演示效果图：

常见网页基本配色方案：

橙色系：朝气活泼，豁然开朗

黄色系：明亮喜庆，甜蜜幸福

黄绿色系：自然清新，年轻且富有希望

绿色系：新鲜自然，明朗宁静

青绿色系：健康清新，充满信心和活力

青色系：坚定，古朴庄重

青蓝色系：爽朗开阔，清凉高远

蓝色系：和平，淡雅，洁净

蓝紫色系：成熟，冷静，高贵

紫色系：神秘高贵，高雅脱俗

紫红色系：浪漫柔和，华丽高贵

红色系：吉祥幸福，古典

以上就是关于HSL色彩模式的全部内容，希望对大家了解认识HSL色彩模式有所帮助。