在正式開始介紹之前，可以先想一個問題：如何動態(tài)去改變一個顏色的透明度？

比如一個顏色

:root{
  color: red
}

如何將它變成透明度為 50% 的紅色呢？

現(xiàn)在 Chrome 119 中，令人無比期待的 CSS 相對顏色終于正式支持了！有了它，可以很輕松地將一個顏色轉(zhuǎn)換成任意你所需要的顏色，對設(shè)計師和前端都非常友好，一起了解一下吧

一、什么是 CSS 相對顏色

CSS 相對顏色（CSS relative color）是 CSS Color Level 5[1] 的新特性，它可以將一個顏色以某種顏色格式進行分解、重組，從而得到一個全新的顏色。

語法非常簡單，以rgb為例。

color: rgb(from red r g b / alpha)

這個表示將顏色red以rgb模式，分解成r、g、b（alpha）幾個單獨的變量，非常類似 JS 中的結(jié)構(gòu)賦值。

也就是說，上面的寫法最后等同于。

color: rgb(255 0 0 / 100%)

那么，這個有什么用呢？

其實經(jīng)過上面的from關(guān)鍵詞分解以后，得到的r、g、b、alpha都是獨立的變量，我們可以將任意變量改寫成所需要的，比如透明度為50%。

color: rgb(from red r g b / 50%) /* rgb(255 0 0 / 50%) */

注意，這里的顏色是完全動態(tài)的，我們還可以用 CSS 變量將任意顏色實時改變透明度。

--color: red;
--color50: rgb(from var(--color) r g b / 50%)

下面是一個演示，可以實時將顏色的透明度變?yōu)?0%。

你也可以訪問在線鏈接

• CSS relative color (juejin.cn)[2]
• CSS relative color (codepen.io)[3]

二、相對顏色實現(xiàn)的奧秘：calc

從上一節(jié)我們了解到，通過from關(guān)鍵詞，可以將一個顏色分解成幾個獨立變量，比如r、g、b、alpha，但是，僅僅這樣是不夠的。

回到文章標題，為什么說是相對顏色呢？那肯定是和現(xiàn)在的顏色有些關(guān)聯(lián)，要做到這一點，需要用到 CSS calc 函數(shù)。

舉個例子，比如一個半透明的紅色。

--color: rgba(255,0,0,.5)

如何在這個基礎(chǔ)上繼續(xù)降低20%的透明度呢？

很簡單，將這個顏色分解后，直接用calc進行計算。

--color: rgba(255,0,0,.5)
--color20: rgb(from var(--color) r g b / calc(alpha - .2)) /*rgba(255,0,0,.3)*/

這樣，無論給定的顏色是什么透明度，都可以在這個基礎(chǔ)之上降低20%，這就是「相對顏色」！

下面介紹的幾個例子都需要用到calc，接著往下看。

三、顏色的加深和減淡

顏色的加深和減淡其實是提升和降低顏色的亮度。

提到亮度，需要用到有表示亮度（light）的顏色空間，比如說綠色，用hls表示如下：

如果需要將這個綠色加深，就是需要將亮度調(diào)暗一點，比如減少10%。

color: hsl(from green h s calc(l - .1 )); /*hsl(120deg 100% 15%)*/

如果需要將這個綠色減淡，其實就是需要將亮度調(diào)高一點。

color: hsl(from green h s calc(l + .1 )); /*hsl(120deg 100% 35%)*/

下面是實際效果（中間是原色，兩邊分別是減淡和加深的效果）。

四、讓顏色更加鮮艷

和上面的例子一樣，還可以通過改變顏色的飽和度，讓顏色更加鮮艷。

當然，這里就不能用上面的綠色了，因為它的飽和度已經(jīng)是100了，我們換一個比較溫和的綠色。

color: hsl(122.42deg 39.44% 49.22%);

如果需要將這個綠色更加鮮艷一點，就是需要將飽和度提高一點，比如增加30%。

color: hsl(from var(--color) h calc(s + .3) l); /*hsl(122.42deg 69.44% 49.22%)*/

如果需要將這個綠色看起來暗淡無光，直到成灰色，其實就是需要需要將飽和度減少一點。

color: hsl(from var(--color) h calc(s - .3) l); /*hsl(122.42deg 9.44% 49.22%)*/

下面是實際效果（中間是原色，兩邊分別飽和度降低和增強的效果）。

五、生成鄰近色或者互補色

在 CSS 濾鏡中有一個色相旋轉(zhuǎn)濾鏡，可以很輕松的改變?nèi)我庠氐纳唷?/p>

filter: hug-rotate(30deg)

不過這種濾鏡是整體改變，無法只改變某個顏色。

現(xiàn)在用 CSS 相對顏色就很好實現(xiàn)了，比如下面是紅色在經(jīng)過一系列色相變化后的效果。

--color: red;
--color1: hsl(from var(--color) calc(h + 30 ) s l);
--color2: hsl(from var(--color) calc(h + 30 ) s l);
--color3: hsl(from var(--color) calc(h + 60 ) s l);
...

效果如下：

這里每個顏色色相相差 30度， 相差180度的就是光學互補色，比如紅色和青色（淺綠色）就是互補色。

六、顏色的反向

所謂反向，就是黑的變白，白的變黑，藍的變黃，綠的變紫色，這個在濾鏡中也有現(xiàn)成的。

filter: invert(1)

那么，相對顏色中如何計算呢？

其實這個是 rgb的計算方式，只需要將每個通道的顏色值反過來就行了，就像這樣。

color: rgb(from yellow calc(1 - r) calc(1 - g) calc(1 - b));

注意，這里的值都是歸一化處理的，1 表示 255。

效果如下，左邊是原色，右邊是反色。

以上所有演示可以訪問以下鏈接

• CSS relative colors demo (juejin.cn)[4]
• CSS relative colors demo (codepen.io)[5]

七、最后總結(jié)一下

CSS 相對顏色可以說是關(guān)于 CSS 顏色處理最為強大的新特性了，幾乎可以滿足在 CSS 中一切關(guān)于顏色的計算，再也無需 JS參與計算了，下面總結(jié)一下要點。

• 在以往，CSS 中很難對一個顏色進行轉(zhuǎn)換，只能通過濾鏡或者其他偏方去處理。
• 現(xiàn)在出來了 CSS 相對顏色，可以將顏色按照顏色空間分解成單獨的值，類似于 JS 中的解構(gòu)賦值。
• 并且這些值可以隨意配合 calc 計算，在現(xiàn)有基礎(chǔ)上增加或者減少，因此叫做相對顏色。
• CSS 相對顏色可以實現(xiàn)顏色的加深和減淡、飽和度變化、色相變化，還有反色等需求。

當然相對顏色的應用遠遠不止以上幾點，可以說能夠想到的場景都可以用這種方式來解決，將來，這一特性在全局主題應用中尤為重要，一起期待一下吧。

[1]CSS Color Level 5： https://www.w3.org/TR/css-color-5/#relative-colors。

[2]CSS relative color (juejin.cn)： https://code.juejin.cn/pen/7297274766421917747。

[3]CSS relative color (codepen.io)： https://code.juejin.cn/pen/7297274766421917747。

[4]CSS relative colors demo (juejin.cn)： https://code.juejin.cn/pen/7297507402143203337。

[5]CSS relative colors demo (codepen.io)： https://code.juejin.cn/pen/7297507402143203337。