相信您已經熟悉顏色的 RGB 和 HEX 表示，因為這是大多數文章/教程在編寫 CSS 顏色時使用的，但這些并不是在 CSS 中編寫顏色的最佳方法。HEX 和 RGB 很難理解，使顏色變淺/變深或將顏色從紅色轉換為橙色并不容易。這就是 HSL 的用武之地。HSL 是一種更容易閱讀的格式，它使更改顏色的亮度或色調等操作變得簡單。

什么是 HSL？

HSL 代表色相、飽和度和亮度。這類似于 RGB 如何通過將其紅色、綠色和藍色值組合在一起來表示顏色，但使用 HSL，這些值更直觀。

色調

顏色的色調由圍繞一個圓圈的度數表示。試想一個色輪，0 度代表紅色，180 度代表青色，360 度代表同樣的紅色。

飽和

飽和度由 0 到 100 之間的百分比表示，并確定顏色的灰色程度。如果顏色是 100% 飽和度，則根本沒有灰色，而飽和度為 0% 的顏色將是沒有顏色的灰色陰影。

亮度

亮度也用百分比表示，并確定顏色的白色或黑色。如果顏色是 50% 的亮度，那么這意味著沒有額外的白色或黑色添加到顏色中。隨著百分比增加到 50% 以上，它會在顏色中添加更多的白色，直到在 100% 亮度下達到完全白色。隨著百分比降低到 50% 以下，它會為顏色添加更多黑色，直到在 0% 亮度下達到完全黑色

如何使用 HSL？

現在我們了解了 HSL 是什么，我們可以談談如何使用它。它的工作原理與 RGB 一樣，您可以在 CSS 中調用該hsl函數來定義 HSL 顏色。

.class {
  /* Pure red #FF0000 */
  background-color: hsl(0, 100%, 50%);
}

傳遞給 hsl 的第一個值是色調，它是 0 到 360 之間的度數，第二個值是飽和度，它是 0% 到 100% 之間的百分比值，最后傳遞的最終值是亮度，它是一個百分比值在 0% 和 100% 之間。您還可以使用hsla來表示部分透明的顏色。這個函數接受第四個參數，它是一個介于 0 和 1 之間的值，其中 1 是完全不透明的，而 0 是完全透明的。

為什么這很重要？

像這樣寫顏色可能看起來有點奇怪，因為你很可能習慣于 HEX 或 RGB，但是一旦你習慣了它，它會讓寫 CSS 變得更加愉快。以下是幾個原因：

輕松更改亮度/飽和度

正如我在本文開頭提到的，您經常需要在 CSS 中更改顏色的亮度或飽和度，以執行諸如為按鈕引入懸停狀態之類的操作。使用 HEX 可能會很痛苦，因為沒有人知道暗 10% 的版本#FA652F是什么，但是暗 10% 的版本hsl(16, 95%, 58%)很容易計算。您只需將亮度值降低 10% 即可hsl(16, 95%, 48%)。

您甚至可以更進一步，使用calcCSS 中的自定義屬性為您自動執行此操作。

.btn {
  --background-hue: 200;
  background-color: hsl(
    var(--background-hue),
    100%,
    calc(50% + var(--lightness-offset))
  );
}
.btn:hover {
  --lightness-offset: -10%;
}
.btn:focus {
  --lightness-offset: -20%;
}
.btn-danger {
  --background-hue: 0;
}

使用這少量代碼，我們設置了一個基本的 btn 類，它總是使背景在懸停時變暗 10%，在焦點上變暗 20%。我們也這樣做了，以便我們可以更改其他類型按鈕的按鈕色調，我們甚至不需要修改這些新按鈕類型的懸停和焦點狀態，因為它們都是使用自定義屬性和calc.

輕松獲取相關顏色

如果您熟悉任何顏色理論，那么您就會知道理解互補色、原色/次色、相似色等很重要。使用 RGB 或 HEX 很難找出這些不同類型的顏色，但使用 HSL 很容易找到諸如互補色之類的東西。這是因為互補色只是色輪另一側的顏色，在 HSL 的情況下，這意味著它們的色調彼此相差 180 度。

這很重要，因為您可以使用這些知識在 CSS 中創建一個顏色主題，該主題使用數學來計算這些互補色，并允許您一次輕松地更改整個站點的顏色主題。下面是我建立的一個可以做到這一點的網站的例子。

輕松更改色調

最后，HSL 的最后一個重大勝利是它可以輕松更改顏色的色調。如果你想讓你的紅色更橙色一點，你可以通過讓你的色調更大一點來做到這一點，因為橙色在色輪上的紅色之后。這真的很有用，因為在設計和開發的早期階段，像這樣的小顏色變化非常普遍，并且能夠輕松地制作它們可以節省大量時間。

結論

HSL 是一種在 CSS 中表示顏色的不同方式，它不僅更易于閱讀，而且更易于在 CSS 中修改和使用。在我看來，它是 CSS 中最好的顏色格式。

理

用了很長時間的RGB方式來作為CSS中的顏色樣式，卻不知道它是什么原理，據說這還是一道面試題，這篇文章就用來總結一下它的原理。

我們生活中最常見的光就是太陽光，據說在1672年牛頓用三棱鏡將太陽光分離成了赤橙黃綠藍紫青七色光。隨著科技的進步，人們發現肉眼細胞對紅綠藍三種顏色較為敏感，而且這三種顏色按照不同比例混合會制造出很多其他的顏色，比如7色光中的其他4種顏色就可以用紅綠藍配比出來，是不是很神奇？這有點像電子數字，可以通過8衍生出其他九種數字。

基于上面的理論，咱們就可以在計算機世界里用紅綠藍的搭配來顯示各種顏色。

目前RGB方式是將這三種顏色各用一個字節表示，每個字節8位，每位的大小是0到255，即這三種顏色每一個有256個選擇，RGB一共可以表示256*256*256=16777216種顏色。雖然這并不能完全描述自然界中所有的光，但已經可以滿足正常的生活需要了。

在CSS中，我們的寫法如下：

#p1 {background-color:rgb(255,0,0);} /* 紅 */
#p2 {background-color:rgb(0,255,0);} /* 綠 */
#p3 {background-color:rgb(0,0,255);} /* 藍 */

RGB括號中每一位數字都要在0到255之間。

CSS顏色還有另外一種寫法，如下：

#p1 {color: #001122}

因為每個顏色是8位，所以還可以將每位顏色轉成2位的16進制，三種顏色就是6位。

對于上面重復的數字還可以簡寫，如下：

#p1 {color: #012}

在CSS代碼規范里面咱們可以做一些代碼的檢測，至少可以少寫幾個字符。

存儲格式

1、RGB565

這種方式用16位二進制來表示一個像素的顏色，紅色5位，綠色6位，藍色5位；

2、RGB55

這種方式也是用16位表示一個像素的顏色，但是最高位是保留位，不用，剩下的15位被三種顏色平分，即各五位。

3、RGB24

這種方式每個顏色用一個字節表示，和原理中說的方式一致。

4、RGB32

這種方式每個顏色用一個字節表示，還剩一個字節為保留位，不用。

5、ARGB32

這種方式用4個字節表示顏色，前三個字節分別表示紅、綠、藍，最后一個字節表示透明度alpha。

總結

在實際生活中我們有很多三原色的應用場景，比如電視，它顯示的每個像素點可以認為是隱藏在屏幕后面的三種顏色的小燈照射形成的。所以三原色原理不僅應用在web頁面中，生活中的應用場景也隨處可見。