CSS3色彩模式有哪些?CSS3 HSL色彩模式的定義

HSL色彩模式是工業(yè)界的一種顏色標(biāo)準(zhǔn),它通過對色調(diào)(H),飽和度(S),亮度(L)三個顏色通道的改變以及他們相互之間的疊加來獲得各種顏色。這個標(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%最亮,顯示為亮色。
實例:網(wǎng)頁配色解決方案
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>HSL Color</title>
- <style type="text/css">
- table {
- border:solid 1px Orange;
- background:#eee;
- padding:6px;
- }
- th {
- color:Orange;
- font-size:12px;
- font-weight:normal;
- }
- td {
- width:80px;
- height:30px;
- }
- /*第1行*/
- tr:nth-child(4) td:nth-of-type(1) { background:hsl(30,100%,100%);}
- tr:nth-child(4) td:nth-of-type(2) { background:hsl(30,75%,100%);}
- tr:nth-child(4) td:nth-of-type(3) { background:hsl(30,50%,100%);}
- tr:nth-child(4) td:nth-of-type(4) { background:hsl(30,25%,100%);}
- tr:nth-child(4) td:nth-of-type(5) { background:hsl(30,0%,100%);}
- /*第2行*/
- tr:nth-child(5) td:nth-of-type(1) { background:hsl(30,100%,88%);}
- tr:nth-child(5) td:nth-of-type(2) { background:hsl(30,75%,88%);}
- tr:nth-child(5) td:nth-of-type(3) { background:hsl(30,50%,88%);}
- tr:nth-child(5) td:nth-of-type(4) { background:hsl(30,25%,88%);}
- tr:nth-child(5) td:nth-of-type(5) { background:hsl(30,0%,88%);}
- /*第3行*/
- tr:nth-child(6) td:nth-of-type(1) { background:hsl(30,100%,75%);}
- tr:nth-child(6) td:nth-of-type(2) { background:hsl(30,75%,75%);}
- tr:nth-child(6) td:nth-of-type(3) { background:hsl(30,50%,75%);}
- tr:nth-child(6) td:nth-of-type(4) { background:hsl(30,25%,75%);}
- tr:nth-child(6) td:nth-of-type(5) { background:hsl(30,0%,75%);}
- /*第4行*/
- tr:nth-child(7) td:nth-of-type(1) { background:hsl(30,100%,63%);}
- tr:nth-child(7) td:nth-of-type(2) { background:hsl(30,75%,63%);}
- tr:nth-child(7) td:nth-of-type(3) { background:hsl(30,50%,63%);}
- tr:nth-child(7) td:nth-of-type(4) { background:hsl(30,25%,63%);}
- tr:nth-child(7) td:nth-of-type(5) { background:hsl(30,0%,63%);}
- /*第5行*/
- tr:nth-child(8) td:nth-of-type(1) { background:hsl(30,100%,50%);}
- tr:nth-child(8) td:nth-of-type(2) { background:hsl(30,75%,50%);}
- tr:nth-child(8) td:nth-of-type(3) { background:hsl(30,50%,50%);}
- tr:nth-child(8) td:nth-of-type(4) { background:hsl(30,25%,50%);}
- tr:nth-child(8) td:nth-of-type(5) { background:hsl(30,0%,50%);}
- /*第6行*/
- tr:nth-child(9) td:nth-of-type(1) { background:hsl(30,100%,38%);}
- tr:nth-child(9) td:nth-of-type(2) { background:hsl(30,75%,38%);}
- tr:nth-child(9) td:nth-of-type(3) { background:hsl(30,50%,38%);}
- tr:nth-child(9) td:nth-of-type(4) { background:hsl(30,25%,38%);}
- tr:nth-child(9) td:nth-of-type(5) { background:hsl(30,0%,38%);}
- /*第7行*/
- tr:nth-child(10) td:nth-of-type(1) { background:hsl(30,100%,25%);}
- tr:nth-child(10) td:nth-of-type(2) { background:hsl(30,75%,25%);}
- tr:nth-child(10) td:nth-of-type(3) { background:hsl(30,50%,25%);}
- tr:nth-child(10) td:nth-of-type(4) { background:hsl(30,25%,25%);}
- tr:nth-child(10) td:nth-of-type(5) { background:hsl(30,0%,25%);}
- /*第8行*/
- tr:nth-child(11) td:nth-of-type(1) { background:hsl(30,100%,13%);}
- tr:nth-child(11) td:nth-of-type(2) { background:hsl(30,75%,13%);}
- tr:nth-child(11) td:nth-of-type(3) { background:hsl(30,50%,13%);}
- tr:nth-child(11) td:nth-of-type(4) { background:hsl(30,25%,13%);}
- tr:nth-child(11) td:nth-of-type(5) { background:hsl(30,0%,13%);}
- /*第9行*/
- tr:nth-child(12) td:nth-of-type(1) { background:hsl(30,100%,0%);}
- tr:nth-child(12) td:nth-of-type(2) { background:hsl(30,75%,0%);}
- tr:nth-child(12) td:nth-of-type(3) { background:hsl(30,50%,0%);}
- tr:nth-child(12) td:nth-of-type(4) { background:hsl(30,25%,0%);}
- tr:nth-child(12) td:nth-of-type(5) { background:hsl(30,0%,0%);}
- </style>
- </head>
- <body>
- <table class="hslexample">
- <tbody>
- <tr>
- <th> </th>
- <th colspan="5">色相:H=30 Red-Yellow (=Orange) </th>
- </tr>
- <tr>
- <th> </th>
- <th colspan="5">飽和度 (→)</th>
- </tr>
- <tr>
- <th>亮度 (↓)</th>
- <th>100% </th>
- <th>75% </th>
- <th>50% </th>
- <th>25% </th>
- <th>0% </th>
- </tr>
- <tr>
- <th>100 </th>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- </tr>
- <tr>
- <th>88 </th>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- </tr>
- <tr>
- <th>75 </th>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- </tr>
- <tr>
- <th>63 </th>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- </tr>
- <tr>
- <th>50 </th>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- </tr>
- <tr>
- <th>38 </th>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- </tr>
- <tr>
- <th>25 </th>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- </tr>
- <tr>
- <th>13 </th>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- </tr>
- <tr>
- <th>0 </th>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- </tr>
- </tbody>
- </table>
- </body>
- </html>
演示效果圖:
常見網(wǎng)頁基本配色方案:
橙色系:朝氣活潑,豁然開朗
黃色系:明亮喜慶,甜蜜幸福
黃綠色系:自然清新,年輕且富有希望
綠色系:新鮮自然,明朗寧靜
青綠色系:健康清新,充滿信心和活力
青色系:堅定,古樸莊重
青藍(lán)色系:爽朗開闊,清涼高遠(yuǎn)
藍(lán)色系:和平,淡雅,潔凈
藍(lán)紫色系:成熟,冷靜,高貴
紫色系:神秘高貴,高雅脫俗
紫紅色系:浪漫柔和,華麗高貴
紅色系:吉祥幸福,古典
以上就是關(guān)于HSL色彩模式的全部內(nèi)容,希望對大家了解認(rèn)識HSL色彩模式有所幫助。
相關(guān)文章
- 現(xiàn)在html5 css3已經(jīng)越來越流行,用CSS3實現(xiàn)DIV漸變已經(jīng)不是什么難事了,這篇文章給大家整理了現(xiàn)在常用的三種顏色漸變模式,包括線性漸變、徑向漸變和重復(fù)的線性漸變,文中2016-11-18
- 這篇文章給大家分享了如何利用CSS3把圖片變成灰色模式的效果,實現(xiàn)起來很簡單,有需要的朋友們可以參考借鑒。2016-09-06
- 這篇文章主要以模擬漸變色條實例,針對CSS3 HSLA色彩模式進(jìn)行介紹,使用HSLA色彩模式,可以設(shè)計不同的透明效果,感興趣的小伙伴們可以參考一下2016-04-26
- 這篇文章主要以設(shè)計帶有陰影邊框的表單為例,為大家介紹了CSS3 RGBA色彩模式使用方法,感興趣的小伙伴們可以參考一下2016-04-26
- 這兩個概念是來源于 macOS系統(tǒng) ,該系統(tǒng)為用戶提供兩個主題皮膚,即 高亮 和 暗色 系的皮膚。接下來通過本文給大家分享使用CSS實現(xiàn)黑暗模式和高亮模式的切換功能,感興趣的2019-06-14