學習如何在 CSS 顏色中使用 HSL 中的色相

拋棄舊的，擁抱新的 <hue>！色相是 CSS 中定義顏色的絕佳方式。

我們在上一篇文章中介紹了 CSS 顏色函式，包括所有新的函式和描述顏色的方法，並簡要介紹了色彩空間。如果您對色彩空間和其背後的科學感到不知所措，那麼這篇文章就是為您準備的。

在本文中，我們將探討什麼是色相，以及如何使用 hsl() 函式在 CSS 中邁出使用色相的第一步。

什麼是色相？

色相是使我們能夠區分（或相似）紅、橙、黃、綠、藍等顏色之間的屬性。除了色相，還有其他因素構成顏色，我們稍後會講到，但現在，讓我們看看使用色相定義顏色意味著什麼。

理解色相的關鍵概念是，您可以用一個 <angle>（或代表度數的數字）來指定色相。使用 <angle> 的原因是，大多數顏色模型都使用一個看起來像這樣的色輪來描述色相。

A color wheel showing the hue angles from 0 to 360 degrees

從 0 到 360 度是一個完整的圓，我們可以使用此範圍內的任何數字來描述一種顏色。並非所有顏色函式都使用相同的色輪，因此在一個函式中 180 度可能與另一個函式中的 180 度顏色不同。您可以在 <hue> 頁面上看到一些示例。

色相有什麼用？

CSS 提供了多種驚人的方式來選擇頁面樣式顏色——甚至還沒有使用色相。您可能正在使用以下某種方式在 CSS 中定義顏色：

css

/* A named color */
hotpink

/* A # hexadecimal value */
#ff0099

/* An RGB function with 256 values for red, green, and blue */
rgb(255 0 153)

這給了我們十六進位制值，如 #ff0000，以及命名顏色，如 aliceblue 或 rebeccapurple。您可能正在使用 rgb() 函式（或“函式表示法”），它允許您獨立設定紅色、綠色和藍色值。

這些常見的設定顏色的方法為我們提供了極大的靈活性，可以從數百萬種顏色中選擇（256 x 256 x 256）。但如果您想要特定顏色的變體呢？也許您想使用 aliceblue，但飽和度稍低一些，或者使用 #008000 這樣的顏色，但亮度降低 50%。如何獲得比 rgb(255 0 153) 亮 10% 的顏色？

色相的優點在於，您可以選擇一種顏色，並透過其他屬性（如飽和度（顏色的鮮豔程度）、亮度（顏色的淺或深程度）和色度（顏色的強度））來建立其變體。

色相作為角度的另一個好處是，您可以根據顏色在色輪上的位置找到相關的顏色（例如，相隔 10 度的三種顏色），或基於相關顏色建立調色盤。我們稍後將具體瞭解如何做到這一點。

如何使用 `hsl()` 函式？

如果您想在 CSS 中嘗試使用色相，我認為您應該從 hsl() 函式開始，該函式允許您按順序定義 **色相**、**飽和度** 和 **亮度**，形式為 hsl(色相, 飽和度, 亮度)。讓我們在接下來的部分中看一些使用 hsl() 函式定義的顏色。

使用 `hsl()` 定義紅色、綠色和藍色

這是一個非常基礎的示例，用於說明 hsl() 函式的工作原理。當您檢視 0、120 和 240 度時的角度時，您會發現它與上面的色輪相匹配。

css

#red {
  background-color: hsl(0 100% 50%);
}
#green {
  background-color: hsl(120 100% 50%);
}
#blue {
  background-color: hsl(240 100% 50%);
}

div {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  display: inline-block;
  font-family: sans-serif;
}

html

<div id="red">Red</div>
<div id="green">Green</div>
<div id="blue">Blue</div>

建立色相的變體

為了瞭解飽和度值是如何工作的，讓我們看一種紅色，其飽和度值從 100% 降低到 0%。

html

<div id="red-hsl">sat. 100%</div>
<div id="red-hsl-80">sat. 80%</div>
<div id="red-hsl-60">sat. 60%</div>
<div id="red-hsl-40">sat. 40%</div>
<div id="red-hsl-20">sat. 20%</div>
<div id="red-hsl-0">sat. 0%</div>

div {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  display: inline-block;
  font-family: sans-serif;
}

css

#red-hsl {
  background-color: hsl(0 100% 50%);
}
#red-hsl-80 {
  background-color: hsl(0 80% 50%);
}
#red-hsl-60 {
  background-color: hsl(0 60% 50%);
}
/* Continue with saturation values 40%, 20%, and 0% */

#red-hsl-40 {
  background-color: hsl(0 40% 50%);
}
#red-hsl-20 {
  background-color: hsl(0 20% 50%);
}
#red-hsl-0 {
  background-color: hsl(0 0% 50%);
}

最終，我們得到一種灰色，任何飽和度為 0% 的 hsl() 值都會是一種灰色，具體取決於亮度值。當飽和度為 0% 時，hue 值對顏色沒有影響。讓我們在下一節中進行實驗，看看它是什麼樣的。

使用 hsl() 探索色相、飽和度和亮度

在 <hue> 頁面上，有一個示例，您可以使用滑塊 hsl(<slider-value> 100% 50%) 來改變元素的色相。我們可以以此為例，並透過新增更多輸入來擴充套件它，以便我們也可以控制飽和度和亮度。

div {
  width: auto;
  height: 150px;
  margin: 10px;
  border: 1px solid black;
  left: 50%;
}
p {
  font-family: sans-serif;
}
span {
  font-family: monospace;
  background: rgb(0 0 0 / 0.1);
  padding: 3px;
}
input {
  width: 30%;
  display: inline-block;
}
#box {
  background-color: hsl(0 100% 50%);
}

html

<div id="box"></div>

<input type="range" min="0" max="360" value="0" step="0.1" id="h-slider" />
<input type="range" min="0" max="100" value="100" step="0.1" id="s-slider" />
<input type="range" min="0" max="100" value="50" step="0.1" id="l-slider" />

<p>Hue: <span id="h-value">0deg</span></p>
<p>Saturation: <span id="s-value">100%</span></p>
<p>Lightness: <span id="l-value">50%</span></p>
<br />
<button>Reset</button>

為了使其具有互動性，我們可以獲取滑塊的值，並將它們替換為函式中的引數，如 hsl(slider1 slider2 slider3)。我們呼叫一個函式來更新框，而不是重複程式碼來更新每個滑塊的值，當任何滑塊發生變化時，該函式會更新框。

const box = document.querySelector("#box");

const hue = document.querySelector("#h-slider");
const saturation = document.querySelector("#s-slider");
const lightness = document.querySelector("#l-slider");

const updateBox = () => {
  // Set hsl(<hue>deg, <saturation>%, <lightness>%)
  box.style.backgroundColor = `hsl(${hue.value} ${saturation.value}% ${lightness.value}%)`;
  // Some feedback so we can see the values changing
  document.querySelector("#h-value").textContent = `${hue.value}deg`;
  document.querySelector("#s-value").textContent = `${saturation.value}%`;
  document.querySelector("#l-value").textContent = `${lightness.value}%`;
};

hue.addEventListener("input", updateBox);
saturation.addEventListener("input", updateBox);
lightness.addEventListener("input", updateBox);

const button = document.querySelector("button");
button.addEventListener("click", () => {
  hue.value = 0;
  saturation.value = 100;
  lightness.value = 50;
  updateBox();
});

請注意，當飽和度為 0% 時，色相值對顏色沒有影響。當亮度為 0%（黑色）或 100%（白色）時，色相和飽和度值也沒有影響。

使用變數在多個地方更改色相

假設我們想在多個地方使用相同的色相值。我們可以為此使用 CSS 自定義屬性。

div {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  display: inline-block;
  font-family: sans-serif;
}
input {
  width: 90%;
}

css

:root {
  --hue: 0;
}

#red-hsl {
  background-color: hsl(var(--hue) 100% 50%);
}
#red-hsl-80 {
  background-color: hsl(var(--hue) 80% 50%);
}
/* Continue for saturation values 60%, 40%, 20%, and 0% */

#red-hsl-60 {
  background-color: hsl(var(--hue) 60% 50%);
}
#red-hsl-40 {
  background-color: hsl(var(--hue) 40% 50%);
}
#red-hsl-20 {
  background-color: hsl(var(--hue) 20% 50%);
}

html

<div id="red-hsl">100%</div>
<div id="red-hsl-80">80%</div>
<div id="red-hsl-60">60%</div>
<div id="red-hsl-40">40%</div>
<div id="red-hsl-20">20%</div>
<!-- We don't need a 0% saturation div because it's always gray -->

<input type="range" min="0" max="360" value="0" step="0.1" id="hue" />

const hue = document.querySelector("#hue");

const updateHue = () => {
  document.documentElement.style.setProperty("--hue", hue.value);
};

hue.addEventListener("input", updateHue);

將這些部分組合在一起的優點是，我們可以為專案選擇一種顏色，然後在多個地方使用相同的色相值。我們可以將其用作需要突出的元素的配色方案，或顯示某種狀態（例如停用的按鈕），同時為每個元素使用相同的色相值。

根據色相角度選擇相關顏色

我之前提到過，您可以根據顏色在色輪上的位置找到相關的顏色。讓我們透過在前一個示例的總體思想基礎上進行一些擴充套件，並引入更多相同顏色的變體來嘗試一下。我們不會改變飽和度或亮度值，但會為每個框將色相值改變 10 度。

html

<div id="color-1"></div>
<div id="color-2"></div>
<div id="color-3"></div>
<div id="color-4"></div>
<div id="color-5"></div>
<div id="color-6"></div>
<div id="color-7"></div>
<input type="range" min="0" max="360" value="0" step="0.1" id="hue" />

我們基於上一節的示例進行擴充套件，但添加了 calc() 函式，以便我們可以根據第一個框的色相值計算不同的顏色。對於每個框，我們將前一個框的色相值增加 10 度。

div {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  display: inline-block;
}
input {
  width: 90%;
}

css

:root {
  --hue: 0;
}

#color-1 {
  background-color: hsl(var(--hue) 100% 50%);
}
#color-2 {
  background-color: hsl(calc(var(--hue) + 10) 100% 50%);
}
#color-3 {
  background-color: hsl(calc(var(--hue) + 20) 100% 50%);
}
#color-4 {
  background-color: hsl(calc(var(--hue) + 30) 100% 50%);
}
#color-5 {
  background-color: hsl(calc(var(--hue) + 40) 100% 50%);
}
#color-6 {
  background-color: hsl(calc(var(--hue) + 50) 100% 50%);
}
#color-7 {
  background-color: hsl(calc(var(--hue) + 60) 100% 50%);
}

const hue = document.querySelector("#hue");

const updateHue = () => {
  document.documentElement.style.setProperty("--hue", hue.value);
};

hue.addEventListener("input", updateHue);

現在我們開始變得豐富多彩了！我們可以沿著色輪迴圈 360 度，並檢視顏色如何隨著色相角度的變化而變化，每個框之間相隔 10 度。

總結

讓我們回顧一下本文中學習到的內容。我們已經涵蓋了

指定顏色的常用方法：命名顏色、rgb() 函式和十六進位制值。
什麼是色相，以及為什麼hsl() 函式是 CSS 中色相的一個很好的起點。
如何使用自定義屬性和calc() 函式計算顏色的變體。

後續步驟

現在您知道如何使用 hsl() 函數了，擴充套件本文中的示例或嘗試使用alpha 值使顏色透明會很有趣。您能基於最後一個示例來控制飽和度和亮度等其他值嗎？如何構建顏色選擇器，或者嘗試將 rgb() 轉換為 hsl() 值？

如果您想了解更多資訊，請務必檢視 <hue> 參考頁面，瞭解色相角度和其他顏色函式的詳細資訊。請務必檢視色相插值方法頁面，如果您想了解更多關於計算兩個色相之間的顏色，特別是如果您想建立漸變或混合顏色，這是一個有趣的讀物。上一篇文章 CSS 顏色（Level 4）中的新函式、漸變和色相對不同的顏色函式及其外觀進行了全面的概述。

希望您喜歡這篇文章。隨時在我們的 Discord 伺服器或 GitHub 上與我們聯絡，分享您的想法、提問或展示您的作品。我要特別感謝 Yarusome 對色相和插值文件的改進，並添加了出色的圖表來幫助解釋這些概念。下次再見，祝您編碼愉快！🎨

有用資源

Lea Verou 的顏色選擇器
現代 CSS 顏色指南：RGB、HSL、HWB、LAB 和 LCH (2021)
設計師的色彩理論，第二部分：理解概念和顏色術語 (2017)
在 CSS 中使用 HSL 顏色 (2021)