溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

CSS3的色彩模式有哪些

發(fā)布時(shí)間：2021-08-10 23:48:36 來源：億速云 閱讀：146 作者：chen 欄目：web開發(fā)

本篇內(nèi)容介紹了“CSS3的色彩模式有哪些”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

HSL色彩模式是工業(yè)界的一種顏色標(biāo)準(zhǔn)，它通過對色調(diào)（H），飽和度（S），亮度（L）三個(gè)顏色通道的改變以及他們相互之間的疊加來獲得各種顏色。這個(gè)標(biāo)準(zhǔn)幾乎包括了人類視力可以感知的所有顏色，在屏幕上可以重現(xiàn)16777216種顏色，是目前應(yīng)用最廣的顏色系統(tǒng)之一。

語法：

hsl（<length>,<percentage>,<percentage>）

參數(shù)說明：

<length>表示色調(diào)（Hue），Hue衍生于色盤，取值可以為任意數(shù)值，其中0（或360或-360）表示紅色，60表示黃色，120表示綠色，180表示青色，240表示藍(lán)色，300表示洋紅，當(dāng)然可以設(shè)置其他數(shù)值來確定不同的顏色。

<percentage> 表示飽和度（Saturation），表示該色彩被使用了多少，即顏色的深淺程度和鮮艷程度。取值為0%到100%之間的值，其中0%表示灰度，即沒有使用該顏色；100%的飽和度最高，即顏色最鮮艷。

<percentage> 表示亮度（Lightness），取值為0%到100%之間的值，其中0%表示最暗，顯示為黑色；50%表示均值，100%最亮，顯示為亮色。

實(shí)例：網(wǎng)頁配色解決方案

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

  2. <html xmlns="http://www.w3.org/1999/xhtml">  

  3. <head>  

  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

  5. <title>HSL Color</title>  

  6. <style type="text/css">  

  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. </style>  

  77. </head>  

  78.   

  79. <body>  

  80. <table class="hslexample">  

  81.     <tbody>  

  82.         <tr>  

  83.             <th> </th>  

  84.             <th colspan="5">色相：H=30 Red-Yellow (=Orange)  </th>  

  85.         </tr>  

  86.         <tr>  

  87.             <th> </th>  

  88.             <th colspan="5">飽和度 (&rarr;)</th>  

  89.         </tr>  

  90.         <tr>  

  91.             <th>亮度 (&darr;)</th>  

  92.             <th>100% </th>  

  93.             <th>75% </th>  

  94.             <th>50% </th>  

  95.             <th>25% </th>  

  96.             <th>0% </th>  

  97.         </tr>  

  98.         <tr>  

  99.             <th>100 </th>  

  100.             <td> </td>  

  101.             <td> </td>  

  102.             <td> </td>  

  103.             <td> </td>  

  104.             <td> </td>  

  105.         </tr>  

  106.         <tr>  

  107.             <th>88 </th>  

  108.             <td> </td>  

  109.             <td> </td>  

  110.             <td> </td>  

  111.             <td> </td>  

  112.             <td> </td>  

  113.         </tr>  

  114.         <tr>  

  115.             <th>75 </th>  

  116.             <td> </td>  

  117.             <td> </td>  

  118.             <td> </td>  

  119.             <td> </td>  

  120.             <td> </td>  

  121.         </tr>  

  122.         <tr>  

  123.             <th>63 </th>  

  124.             <td> </td>  

  125.             <td> </td>  

  126.             <td> </td>  

  127.             <td> </td>  

  128.             <td> </td>  

  129.         </tr>  

  130.         <tr>  

  131.             <th>50 </th>  

  132.             <td> </td>  

  133.             <td> </td>  

  134.             <td> </td>  

  135.             <td> </td>  

  136.             <td> </td>  

  137.         </tr>  

  138.         <tr>  

  139.             <th>38 </th>  

  140.             <td> </td>  

  141.             <td> </td>  

  142.             <td> </td>  

  143.             <td> </td>  

  144.             <td> </td>  

  145.         </tr>  

  146.         <tr>  

  147.             <th>25 </th>  

  148.             <td> </td>  

  149.             <td> </td>  

  150.             <td> </td>  

  151.             <td> </td>  

  152.             <td> </td>  

  153.         </tr>  

  154.         <tr>  

  155.             <th>13 </th>  

  156.             <td> </td>  

  157.             <td> </td>  

  158.             <td> </td>  

  159.             <td> </td>  

  160.             <td> </td>  

  161.         </tr>  

  162.         <tr>  

  163.             <th>0 </th>  

  164.             <td> </td>  

  165.             <td> </td>  

  166.             <td> </td>  

  167.             <td> </td>  

  168.             <td> </td>  

  169.         </tr>  

  170.     </tbody>  

  171. </table>  

  172. </body>  

  173. </html>  

演示效果圖：

CSS3的色彩模式有哪些

常見網(wǎng)頁基本配色方案：

橙色系：朝氣活潑，豁然開朗

CSS3的色彩模式有哪些

黃色系：明亮喜慶，甜蜜幸福

CSS3的色彩模式有哪些

黃綠色系：自然清新，年輕且富有希望

CSS3的色彩模式有哪些

綠色系：新鮮自然，明朗寧靜

CSS3的色彩模式有哪些

青綠色系：健康清新，充滿信心和活力

CSS3的色彩模式有哪些

青色系：堅(jiān)定，古樸莊重

CSS3的色彩模式有哪些

青藍(lán)色系：爽朗開闊，清涼高遠(yuǎn)

CSS3的色彩模式有哪些

藍(lán)色系：和平，淡雅，潔凈

CSS3的色彩模式有哪些

藍(lán)紫色系：成熟，冷靜，高貴

CSS3的色彩模式有哪些

紫色系：神秘高貴，高雅脫俗

CSS3的色彩模式有哪些

紫紅色系：浪漫柔和，華麗高貴

CSS3的色彩模式有哪些

紅色系：吉祥幸福，古典

CSS3的色彩模式有哪些

“CSS3的色彩模式有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手