根據其他顏色的管道和值建立新的顏色。
在 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 並破壞這個原始顏色和優惠
這些部分做為變數,用於新的色彩定義。
上圖顯示將 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))
);
}