我們都知道顏色在各種事物中的重要性，無論是網站佈局、圖像、視頻還是其他圖形元素。 essentially, 顏色是一種主觀體驗，來自光線、眼睛和大腦之間的互動。將顏色添加到網站上為整個佈局和圖形元素帶來新的生命力。沒有多少人喜歡訪問布滿白色、黑色和灰色颜色的網頁。顏色使元素看起來更真實且吸引人眼球。
不僅從理論上，心理學也在我們在網站上使用顏色時发挥作用。科学證明，一套特定的顏色會在大腦中觸發特定的情緒，例如秋天的新冠 orange 和 yellow 代表快樂或幸福，紅色代表節慶季節，藍色則被視為平和和值得信賴的。此外，你一定注意到了，許多食品公司經常在其網站上使用紅色和黃色，藥品公司往往在其網站上使用綠色，健身公司有時使用橙色，等等。
創建用戶界面包括許多事情，包括 CSS 網站佈局、元素、CSS 定位、導航、文字等。另一個影響用戶界面的因素是 CSS 中的 HSL 顏色。 CSS 顏色在用戶界面中也佔重要地位，這是大多数人避免的因素之一。
不僅是網站開發者，專業攝影師和視頻編輯也經常使用這個顏色遊戲。創建完美的圖像他們的職業，为此，他們經常使用顏色對比。因此，為元素選擇理想的顏色套件非常重要。
CSS 有許多屬性，包括 background-color、color、linear-gradient 等，讓用戶添加或填充所需的顏色到元素中。所有這些屬性也幫助用戶使字體變得多采多姿，甚至為文字和元素添加一些美麗的顏色圖案。
所有 CSS 顏色屬性都需要一個顏色方法來定義顏色，然後將該顏色填充到指定的元素中。CSS 有一些內置的顏色方法，如 HSL、RGB、HSLA, Hexadecimal 等。然而，這些顏色方法都需要不同單位的一系列整數值來獲取顏色。
雖然許多博客和教程集中於 RGB 和 Hexadecimal 方法，但我們需要覆盖 HSL 方法的方方面面。在本文中，我們將深入探讨 HSL 顏色在 CSS 中的作用，涵盖 HSL 方法的所有細節以及它與其他方法的差異。
在直接跳到 HSL 方法之前，讓我們先討論其他兩種 CSS 顏色方法 – RGB 和 Hexadecimal，以及為什麼我們需要在 CSS 中使用 HSL 顏色。
RGB 和 Hex 之間的差異
＜code＞RGB＜/code＞方法通過考慮每種顏色都是紅色、綠色和藍色颜色的混合物來工作。這種方法需要三個十進制值，在＜code＞rgb()＜/code＞函數中指派在 0 – 255 的範圍內。這些值指定了三個顏色各自的強度等級，＜code>0 值表示最低強度，＜code>255 表示最高強度。
以下是一些不同強度的RGB顏色組合示例：
讓我們以一個例子來了解RGB方法的運作。
.container {
background-color: rgb(0, 200, 120);
width: 100%;
height: 100px;
}輸出：
現在來谈谈十六進制方法。它也是基於每個顏色都是紅色、綠色和藍色混合的概念。十六進制方法需要三個兩位數的HEX數字，從‘#’符號開始。這三個Hex值分別指定紅色、綠色和藍色的強度等級。
由於涉及其中的十六進制值，而十六進制基数在0-15的範圍內，值在10-15的範圍內用字母A-F表示。因此，00給出最低強度的顏色，而FF則產生最高強度等級。
以下是一些常見的Hex顏色代碼：
讓我們以一個例子來了解Hex方法的運作。
.container1{
background-color:#91D8E4;
}輸出：
使用RGB和十六進制方法進行工作方便且可以給我們所有我們想要的。但這並不是真的。使用這兩種方法工作並不是表面上看起那麼簡單。讓我們來看一下原因。
與RGB和十六進制顏色代碼相關的問題。
這兩種方法帶來的顯著問題之一是它們並不是直觀的。這意味著它們並不像人腦如何認識顏色那样工作。當一個人看到一個顏色時，人腦并不会將這個顏色分為紅色、綠色和蓝色。因此，对于我们來說，通過他們的RGB數字和十六進制或十進制數字來認識顏色變得困難。
在開發者或測試人员的日常生活中，可能會出現的一種情況是需要將RGB轉為Hex或相反的轉换，以便於更好地被人類理解和溝通。
在創建用戶界面時，UI設計人员和網頁開發人员需要若干種特定顏色的阴影，以保持介面的一致性问题。例如，30種藍色、20種綠色、10種橙色等，取決於需求。如果我們使用CSS變量來保存這些顏色的變化，可能會造成混亂。當我們發現所有這些變體的RGB值都無關聯時，情況會变得更糟。
但是，RGB和十六進制方法的這種缺點可以通過CSS中的HSL顏色來消除。現在，讓我們通過討論HSL方法的含義、工作方式以及它如何克服RGB和十六進制方法的缺點，來了解CSS中HSL顏色所扮演的角色。
HSL是什麼？
HSL代表色相、饱和度、亮度。换句话说，HSL是由三個測量因素 – 色相、饱和度、亮度 – 組合而成的。與上文提及的其他兩種方法一樣，HSL方法也是基於每個顏色都是由紅色、綠色和藍色混合而成這個觀察。
由於HSL格式中的主要顏色是紅色、綠色和藍色，因此RGB顏色輪是HSL顏色在CSS中背后的核心概念。
RGB（紅色、綠色、藍色）顏色輪主要表示 Inside a circle 內填滿的顏色。這個輪展示原色、次要色和三次色之間的關係。然而，有三種類型的顏色輪 – RGB（紅色、綠色、藍色）、CMY（青色、品紅色、黃色）和RYB（紅色、黃色、藍色）。
上面附上的圖表代表RGB顏色輪。您可以觀察到紅色在0度，綠色在120度，藍色在240度。讓我們深入這些三個特性，並了解在使用HSL顏色在CSS時背後發生什麼。
色相
在使用HSL顏色在CSS中，色相是這個方法中首个指定的值。它是顏色在顏色輪上的角度測量。定義的角度值從正x軸以逆時針方向計算，返回該角度的顏色。由於它是角度的測量，其默認值以度數为单位。然而，這個方法讓我們能在其他單位中定義角度值，包括rad、grad和turn。
角度單位的值介於0至360度之間。在0度時為紅色，120度時為綠色，240度時為藍色。對於弧度，值的範圍是0至6.28弧度。在CSS中的HSL顏色中最常使用的單位值是角度值。
讓我們舉一個例子來了解色调的運作方式。
div {
border: 2px solid;
height: 100px;
background-color: hsl(123deg, 39%, 49%);
}輸出:
雖然角度值受限制於0至360之間，但它可以接受小於0度和大於360度的值。當值大於360時，通過從360中減去它來將其轉換為範圍內的健康值。在值小於0或負值的情況下，將值加到360，然後使用所得的值來提取顏色。
background-color: hsl(400deg, 39%, 49%);輸出:
background-color: hsl(-120deg, 39%, 49%);Output:
<div class="container1">Container 1</div>
<div class="container2">Container 2</div>
div {
border: 2px solid;
height: 100px;
text-align: center;
font-size: 80px;
margin-bottom: 10px;
}
.container1 {
background-color: hsl(60, 39%, 49%);
}
.container2 {
background-color: hsl(420, 39%, 49%);
}Output:
如果從角度值的角度考慮，那麼60度和420度（420 – 360 = 60）兩個值都是相同的。因此，在上面示例中观察到，兩個容器的背景顏色一樣。
.container1 {
background-color: hsl(90, 39%, 49%);
}
.container2 {
background-color: hsl(-270, 39%, 49%);
}Output:
在此處，您也可以觀察到90度和-270度給我們同样的結果，這是因為與前一個示例中的相同原因。如果我們以角度值考慮，那麼90度和-270度兩個值是相同的。
現在，讓我們繼續 discusses the second characteristic of the HSL method, i.e., Saturation.
饱和度
飽和度定義了颜色的純淨程度以及顏色會有多少飽和或不飽和。换个说法，飽和度特性操縱了颜色的強度等級。飽和度的衡量接受一個整數值，以百分比的形式來定義颜色的飽和度。
讓我們通過一個例子來了解飽和度的運作。
.container{
background-color:hsl(60, 45%,49%);
}輸出：
如果飽和度特性值高，那麼顏色強度也高，該顏色中的灰色調比例就會少。因此，飽和度特性的100%值會給我們純淨顏色，50%值則會導致顏色和灰色調各占一半，而0%值則會導致完全的灰色調。
.container1{
background-color:hsl(60, 0%,49%);
}
.container2{
background-color:hsl(420, 25%,49%);
}
.container3{
background-color:hsl(420, 50%,49%);
}
.container4{
background-color:hsl(420, 75%,49%);
}
.container5{
background-color:hsl(420, 100%,49%);
}輸出：
在上面這個例子中，您可以看到通過從0%增加飽和度特性值到100%，容器的背景顏色有哪些變化。在0%值時，容器1中我們得到完全是灰色調，而當值增加時，顏色的強度也增加。最後，在100%值時，容器5中的強度最高。
由於飽和度特性接受百分比值，所以得到的值在0% – 100%範圍內。 Somehow，用戶也可以傳遞介於100%和0%之間的值作為飽和度特性。
但就像色调特性一樣，傳遞超出範圍的值沒有太大用途，因為如果用戶傳遞一個超過100%的值，顏色的強度仍等於100%。在0%以下的值（負值）時，強度仍等於0%。
.container1 {
background-color: hsl(60, 0%, 49%);
}
.container2 {
background-color: hsl(420, -25%, 49%);
}輸出：
在此，您可以觀察到我們為飽和度特性分配了0%和-25%的值，而且在兩個容器中，我們獲得了相同的背景顏色。
.container1 {
background-color: hsl(60, 100%, 49%);
}
.container2 {
background-color: hsl(420, 200%, 49%);
}输出：
在這個示例中，我們為飽和度特性初始化了100%和200%的值，對於這兩個不同的值，我們在兩個容器中獲得了相同的背景顏色。
現在，是时候來看看CSS中HSL顏色所用到的HSL方法的最後一個特性，即亮度。
亮度
如其名稱所示，亮度特徵控制顏色中的光量。言語而言，亮度也可以被描述為控制顏色是亮還是暗的屬性。與飽和度特徵一樣，亮度特徵也要求用百分比单位的整數值。
讓我們通過一個例子來了解亮度的运作。
.container {
background-color: hsl(60, 39%, 49%);
}输出：
.container1 {
background-color: hsl(60, 39%, 0%);
color: white;
}
.container2 {
background-color: hsl(420, 39%, 25%);
}
.container3 {
background-color: hsl(420, 39%, 50%);
}
.container4 {
background-color: hsl(420, 39%, 75%);
}
.container5 {
background-color: hsl(420, 39%, 100%);
}
输出：
在此，您可以觀察到在0%亮度時，容器1的背景顏色是纯黑色，而當亮度值增加時，顏色的亮度增加，而在100%亮度時是完全；因此，容器5的背景顏色是纯白色。
與飽和度特徵一樣，亮度特徵接受100%以上和0%以下的值。但100%以上的值與100%相同，而0%以下的值（負值）與0%相同。讓我們看看實際情況。
.container1 {
background-color: hsl(60, 39%, 0%);
}
.container2 {
background-color: hsl(420, 39%, -25%);
}输出：
.container1 {
background-color: hsl(60, 39%, 100%);
}
.container2 {
background-color: hsl(420, 39%, 250%);
}输出：
在這個示例中，您可以觀察到，即使我們在容器1中指定了100%的亮度值，在容器2中指定了200%的值，背景顏色仍然給我們一樣的結果。
我們一直在討論CSS中HSL颜色的三大特點，但還不止如此。CSS中HSL顏色下的另一個特性是“A”，即“alpha”的缩寫。這是第四個特性。Alpha特性指定颜色的不透明度。换句话说，Alpha特性僅僅調整颜色的透明度级别。在HSL中，使用alpha特性時，使用HSLA方法。
與CSS中HSL顏色其他特性不同，它需要由单位和值的組合，alpha特性不需要值 unit。Alpha特性要求一個無单位的值，範圍從0 – 1。在0時，顏色是不可見或隱藏的；在1時，alpha特性達到頂點，顏色完全可见。
.container{
background-color:hsla(60, 39%,49%, 0);
}輸出：
.container{
background-color:hsla(60, 39%,49%, 1);
}輸出：
在此處，因為我們指定了alpha特性為1的值，容器的背景顏色變得可见，我們可以開始背景顏色。
要求無单位的值並不是alpha特性之間的不同。Alpha特性可以接受從0到1的任何值，甚至是小數值（0.1, 0.2, 0.01），這在CSS中HSL顏色其他特性中不起作用。
.container {
background-color: hsla(60, 39%, 49%, 0.5);
}輸出：
在這個示例中，正如您所觀察到的，我們將alpha特性分配了0.5（一半）的值。因此，作為結果，我們在容器中得到了半透明的背景顏色。不僅是一個小數點的位置，alpha特性也接受兩個小數點的位置。這給顏色透明度的控制提供了完全的控制權。
以下是一個示例。
.container {
background-color: hsla(60, 39%, 49%, 0.25);
}輸出：
在此，我們傳遞了一個0.25值，這是一個兩個小數點位置的值給alpha特性。
使用HSL顏色在CSS中的優點
HSL（色调、飽和度、亮度）顏色是CSS顏色模塊中相對較新的增強，提供了一種更直觀、更靈活的方式來指定網站開發中的顏色。與傳統的RGB或十六進制顏色代碼相比，CSS中的HSL顏色為設計師和開發者提供了一系列的優點。
在這一節中，我們將更深入地探讨使用HSL顏色在CSS中的優點，並討論如何使用它們來為網站和應用程序創建視覺上吸引人且易於訪問的設計。
在實際應用上，CSS中的HSL顏色在許多專業層面上都被认为是使用的好選擇，因為它們具有優點。
使用HSL顏色有以下幾個優點：
- 通過使其更滑順，從而整體改善工作流程
- 當我們通過保持標準基本顏色來獲得不同顏色時，這非常實用
- 提供一个强大且直接的方法，可能性广阔的颜色
- 人們观察颜色的實際方式
- HSL方法生成的顏色清晰表達，易于想像結果。
使用HSL顏色在CSS中的另一個重要優點是它也可以作為RGB的替換方案，並易於轉換成RGB。由於RGB和HSL方法都需要一套數值來工作需要，我們可以利用能把HSL顏色的數值轻易轉換為RGB方法分数值的方法。
為了讓事情更簡單，一些線上顏色轉換器可以把顏色方法從一個轉換到另一個。這些優點使CSS中的HSL顏色成為项目中定义顏色的首選方法。並且每天都有越来越多的開發者選擇在CSS中使用HSL顏色。雖然大多數CSS專家仍然偏好使用HEX或RGB方法而非HSL，但HSL正日益受到關注。
使用CSS中HSL顏色的應用
CSS中的HSL顏色提供了一种多才多藝且直觀的指定顏色方式，並在網頁開發中有許多應用。以下是使用HSL顏色在CSS中的一些主要應用：
染色顏色
在專業水平上，為了在接口的不同部分創建一致的主題，網站主題是通過在接口的不同部分使用特定颜色的不同阴影來設計的。在這種情況下，HSL方法變得非常方便。
在這個示例中，我們考慮了兩個基本的網站佈局。在這些佈局中，頂部區域填滿了背景顏色，而內容區域有相同的背景顏色但亮度較低。為了達到這個效果，我們在頂部區域保持了亮度特性的低值，在內容區域則保持了高值。
通過在不同值上嘗試亮度特性，我們可以得到相同顏色 dark 和 light 色调來應用於網站佈局。
當滑鼠懸停在暗色调上
您可能已經觀察到，網站界面上有些元件當用戶將滑鼠悬停在其上時會更改顏色。它們的顏色從較亮的色调變為較暗的色调。在這個地方，CSS 中的 HSL 顏色用於提供共用顏色的較亮和較暗色调。
button {
padding: 10px;
border-radius: 20px;
background-color: hsl(240, 39%, 70%);
color: white;
font-size: 20px;
}
button:hover {
background-color: hsl(240, 39%, 50%);
cursor: pointer;
}
在此，您可以觀察到在上面的按鈕中，顏色是較亮的色调，對於此，我們將亮度特性值保持在70%。而在滑鼠懸停後，按鈕顏色會變為較暗的色调，如您可以在下面的按鈕中注意到的。為了達到這個效果，我們將亮度特性值指定為50%，這比上面的按鈕低。
白色顏色的阴影
大多数时候，我们需要使用白色作为字体颜色以使文本与整个网站界面略有不同。但使用相同的白色阴影会让用户体验变得单调。为了避免这一点，我们可以使用不同的白色阴影来使文本突出并保持其有趣。
CSS中的HSL顏色可以幫助我們獲得不同的白色調色板。我們可以在HSL方法中的亮度特性添加不同的值來獲得不同的白色調色板。
.container1 {
color: hsl(30, 49%, 100%);
}
.container2 {
color: hsl(30, 49%, 90%);
}
.container3 {
color: hsl(30, 49%, 95%);
}
.container4 {
color: hsl(30, 49%, 85%);
}輸出：
在這個示例中，您可以觀察到在所有四個容器中，文字都不是基本的白色彩色。我們使用不同的白色調色板给它帶來刺激的视觉效果並保持為白色。對於此，我們操縱了字體颜色的亮度特性的值。
按鈕類型
CSS中的HSL顏色在我們為按鈕使用同一顏色不同調色板時也非常方便。分配不同調色板的共同顏色使用戶能夠快速識別哪一个是主要按鈕和哪一个是次要按鈕。
在現實生活中，深色调顏色用於主要按鈕，而淡色调則用於次要顏色。為了獲得共同顏色的深色和淡色調色板，我們在HSL方法中傳遞亮度特性的高值和低值。
讓我們通過一個示例来看見實際效果。
.primary {
color: white;
background-color: hsl(10, 49%, 55%);
}
.secondary {
background-color: hsl(10, 49%, 80%);
}輸出：
在上述示例中，上半個按鈕是主要按鈕，下半個按鈕是次要按鈕。主要按鈕使用低亮度值的深色调顏色，次要按鈕則使用高亮度值的淡色调顏色。
深色调顏色
在使用介面設計時，正確的顏色對比是至關重要的。特別是當用戶在網站上啟用深色主题为。根據2022年所做的研究，81.9% 的用戶在其智能手机上使用深色主题。從這點可以想像，在深色主题介面設計中顏色對比的重要性。
根據WCAG的无障碍標準，對於深色表面的主体文字，至少應保持4:5:1的對比度。為了遵守這個規則，深色主题为避免使用飽和顏色。如果在与深色背景搭配使用时，饱和颜色的使用也会增加眼睛的负担。
在上面figure中，很明显，与高飽和度值相比，使用低飽和度的文字更容易阅读。因此，建議总是在深色背景上使用不飽和顏色。
如何選擇最佳的顏色指定器
我們討論的這三個方法都有其優點和缺點。取決於使用情境，哪個顏色指定器对其表現最好。我們無法有一個共通的因素來比較這三個顏色指定器，但讓我們檢查每個這些。
十六進制
如果你不在設計領域或為個人使用創建項目，那麼你可能需要使用十六進制方法來指定顏色。許多開發者偏好使用十六進制方法，因為其簡潔性，與CSS中的RGB和HSL顏色相比，不會太大複雜。
复制您所需颜色的十六進制代碼並將其嵌入到您的程式中。但當我們需要操縱颜色的透明度時，就会出现困難。十六進制方法無法讓用戶控制颜色的透明度。
RGB
當您考慮使用RGB方法時：這種方法對於所有專業的開發者和設計者在照片編輯和設計領域中非常方便。另一個原因是RGB方法是许多流行的設計軟件中最常使用的顏色指定方式，包括CorelDraw、PhotoShop和Illustrator。但當涉及到提供同一颜色的不同阴影而不變得過於複雜時，RGB方法就會失敗。
HSL
現在考慮HSL方法。專業的網頁開發者和用戶界面設計者往往會在界面上维持一個常見的主題。在這種情況下，使用CSS中的HSL顏色成為了幫助之手，因為它通過更改饱和度和亮度特性的值來改變颜色的阴影。最後，這一切都取決於個人的偏好。您可以選擇這三個指定器中的任何一个來進行工作。
瀏覽器兼容性
如果定義的顏色在瀏覽器上沒有達到期望的輸出，那麼指定顏色就没有用途。为了避免這種情況，用於設計用戶界面的顏色指定應該與每個瀏覽器兼容。
幸運的是，HSL顏色在CSS中的工作完全獨立於瀏覽器。HSL方法完全與瀏覽器兼容。所以，無論用戶使用什麼瀏覽器，他總是會正確地看到 webpage上有正確定義的顏色。
然而，您可以進行跨瀏覽器測試，以确保CSS中的HSL顏色能給出期望的結果在每個瀏覽器上。不斷質量測試平台（即LambdaTest）幫助您在不同的真实瀏覽器、設備和作業系統組合上進行跨瀏覽器兼容性測試。它檢查指定的CSS顏色是否在瀏覽器和設備上正確工作。
結論
本博客教導我們CSS中HSL顏色的作用以及它們與其他顏色方法的差異。我們也討論了CSS中HSL顏色的應用和它們的益處。我們還學習了CSS中的HSL顏色在指定網站設計中的顏色時提供更廣泛的靈活性和準確性。
通過在CSS中使用HSL顏色，設計者可以對顏色的飽和度和亮度有更多的控制，從而使網站和應用程序中可用的色调和阴影範圍更廣，以配合同品牌身份或美学視野。
CSS中的HSL顏色讓更多的人能夠獲得訪問能力；通過簡單地調整顏色的亮度和飽和度，為文字和其他設計元素創造更大的對比和可讀性，使其更容易讓用戶導航和理解內容。總的來說，CSS中的HSL顏色為網頁設計師和開發者提供了一個強大的工具，以在他們的網站設計中創造充滿活力且易於訪問的顏色方案。
Source:
https://dzone.com/articles/create-cohesive-ux-using-hsl-colors-in-css