在 23 年的 CSS 新特性中，有一個非常重要的功能更新 -- 相對顏色。

簡單而言，相對顏色的功能，讓我們在 CSS 中，對顏色有了更為強(qiáng)大的掌控能力。

其核心功能就是，讓我們能夠基于一個現(xiàn)有顏色 A，通過一定的轉(zhuǎn)換規(guī)則，快速生成我們想要的顏色 B。

其功能能夠涵蓋：

• 精簡

• 調(diào)暗

• 飽和度

• 降低飽和度

• 色度增強(qiáng)

• 調(diào)整不透明度

• 反轉(zhuǎn)

• 補(bǔ)充

• 轉(zhuǎn)換

• 對比度

• 調(diào)色板

完整的教程，你可以看這里 -- Chrome for Developers- CSS 相對顏色語法

當(dāng)然，今天我們不會一個一個去過這些功能，更多的時候，我們只需要知道我們能夠?qū)崿F(xiàn)這些功能。

本文，我們將從實際實用角度出發(fā)，基于實際的案例，看看 CSS 相對顏色，能夠如何解決我們的一些實際問題。

快速語法入門

首先，我們通過一張圖，一個案例，快速入門 CSS 相對顏色語法：

相對顏色語法的目標(biāo)是允許從另一種顏色派生顏色。

上圖顯示了將原始顏色 green 轉(zhuǎn)換為新顏色的顏色空間后，該顏色會轉(zhuǎn)換為以 r、g、b 和 alpha 變量表示的各個數(shù)字，這些數(shù)字隨后會直接用作新的 rgb() 顏色的值。

舉個例子：

<p> CSS Relative Color </p>

p { color: rgb(255, 0, 0);}

實現(xiàn)一個 color 為紅色（rgb 值為 rgb(255, 0, 0)）的字體：

基于上面的相對顏色語法，我如何通過一個紅色生成綠色文字呢？示意如下：

效果如下，我們就得到綠色字體：

解釋一下：

1. 原本的紅色顏色，我們把它設(shè)置為 CSS 變量 --color: rgb(255, 0, 0)

2. 想通過紅色得到綠色，對于紅色的 rgb 值 rgb(255, 0, 0) 而言，需要轉(zhuǎn)換成 rgb(0, 255, 0)

3. 使用 CSS 相對顏色語法，就是 rgb(from var(--color) calc(r - 255) calc(g + 255) b)

通過這個 DEMO，我們把幾個核心基礎(chǔ)語法點學(xué)習(xí)一下：

1. from 關(guān)鍵字

from 關(guān)鍵字，它是相對顏色的核心。它表示會將 from 關(guān)鍵字后的顏色定義轉(zhuǎn)換為相對顏色！在 from 關(guān)鍵字后面，CSS 會期待一種顏色，即能夠啟發(fā)生成另一種顏色。

2. from 關(guān)鍵字 后的顏色表示，支持不同顏色表示或者是 CSS 變量

第二個關(guān)鍵點，from 后面通常會接一個顏色值，這個顏色值可以是任意顏色表示法，或者是一個 CSS 變量，下面的寫法都是合法的：

3. 對轉(zhuǎn)換后的變量使用 calc() 或其他 CSS 函數(shù)

另外一個非常重要的基礎(chǔ)概念就是，我們可以對 (from color r g b) 后的轉(zhuǎn)換變量 r g b 使用 calc() 或其他 CSS 函數(shù)。

就是我們上面的例子：

4. 相對顏色語法支持，各種顏色表示函數(shù)：

相對顏色的基礎(chǔ)的使用規(guī)則就是這樣，它不僅支持 rgb 顏色表示法，它支持所有的顏色表示法：

• sRGB 顏色空間：hsl()、hwb()、rgb()；

• CIELAB 顏色空間：lab()、lch()；

• Oklab 顏色空間：oklab()、oklch()；

使用 CSS 相對顏色，實現(xiàn)統(tǒng)一按鈕點擊背景切換

通常頁面上的按鈕，都會有 hover/active 的顏色變化，以增強(qiáng)與用戶的交互。

像是這樣：

最常見的寫法，就是我們需要在 Normal 狀態(tài)、Hover 狀態(tài)、Active 狀態(tài)下寫 3 種顏色：

在之前，我們介紹過一種利用濾鏡 filter: contrast() 或者 filter: brightness() 的統(tǒng)一解決方案，無需寫多個顏色值，可以根據(jù) Normal 狀態(tài)下的色值，通過濾鏡統(tǒng)一實現(xiàn)更亮、或者更暗的偽類顏色。

在今天，我們也可以利用 CSS 相對顏色來做這個事情：

我們通過 hsl 色相、飽和度、亮度顏色表示法表示顏色。實現(xiàn)：

1. 在 :hover 狀態(tài)下，根據(jù)背景色，將背景亮度 l 調(diào)整為原背景色的 1.2 倍

2. 在 :avtive 狀態(tài)下，根據(jù)背景色，將背景亮度 l 調(diào)整為原背景色的 0.8 倍

在實際業(yè)務(wù)中，這是一個非常有用的用法。

完整的 DEMO，你可以戳這里：CodePen Demo -- https://codepen.io/Chokcoco/pen/KKEdOeb

使用 CSS 相對顏色，實現(xiàn)文字顏色自適應(yīng)背景

相對顏色，還有一個非常有意思的場景 -- 讓文字顏色能夠自適應(yīng)背景顏色進(jìn)行展示。

有這么一種場景，有的時候，無法確定文案的背景顏色的最終表現(xiàn)值（因為背景顏色的值可能是后臺配置，通過接口傳給前端），但是，我們又需要能夠讓文字在任何背景顏色下都正常展現(xiàn)（譬如當(dāng)?shù)咨珵楹谏珪r文字應(yīng)該是白色，當(dāng)背景為白色時，文字應(yīng)該為黑色）。

像是這樣：

在不確定背景顏色的情況下，無論什么情況，文字顏色都能夠適配背景的顏色。

在之前，純 CSS 沒有特別好的方案，可以利用 mix-blend-mode: difference 進(jìn)行一定程度的適配：

實操過這個方案的同學(xué)都會知道，在一定情況下，前景文字顏色還是會有一點瑕疵。并且，混合模式這個方案最大的問題是會影響清晰度。

有了 CSS 相對顏色后，我們有了更多的純 CSS 方案。

利用 CSS 相對顏色，反轉(zhuǎn)顏色

我們可以利用相對顏色的能力，基于背景色顏色進(jìn)行反轉(zhuǎn)，賦值給 color。

一種方法是將顏色轉(zhuǎn)換為 RGB，然后從 1 中減去每個通道的值。

代碼非常簡單：

用 1 去減，而不是用 255 去，是因為此刻，會將 rgb() 表示法中的 0~255 映射到 0~1。

效果如下：

配個動圖，我們利用背景色的反色當(dāng) Color 顏色，適配所有背景情況：

完整的 DEMO 和代碼，你可以戳這里：CodePen Demo -- CSS Relatvie Color Adapt BG

當(dāng)然，這個方案還有兩個問題：

1. 如果顏色恰好是在 #808080 灰色附近，它的反色，其實還是它自己！會導(dǎo)致在灰色背景下，前景文字不可見；

2. 絕大部分情況雖然可以正常展示，但是并不是非常美觀好看

為了解決這兩個問題，CSS 顏色規(guī)范在 CSS Color Module Level 6 又推出了一個新的規(guī)范 -- color-contrast()。

利用 color-contrast()，選擇高對比度顏色

color-contrast() 函數(shù)標(biāo)記接收一個 color 值，并將其與其他的 color 值比較，從列表中選擇最高對比度的顏色。

利用這個 CSS 顏色函數(shù)，可以完美的解決上述的問題。

我們只需要提供 #fff 白色和 #000 黑色兩種可選顏色，將這兩種顏色和提供的背景色進(jìn)行比較，系統(tǒng)會自動選取對比度更高的顏色。

改造一下，上面的代碼，它就變成了：

這樣，上面的 DEMO 最終效果就變成了：

完整的 DEMO 和代碼，你可以戳這里：CodePen Demo -- CSS Relatvie Color Adapt BG

此方案的優(yōu)勢在于：

1. 可以限定前景 color 顏色為固定的幾個色值，以保證 UI 層面的統(tǒng)一及美觀

2. 滿足任何情況下的背景色

當(dāng)然，唯一限制這個方案的最大問題在于，當(dāng)前，color-contrast 還只是一個實驗室功能，未大規(guī)模被兼容。

總結(jié)一下

到今天，我們可以利用 CSS 提供的各類顏色函數(shù)，對顏色有了更為強(qiáng)大的掌控力。

很多交互效果，不借助 JavaScript 的運算，也能計算出我們想要的最終顏色值。本文簡單的借助：

1. 使用 CSS 相對顏色，實現(xiàn)統(tǒng)一按鈕點擊背景切換

2. 使用 CSS 相對顏色，實現(xiàn)文字顏色自適應(yīng)背景

兩個案例，介紹了 CSS 相對顏色的功能。但它其實還有更為廣闊的應(yīng)用場景，完整的教程，你可以看這里 -- Chrome for Developers- CSS 相對顏色語法。

作者：ChokCoco

轉(zhuǎn)自：https://www.cnblogs.com/coco1s/p/17951792