1. Web
  2. CSS
  3. <color>
  4. hsl()

hsl()

Baseline 廣泛可用 *

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

* 此特性的某些部分可能存在不同級別的支援。

備註：hsla() 函式式表示法是 hsl() 的別名，它們完全等效。建議使用 hsl()。

hsl() 函式式表示法根據顏色的色相、飽和度和亮度分量，在 sRGB 色彩空間中表示一種顏色。一個可選的 alpha 分量表示顏色的透明度。

試一試

background: hsl(50 80% 40%);

background: hsl(150deg 30% 60%);

background: hsl(0.3turn 60% 45% / 0.7);

background: hsl(0 80% 50% / 25%);

<section id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

#example-element {
  min-width: 100%;
  min-height: 100%;
  padding: 10%;
}

使用 hsl() 定義互補色可以透過對色相值加上或減去 180 度來實現，因為它們位於色輪的同一條直徑上。例如，如果一種顏色的色相角是 10deg，那麼它的互補色的色相角就是 190deg。

語法

css
/* Absolute values */
hsl(120deg 75% 25%)
hsl(120 75 25) /* deg and % units are optional */
hsl(120deg 75% 25% / 60%)
hsl(none 75% 25%)

/* Relative values */
hsl(from green h s l / 0.5)
hsl(from #123456 h s calc(l + 20))
hsl(from rgb(200 0 0) calc(h + 30) s calc(l + 30))

/* Legacy 'hsla()' alias */
hsla(120deg 75% 25% / 60%)

/* Legacy format */
hsl(120, 75%, 25%)
hsl(120deg, 75%, 25%, 0.8)

備註： hsl()/hsla() 也可以用一種舊式寫法，即所有值都用逗號分隔，例如 hsl(120, 75%, 25%) 或 hsla(120deg, 75%, 25%, 0.8)。在以逗號分隔的舊式語法中，不允許使用 none 值，色相值上的 deg 單位是可選的，而飽和度和亮度值則必須使用 % 單位。

值

下面描述了絕對顏色和相對顏色的允許值。

絕對值語法

hsl(H S L[ / A])

引數如下：

H

一個 <number>、一個 <angle> 或關鍵字 none（在此情況下等同於 0deg），表示顏色的<hue>（色相）角度。

備註： 在 sRGB（hsl() 和 hwb() 使用）、CIELAB（lch() 使用）和 Oklab（oklch() 使用）色彩空間中，特定色相對應的角度是不同的。更多詳情和示例，請參閱 <hue> 參考頁面。

S

一個 <percentage> 或關鍵字 none（在此情況下等同於 0%）。該值表示顏色的飽和度。其中 100% 表示完全飽和，而 0% 表示完全不飽和（灰色）。

L

一個 <percentage> 或關鍵字 none（在此情況下等同於 0%）。該值表示顏色的亮度。其中 100% 是白色，0% 是黑色，50% 是“正常”亮度。

A 可選

一個 <alpha-value>，表示顏色的 alpha 通道值，其中數字 0 對應 0%（完全透明），1 對應 100%（完全不透明）。此外，關鍵字 none 可用於明確指定無 alpha 通道。如果未明確指定 A 通道值，則預設為 100%。如果包含該值，則其前面需要有一個斜槓（/）。

備註：有關 none 的效果，請參閱缺失的顏色分量。

備註： 絕對 hsl() 顏色會被序列化為 rgb() 值。在序列化過程中，紅、綠、藍分量的值可能會被四捨五入。

相對值語法

hsl(from <color> H S L[ / A])

引數如下：

from <color>

在定義相對顏色時，總是包含關鍵字 from，其後跟著一個 <color> 值，表示源顏色。這是相對顏色所基於的原始顏色。源顏色可以是任何有效的 <color> 語法，包括另一個相對顏色。

H

一個 <number>、一個 <angle> 或關鍵字 none（在此情況下等同於 0deg），表示輸出顏色的<hue>（色相）角度。

S

一個 <percentage> 或關鍵字 none（在此情況下等同於 0%）。這表示輸出顏色的飽和度。其中 100% 表示完全飽和，而 0% 表示完全不飽和（灰色）。

L

一個 <percentage> 或關鍵字 none（在此情況下等同於 0%）。這表示輸出顏色的亮度。其中 100% 是白色，0% 是黑色，50% 是“正常”亮度。

A 可選

一個 <alpha-value>，表示輸出顏色的 alpha 通道值，其中數字 0 對應 0%（完全透明），1 對應 100%（完全不透明）。此外，關鍵字 none 可用於明確指定無 alpha 通道。如果未明確指定 A 通道值，則預設為源顏色的 alpha 通道值。如果包含該值，則其前面需要有一個斜槓（/）。

備註： 為了能夠完全表示可見光譜中的所有顏色，相對 hsl() 顏色函式的輸出會被序列化為 color(srgb)。這意味著透過 HTMLElement.style 屬性或 CSSStyleDeclaration.getPropertyValue() 方法查詢輸出顏色值時，將返回一個 color(srgb ...) 格式的值。

定義相對顏色輸出通道分量

當在 hsl() 函式內部使用相對顏色語法時，瀏覽器會將源顏色轉換為等效的 HSL 顏色（如果尚未指定為 HSL 格式）。顏色被定義為三個不同的顏色通道值——h（色相）、s（飽和度）和 l（亮度）——外加一個 alpha 通道值（alpha）。這些通道值在函式內部可用，用於定義輸出顏色的通道值。

  • h 值被解析為一個介於 0 和 360（含）之間的 <number>，表示源顏色的<hue>（色相）度數值。
  • s 和 l 值分別被解析為一個介於 0 和 100（含）之間的 <number>，其中 100 等同於 100%。
  • alpha 值被解析為一個介於 0 和 1（含）之間的 <number>。

在定義相對顏色時，輸出顏色的不同通道可以用幾種不同的方式表示。下面，我們將透過一些示例來說明這些方式。

在下面的前兩個示例中，我們使用了相對顏色語法。然而，第一個示例輸出的顏色與源顏色相同，而第二個示例輸出的顏色則完全不基於源顏色。它們實際上並沒有建立相對顏色！你不太可能在真實的程式碼庫中使用這些寫法，而可能會直接使用絕對顏色值。我們包含這些示例是為了讓你開始學習相對 hsl() 語法。

讓我們從源顏色 rgb(255 0 0)（等同於 hsl(0 100% 50%)）開始。下面的函式輸出與源顏色相同的顏色——它使用源顏色的 h、s 和 l 通道值（0、100% 和 50%）作為輸出通道值。

css
hsl(from rgb(255 0 0) h s l)

該函式的輸出顏色是 hsl(0 100% 50%) 的 sRGB color() 等效值：color(srgb 1 0 0)。

下一個函式對輸出顏色的通道值使用絕對值，輸出了一個完全不同於源顏色的新顏色：

css
hsl(from rgb(255 0 0) 240 60% 70%)

在上述情況下，輸出顏色是 hsl(240 60% 70%) 的 sRGB color() 等效值：color(srgb 0.52 0.52 0.88)。

以下函式建立了一個基於源顏色的相對顏色：

css
hsl(from rgb(255 0 0) h 30% 60%)

此示例：

  • 將源顏色（rgb(255 0 0)）轉換為等效的 hsl() 顏色（hsl(0 100% 50%)）。
  • 將輸出顏色的 H 通道值設定為源顏色 hsl() 等效值的 H 通道值——0。
  • 將輸出顏色的 S 和 L 通道值設定為不基於源顏色的新值：分別為 30% 和 60%。

最終的輸出顏色是在 sRGB 色彩空間中等同於 hsl(0 30% 60%) 的顏色——color(srgb 0.72 0.48 0.48)。

備註：如上所述，如果輸出顏色使用的顏色模型與源顏色不同，源顏色會在後臺被轉換為與輸出顏色相同的模型，以便能夠以相容的方式表示（即使用相同的通道）。

在本節我們目前看到的示例中，源顏色和輸出顏色的 alpha 通道都沒有被明確指定。當未指定輸出顏色的 alpha 通道時，它預設為與源顏色 alpha 通道相同的值。當未指定源顏色的 alpha 通道時（且它不是相對顏色），它預設為 1。因此，上述示例中的源和輸出 alpha 通道值均為 1。

讓我們看一些指定源和輸出 alpha 通道值的示例。第一個示例將輸出 alpha 通道值指定為與源 alpha 通道值相同，而第二個示例則指定一個與源 alpha 通道值無關的不同輸出 alpha 通道值。

css
hsl(from rgb(255 0 0 / 0.8) h s l / alpha)
/* Computed output color: color(srgb 1 0 0 / 0.8) */

hsl(from rgb(255 0 0 / 0.8) h s l / 0.5)
/* Computed output color: color(srgb 1 0 0 / 0.5) */

在下面的示例中，rgb() 源顏色再次被轉換為 hsl() 表示——hsl(0 100% 50% / 0.8)。calc() 計算被應用於 H、S、L 和 A 值，最終的輸出顏色是在 sRGB 色彩空間中等同於 hsl(60 80% 30% / 0.7) 的顏色：color(srgb 0.72 0.72 0.08 / 0.7)。

css
hsl(from rgb(255 0 0 / 0.8) calc(h + 60) calc(s - 20) calc(l - 10) / calc(alpha - 0.1))

備註：因為源顏色通道值被解析為 <number> 值，所以在使用它們進行計算時，你必須給它們加上數字，即使在通道通常接受 <percentage>、<angle> 或其他值型別的情況下也是如此。例如，將 <percentage> 新增到 <number> 是行不通的。

正式語法

<hsl()> = 
  <legacy-hsl-syntax>  |
  <modern-hsl-syntax>  

<legacy-hsl-syntax> = 
  hsl( <hue> , <percentage> , <percentage> , <alpha-value>? )  

<modern-hsl-syntax> = 
  hsl( [ from <color> ]? [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<hue> = 
  <number>  |
  <angle>   

<alpha-value> = 
  <number>      |
  <percentage>

示例

將 hsl() 與 conic-gradient() 結合使用

hsl() 函式與 conic-gradient() 配合得很好，因為它們都處理角度。

CSS

css
div {
  width: 100px;
  height: 100px;
  background: conic-gradient(
    hsl(360 100% 50%),
    hsl(315 100% 50%),
    hsl(270 100% 50%),
    hsl(225 100% 50%),
    hsl(180 100% 50%),
    hsl(135 100% 50%),
    hsl(90 100% 50%),
    hsl(45 100% 50%),
    hsl(0 100% 50%)
  );
  clip-path: circle(closest-side);
}

結果

將相對顏色與 hsl() 結合使用

此示例為三個 <div> 元素設定了不同的背景顏色。中間的元素使用了未經修改的 --base-color，而左右兩邊的元素則使用了該 --base-color 的提亮和變暗版本。

這些變體是使用相對顏色定義的——--base-color 自定義屬性被傳入一個 hsl() 函式，輸出顏色的亮度通道透過一個 calc() 函式被修改以達到預期效果，而色相和飽和度保持不變。提亮後的顏色亮度通道增加了 20%，而變暗後的顏色則減少了 20%。

CSS

css
:root {
  --base-color: orange;
}

#one {
  background-color: hsl(from var(--base-color) h s calc(l + 20));
}

#two {
  background-color: var(--base-color);
}

#three {
  background-color: hsl(from var(--base-color) h s calc(l - 20));
}

/* Use @supports to add in support for old syntax that requires % units to
   be specified in lightness calculations */
@supports (color: hsl(from red h s calc(l - 20%))) {
  #one {
    background-color: hsl(from var(--base-color) h s calc(l + 20%));
  }

  #three {
    background-color: hsl(from var(--base-color) h s calc(l - 20%));
  }
}

結果

輸出如下：

舊式語法：逗號分隔值

出於相容舊式寫法的考慮，hsl() 函式接受一種所有值都用逗號分隔的形式。

HTML

html
<div class="space-separated"></div>
<div class="comma-separated"></div>

CSS

css
div {
  width: 100px;
  height: 50px;
  margin: 1rem;
}

div.space-separated {
  background-color: hsl(0 100% 50% / 50%);
}

div.comma-separated {
  background-color: hsl(0, 100%, 50%, 0.5);
}

結果

舊式與現代語法

該示例演示了 hsla() 語法是 hsl() 的別名；現代和舊式（逗號分隔）語法都支援這兩種寫法。

HTML

html
<div class="modern">HSL</div>
<div class="legacy">HSL</div>
<div class="modernWithAlpha">HSL</div>
<div class="modernHSLA">HSLA</div>
<div class="legacyHSLA">HSLA</div>

CSS

css
div {
  width: 100px;
  min-height: 50px;
  font-family: sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}
body {
  display: flex;
  gap: 20px;
}
css
div.modern {
  background-color: hsl(90 80% 50%);
}

div.legacy {
  background-color: hsl(90, 80%, 50%);
}

div.modernWithAlpha {
  background-color: hsl(90 80% 50% / 50%);
}

div.modernHSLA {
  background-color: hsla(90 80% 50% / 50%);
}

div.legacyHSLA {
  background-color: hsla(90, 80%, 50%, 0.5);
}

結果

規範

規範
CSS 顏色模組第五版
# 相對 HSL
CSS 顏色模組第四版
# hsl 表示法

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁最後更新於 ，由 MDN 貢獻者更新。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.