CSS3的色彩模式有哪些

本篇内容介绍了“CSS3的色彩模式有哪些”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

站在用户的角度思考问题，与客户深入沟通，找到梨林网站设计与梨林网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：做网站、成都做网站、企业官网、英文网站、手机端网站、网站推广、国际域名空间、雅安服务器托管、企业邮箱。业务覆盖梨林地区。

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%最亮，显示为亮色。

实例：网页配色解决方案

XML/HTML Code复制内容到剪贴板

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. /*第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.   

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.   

演示效果图：

常见网页基本配色方案：

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

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

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

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

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

青色系：坚定，古朴庄重

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

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

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

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

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

红色系：吉祥幸福，古典

“CSS3的色彩模式有哪些”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！