本頁面由 Cloud Translation API 翻譯而成。

CSS 相對顏色語法

根據其他顏色的管道和值建立新的顏色。

Adam Argyle

在 Chrome 119 中，這是 CSS 顏色等級 5 強大的色彩功能。相對顏色語法在 CSS 內建立流暢的色彩操控路徑，作者和設計人員執行以下作業：

Lighten
調暗
飽和度
低飽和度
色彩強化
調整不透明度
反轉
互補色
轉換
對比
調色盤

之前，如要修改顏色的不透明度，您必須在「相對顏色」語法之前為色彩的通道建立自訂屬性，通常是 HSL，最終顏色和最終變化版本顏色這代表需要管理因此很快就可能會讓人手忙腳亂

:root {
  --brand-hue: 300deg;
  --brand-saturation: 75%;
  --brand-lightness: 50%;

  --brand-hsl:
    var(--brand-hue)
    var(--brand-saturation)
    var(--brand-lightness);

  --brand-color: hsl(var(--brand-hsl));

  /* all this work just so I can set the opacity to 50% in a variant */
  --brand-color-variant: hsl(var(--brand-hsl) / 50%);
}

「使用相對顏色」語法之後，你可以用任何色域建立品牌顏色並使用較少的程式碼，建立一半的不透明度變化版本。是也更容易閱讀樣式與系統的用意

:root {
  --brand-color: hsl(300deg 75% 50%);
  --brand-color-variant: hsl(from var(--brand-color) h s l / 50%);
}

這篇文章將協助您瞭解語法，並示範常見的色彩操控方式。

如果您喜歡影片，以下文章幾乎全部都涵蓋在這次的 GUI 挑戰活動中。

語法總覽

相對色彩語法的目標在於允許從其他顏色衍生顏色顏色。基本顏色稱為原始顏色，也就是出現在新的 from 關鍵字後方。瀏覽器會 convert 並破壞這個原始顏色和優惠這些部分做為變數，用於新的色彩定義。

A 罩杯
語法有 rgb(來自 green r g b / alpha)，且有一個箭頭
將綠色的頂部留在函式的 rgb 開頭，
這個箭頭會分割成 4 個箭頭，然後指向相關變數。
4 個箭頭分別是紅色、綠色、藍色和 Alpha 版的箭頭。紅色和藍色的值為 0，綠色
128 和 alpha 的值為 100%

上圖顯示將 green 轉換為新顏色的色域轉換為 r、g、b 和 alpha 代表的個別號碼變數，然後直接用做新的 rgb() 顏色值。

雖然這張圖片顯示了細分、程序和變數，但改變顏色。這些變數回到不變的顏色中就會產生綠色的靜止畫面

`from` 關鍵字

要學習的語法的第一個部分是新增 from <color> 和並指定顏色這個函式會在您指定值之前為右側。以下是驗證碼新增的所有範例為 from green，緊接在值之前已指定 rgb()。

.syntax-introduction_same-colors {
  color: green;
  color: rgb(0 128 0);
  color: rgb(from green r g b);    /* result = rgb(0 128 0) */
}

這個 from 關鍵字在函式標記法中當做第一個參數時，將色彩定義轉換為相對色彩！在 from 關鍵字之後，CSS 預期顏色，可激起下一個顏色的顏色。

色彩轉換

簡單來說，這類模型會將 Green 轉成 r g 和 b 管道，用於新的顏色。

rgb(from green r g b)           /* r=0 g=128 b=0 */
rgb(from rgb(0 128 0) r g b);   /* r=0 g=128 b=0 */

自訂屬性的顏色

朗讀《rgb from green》的內容十分清楚易懂。因此自訂屬性和相對顏色語法就很適合使用可以消除 from 顏色的謎團。您通常不需要建立新屬性時，您即可瞭解自訂屬性顏色的顏色格式格式和顏色

rgb(from rgb(255 105 180) r g b) /* ????? */
rgb(from var(--hotpink) r g b)   /* clear */

在偏好的色域中運作

您可以使用您選擇的功能色彩標記法，選擇色域。

rgb(from hsl(120 100% 25%) r g b)     /*  r=0   g=128  b=0    */
hsl(from hsl(120 100% 25%) h s l)     /*  h=120 s=100% l=25%  */
hwb(from hsl(120 100% 25%) h w b)     /*  h=120 w=0%   b=50%  */
lch(from hsl(120 100% 25%) l c h)     /*  l=46  c=68   h=134  */

相對顏色語法設有轉換步驟from 之後的顏色並轉換成相對開頭的顏色。輸入和輸出內容不必相等，這點非常費神。

此外，選擇色域的功能也有助於選擇顏色比起色盲類型偏好設定。偏好設定會做為結果，而非顏色格式或管道。在示範用途的章節中，您會更清楚地說明這點。不同的顏色空間適合各種任務

混合、比對、省略及重複變數

這個語法雖然有點奇怪，但這個語法令人興奮順序重複，而且可以重複執行

rgb(from green g g g)    /* rgb(128 128 128) */
rgb(from green b r g)    /* rgb(0 0 128) */
rgb(from green 0 0 g)    /* rgb(0 0 128) */

作為變數的不透明度

這種語法也會提供不透明度做為名為 alpha 的變數。這個欄位是選填項目並在功能色彩標記法中的 / 之後執行。

rgb(from #00800080 r g b / alpha)             /* alpha=50% */
rgb(from rgba(0,128,0,.5) r g b / alpha)      /* alpha=50% */
rgb(from rgb(0 128 0 / 50%) r g b / alpha)    /* alpha=50% */

在變數上使用 calc() 或其他 CSS 函式

目前為止，我們一再建立了綠色。瞭解語法及熟悉轉換和解構步驟。現在是修改變數後，請更改輸出內容，使其與。

green                              /*  h=120 s=100% l=25%  */
hsl(from green calc(h * 2) s l)    /*  h=240 s=100% l=25%  */

是海軍藍色的！色調已加倍，採用 120 的色調做為色調，轉換成 240，完全改變顏色。這會沿著顏色旋轉結合了圓柱狀色彩空間，簡單好用例如 HSL HWB、 LCH 和 OKLCH。

如要以視覺方式查看管道的值，如此一來，您不必猜測或記住規格，就能使用這個相對色彩語法管道值工具來輕鬆計算數學結果。這項功能會根據您指定的語法顯示每個管道的值，讓您確實瞭解有哪些值可用。

檢查瀏覽器支援情形

@supports (color: rgb(from white r g b)) {
  /* safe to use relative color syntax */
}

用途和示範

以下範例和用途具備許多替代語法例如類似或相同的結果這些變化源自於色彩空間頻道

此外，許多範例都會顯示顏色調整，並使用 by 和 to。顏色變更 by 是相對顏色變化；使用值，並根據目前的值做出調整。A 罩杯顏色變更 to 代表絕對顏色變化；不使用值，並改為指定全新的值。

您可以在這個 Codepen 集合中找到所有示範。

調亮顏色

OKLCH、OKLAB XYZ 或 sRGB 色域提供調亮顏色時的預測結果。

減少數量

以下範例 .lighten-by-25 採用 blue 顏色，並將其轉換為 OKLCH，然後將 l (輕度) 聲道乘以目前值乘以 1.25讓藍色亮度朝白色高 25%。

.lighten-by-25 {
  background: oklch(from blue calc(l * 1.25) c h);
}

調亮特定值

下列範例 .lighten-to-75 不會使用 l 管道調亮 blue，而是將值完全取代為 75%。

.lighten-to-75 {
  background: oklch(from blue 75% c h);
}

調暗顏色

相同的色域也能打亮顏色調暗顏色。

以數量調暗

以下範例 .darken-by-25 採用藍色，並將顏色轉換為 OKLCH，然後將 l (亮度) 頻道調低 25%，藉此調暗藍色將值乘以 .75這會讓藍色色彩朝黑色推進 25%。

.darken-by-25 {
  background: oklch(from blue calc(l * .75) c h);
}

調暗為指定值

下列範例 .darken-to-25 並未使用 l 管道調暗 blue，而是將值完全取代為 25%。

.darken-to-25 {
  background: oklch(from blue 25% c h);
}

增加色彩飽和度

依金額飽和

以下範例 .saturate-by-50 使用 hsl() 的 s 增加透過相對 50% 調整 orchid 的亮度。

.saturate-by-50 {
  background: hsl(from orchid h calc(s * 1.5) l);
}

飽和至特定金額

下列範例 .saturate-to-100 並未使用 s 頻道 hsl()，而是指定所需的飽和度值。在這個例子中飽和度會提高至 100%。

.saturate-to-100 {
  background: hsl(from orchid h 100% l);
}

降低色彩飽和度

降低低飽和度

以下範例 .desaturate-by-half 使用 s 從 hsl() 減少飽和度為 indigo 的一半

.desaturate-by-half {
  background: hsl(from indigo h calc(s / 2) l);
}

低飽和至特定值

如果不想依金額減少飽和度，您可以低度特定值以達到特定目標值。以下範例 .desaturate-to-25 會根據 indigo，但將飽和度設為 25%。

.desaturate-to-25 {
  background: hsl(from indigo h 25% l);
}

色彩聚焦

這種效果與飽和度類似，但在管理基礎架構首先，這是 chroma 變更，而不是 saturation 變更，因為可放大到高動態範圍的色彩空間飽和度。chroma 功能的色彩空間為高動態範圍讓作者比飽和度更高的色彩鮮明度功能更強大

.increase-chroma {
  background: oklch(from orange l calc(c + .1) h);
}

調整顏色的不透明度

將某個顏色轉換成半透明子類是最常見的顏色之一所做的調整。請參閱也會條理出問題空間。

依數值調整不透明度

.decrease-opacity-by-25 {
  background: rgb(from lime r g b / calc(alpha / 2));
}

將不透明度調整為特定值

.decrease-opacity-to-25 {
  background: rgb(from lime r g b / 25%);
}

反轉顏色

色彩反轉是色彩庫中的常見色彩調整函式。其中一個做法是將色彩轉換為 RGB，然後減去每個 1. 頻道的成本

.invert-each-rgb-channel {
  background: rgb(from yellow calc(255 - r) calc(255 - g) calc(255 - b));
}

輔助顏色

如果目標不是反調顏色，而是互補色，則請色調可能是您所需的廣告素材挑選可提供將色調為角度，然後使用 calc() 以所需數量旋轉色調。在這個例子中，只要轉動一半輪轉，就能找到不同顏色的互補色。只要 180，就能對 h 頻道進行加值或減去計算。

.complementary-color {
  background: hsl(from blue calc(h + 180) s l);
}

對比顏色

要達到一目瞭然的色彩對比度，請考慮使用 L&midast(Lstar)。這個圖表採用的 (大致) 管道 LCH 和 OKLCH，在 calc() 內。視您指定的是低、中或高相對的差異值約為 40、~50 或 ~60。

無論採用哪種色調，一律適合使用 LCH 或 OKLCH。

對比較深的顏色

.well-contrasting-darker-color 類別會以差異 60 的方式示範 L*。由於原始顏色是深色 (低值亮度)，因此加入了 60% (.6) 光環就好。這項技術可用來找出對比鮮明淺色背景上使用相同的色調和深色文字色彩。

.well-contrasting-darker-color {
  background: darkred;
  color: oklch(from darkred calc(l + .60) c h);
}

對比更淺的色彩

.well-contrasting-lighter-color 類別會示範 L* 差異為 60% 也能從這個平台著手由於起點顏色是淺色 (高數值亮度)，因此 0.60 是減去亮度管道的值

.well-contrasting-lighter-color {
  background: lightpink;
  color: oklch(from lightpink calc(l - .60) c h);
}

調色盤

相對顏色語法非常適合用來建立調色盤。尤其是提供實用且強大的功能。下列這些例子都使用了 OKLCH，因為光度管道很可靠且色調可以在沒有副作用的情況下旋轉頻道最後一個範例則示範了結合亮度與旋轉旋轉設定，讓圖片更生動有趣結果！

請開啟這些程式碼的範例原始碼，並嘗試將 --base-color 變更為看看這些調色盤的動態玩得開心！

如果您喜歡影片，我會詳細說明在 YouTube 上使用 OKLCH 製作 CSS 調色盤的相關資訊。

單色調色盤

想要建立單色調色盤，就是以相同的色調製作調色盤，呈現出亮度和暗度變化。中間顏色是來源顏色，其中有兩個淺色和兩個較深的變化版本

:root {
  --base-color: deeppink;

  --color-0: oklch(from var(--base-color) calc(l + .20) c h); /* lightest */
  --color-1: oklch(from var(--base-color) calc(l + .10) c h);
  --color-2: var(--base-color);
  --color-3: oklch(from var(--base-color) calc(l - .10) c h);
  --color-4: oklch(from var(--base-color) calc(l - .20) c h); /* darkest */
}

試試使用相對色彩語法和 OKLCH 製作的多種調色盤

Open Props 這個免費的 CSS 變數程式庫，可提供商品資訊搭配運用上述策略的各種調色盤匯入。而且都是以你自訂的顏色為基礎就會變成一種調色盤！

類似調色盤

由於使用 OKLCH 和 HSL 調色旋轉非常簡單，因此建立模型十分簡單類似調色盤。依照滿意的結果旋轉色調，並變更基本顏色以及瀏覽瀏覽器最新推出的調色盤

:root {
  --base-color: blue;

  --primary:   var(--base-color);
  --secondary: oklch(from var(--base-color) l c calc(h - 45));
  --tertiary:  oklch(from var(--base-color) l c calc(h + 45));
}

三角調色盤

與互補顏色相似，三角調色盤就會產生相反的色調旋轉，指出底色。其中互補色位於顏色的對邊，就像直線一樣會在色輪中間繪製，而三角形的調色盤就和找出 2 個顏色相等的線條，以及基本顏色旋轉的 2 種顏色。只要旋轉色調 120deg，即可達成這個目標。

這是簡單的色彩理論，但已足夠如果您有興趣，可以先到比較複雜的三等調色盤

:root {
  --base-color: yellow;
  --triad-1: oklch(from var(--base-color) l c calc(h - 120));
  --triad-2: oklch(from var(--base-color) l c calc(h + 120));
}

四色調色盤

四色調色盤是用色輪平均分配的四種顏色，沒有明顯的主要價值的調色盤。你也可以想出兩個互補色。聰明運用它可以說是非常有意義

這是簡單的色彩理論，但已足夠而且，有興趣時就可以開始使用更複雜的圓盤調色盤。

:root {
  --base-color: lime;

  --color-1: var(--base-color);
  --color-2: oklch(from var(--base-color) l c calc(h + 90));
  --color-3: oklch(from var(--base-color) l c calc(h + 180));
  --color-4: oklch(from var(--base-color) l c calc(h + 270));
}

單色旋轉 (稍微旋轉)

許多色彩專家都堅守這件事。問題在於單色縮放比例可能相當無趣。解決方法是新增隨著亮度改變，小或大色調旋轉每一種新顏色。

以下範例將每個色塊的亮度降低 10%，同時旋轉將色調設為 10 度結果就是靛藍色調色盤可能會像漸層一樣完美地融合。

:root {
  --base-color: deeppink;

  --color-1: var(--base-color);
  --color-2: oklch(from var(--base-color) calc(l - .10) c calc(h - 10));
  --color-3: oklch(from var(--base-color) calc(l - .20) c calc(h - 20));
  --color-4: oklch(from var(--base-color) calc(l - .30) c calc(h - 30));
  --color-5: oklch(from var(--base-color) calc(l - .40) c calc(h - 40));
}

試試這個以 OKLCH 和色調旋轉功能打造的排行榜

下列排行榜介面採用此色調旋轉策略。每份清單項目會在文件中做為名為 --i 的變數追蹤其索引。這個索引是然後調整色度、亮度和色調調整幅度只有 5%，或是 5deg 的對比度高於上述範例加上深粉色的範例請密切留意這個排行榜的功用優雅。

請務必在排行榜下方的滑桿變更色調，並相關的色彩語法可以創造出美麗的色彩。

li {
  --_bg: oklch(
    /* decrease lightness as list grows */
    calc(75% - (var(--i) * 5%))

    /* decrease chroma as list grows */
    calc(.2 - (var(--i) * .01))

    /* lightly rotate the hue as the list grows */
    calc(var(--hue) - (var(--i) + 5))
  );
}