CSS 相對顏色語法

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

Adam Argyle
Adam Argyle

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

之前,如要修改顏色的不透明度,您必須在「相對顏色」語法之前 為色彩的通道建立自訂屬性,通常是 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 轉換為 新顏色的色域 轉換為 rgbalpha 代表的個別號碼 變數,然後直接用做新的 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 HWBLCHOKLCH

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

檢查瀏覽器支援情形

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

用途和示範

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

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

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

調亮顏色

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

減少數量

以下範例 .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 使用 shsl() 減少 飽和度為 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))
  );
}