在 23 年的 CSS 新特性中，有一個非常重要的功能更新 -- 相對顏色。
簡單而言，相對顏色的功能，讓我們在 CSS 中，對顏色有了更為強大的掌控能力。
其核心功能就是，讓我們能夠基于一個現(xiàn)有顏色 A，通過一定的轉(zhuǎn)換規(guī)則，快速生成我們想要的顏色 B。
其功能能夠涵蓋：
- 精簡
- 調(diào)暗
- 飽和度
- 降低飽和度
- 色度增強
- 調(diào)整不透明度
- 反轉(zhuǎn)
- 補充
- 轉(zhuǎn)換
- 對比度
- 調(diào)色板
完整的教程，你可以看這里 -- Chrome for Developers- CSS 相對顏色語法
當(dāng)然，今天我們不會一個一個去過這些功能，更多的時候，我們只需要知道我們能夠?qū)崿F(xiàn)這些功能。
本文，我們將從實際實用角度出發(fā)，基于實際的案例，看看 CSS 相對顏色，能夠如何解決我們的一些實際問題。
快速語法入門
首先，我們通過一張圖，一個案例，快速入門 CSS 相對顏色語法：
相對顏色語法的目標是允許從另一種顏色派生顏色。
上圖顯示了將原始顏色 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)）的字體：
基于上面的相對顏色語法，我如何通過一個紅色生成綠色文字呢？示意如下：
p {
--color: rgb(255, 0, 0);
color: rgb(from var(--color) calc(r - 255) calc(g + 255) b); /* result = rgb(0, 255, 0) */
}
效果如下，我們就得到綠色字體：
解釋一下：
- 原本的紅色顏色，我們把它設(shè)置為 CSS 變量
--color: rgb(255, 0, 0) - 想通過紅色得到綠色，對于紅色的 rgb 值
rgb(255, 0, 0)而言，需要轉(zhuǎn)換成rgb(0, 255, 0) - 使用 CSS 相對顏色語法，就是
rgb(from var(--color) calc(r - 255) calc(g + 255) b)
通過這個 DEMO，我們把幾個核心基礎(chǔ)語法點學(xué)習(xí)一下：
- from 關(guān)鍵字
from 關(guān)鍵字，它是相對顏色的核心。它表示會將 from 關(guān)鍵字后的顏色定義轉(zhuǎn)換為相對顏色！在 from 關(guān)鍵字后面，CSS 會期待一種顏色，即能夠啟發(fā)生成另一種顏色。
- from 關(guān)鍵字 后的顏色表示，支持不同顏色表示或者是 CSS 變量
第二個關(guān)鍵點，from 后面通常會接一個顏色值，這個顏色值可以是任意顏色表示法，或者是一個 CSS 變量，下面的寫法都是合法的：
p {
color: rgba(from #ff0000) r g b);
color: rgb(from rgb(255, 0, 0) r g b);
color: rgb(from hsl(0deg, 100%, 50%) r g b);
color: rgb(from var(--hotpink) r g b);
}
- 對轉(zhuǎn)換后的變量使用 calc() 或其他 CSS 函數(shù)
另外一個非常重要的基礎(chǔ)概念就是，我們可以對 (from color r g b) 后的轉(zhuǎn)換變量 r g b 使用 calc() 或其他 CSS 函數(shù)。
就是我們上面的例子：
p {
--color: rgb(255, 0, 0);
color: rgb(from var(--color) calc(r - 255) calc(g + 255) b); /* result = rgb(0, 255, 0) */
}
- 相對顏色語法支持，各種顏色表示函數(shù)：
相對顏色的基礎(chǔ)的使用規(guī)則就是這樣，它不僅支持 rgb 顏色表示法，它支持所有的顏色表示法：
- sRGB 顏色空間：hsl()、hwb()、rgb()；
- CIELAB 顏色空間：lab()、lch()；
- Oklab 顏色空間：oklab()、oklch()；
使用 CSS 相對顏色，實現(xiàn)統(tǒng)一按鈕點擊背景切換
通常頁面上的按鈕，都會有 hover/active 的顏色變化，以增強與用戶的交互。
像是這樣：
最常見的寫法，就是我們需要在 Normal 狀態(tài)、Hover 狀態(tài)、Active 狀態(tài)下寫 3 種顏色：
p {
color: #ffcc00;
transition: .3s all;
}
/* Hover 偽類下為 B 顏色 */
p:hover {
color: #ffd21f;
}
/** Active 偽類下為 C 顏色 **/
p:active {
color: #ab8a05;
}
在之前，我們介紹過一種利用濾鏡 filter: contrast() 或者 filter: brightness() 的統(tǒng)一解決方案，無需寫多個顏色值，可以根據(jù) Normal 狀態(tài)下的色值，通過濾鏡統(tǒng)一實現(xiàn)更亮、或者更暗的偽類顏色。
在今天，我們也可以利用 CSS 相對顏色來做這個事情：
div {
--bg: #fc0;
background: var(--bg);
transition: .3s all;
}
div:hover {
background: hsl(from var(--bg) h s calc(l * 1.2));
}
div:active {
background: hsl(from var(--bg) h s calc(l * 0.8));
}
我們通過 hsl 色相、飽和度、亮度顏色表示法表示顏色。實現(xiàn)：
- 在
:hover狀態(tài)下，根據(jù)背景色，將背景亮度 l 調(diào)整為原背景色的 1.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)背景顏色進行展示。
有這么一種場景，有的時候，無法確定文案的背景顏色的最終表現(xiàn)值（因為背景顏色的值可能是后臺配置，通過接口傳給前端），但是，我們又需要能夠讓文字在任何背景顏色下都正常展現(xiàn)（譬如當(dāng)?shù)咨珵楹谏珪r文字應(yīng)該是白色，當(dāng)背景為白色時，文字應(yīng)該為黑色）。
像是這樣：
在不確定背景顏色的情況下，無論什么情況，文字顏色都能夠適配背景的顏色。
在之前，純 CSS 沒有特別好的方案，可以利用 mix-blend-mode: difference 進行一定程度的適配：
div {
// 不確定的背景色
}
p {
color: #fff;
mix-blend-mode: difference;
}
實操過這個方案的同學(xué)都會知道，在一定情況下，前景文字顏色還是會有一點瑕疵。并且，混合模式這個方案最大的問題是會影響清晰度。
有了 CSS 相對顏色后，我們有了更多的純 CSS 方案。
利用 CSS 相對顏色，反轉(zhuǎn)顏色
我們可以利用相對顏色的能力，基于背景色顏色進行反轉(zhuǎn)，賦值給 color。
一種方法是將顏色轉(zhuǎn)換為 RGB，然后從 1 中減去每個通道的值。
代碼非常簡單：
p {
/** 任意背景色 **/
--bg: #ffcc00;
background: var(--bg);
color: rgb(from var(--bg) calc(1 - r) calc(1 - g) calc(1 - b)); /** 基于背景反轉(zhuǎn)顏色 **/
}
用 1 去減，而不是用 255 去，是因為此刻，會將
rgb()表示法中的0~255映射到0~1。
效果如下：
配個動圖，我們利用背景色的反色當(dāng) Color 顏色，適配所有背景情況：
完整的 DEMO 和代碼，你可以戳這里：CodePen Demo -- CSS Relatvie Color Adapt BG
當(dāng)然，這個方案還有兩個問題：
- 如果顏色恰好是在
#808080灰色附近，它的反色，其實還是它自己！會導(dǎo)致在灰色背景下，前景文字不可見； - 絕大部分情況雖然可以正常展示，但是并不是非常美觀好看
為了解決這兩個問題，CSS 顏色規(guī)范在 CSS Color Module Level 6 又推出了一個新的規(guī)范 -- color-contrast()。
利用 color-contrast()，選擇高對比度顏色
color-contrast() 函數(shù)標記接收一個 color 值，并將其與其他的 color 值比較，從列表中選擇最高對比度的顏色。
利用這個 CSS 顏色函數(shù)，可以完美的解決上述的問題。
我們只需要提供 #fff 白色和 #000 黑色兩種可選顏色，將這兩種顏色和提供的背景色進行比較，系統(tǒng)會自動選取對比度更高的顏色。
改造一下，上面的代碼，它就變成了：
p {
/** 任意背景色 **/
--bg: #ffcc00;
background: var(--bg);
color: color-contrast(var(--bg) vs #fff, #000); /** 基于背景色，自動選擇對比度更高的顏色 **/
}
這樣，上面的 DEMO 最終效果就變成了：
完整的 DEMO 和代碼，你可以戳這里：CodePen Demo -- CSS Relatvie Color Adapt BG
此方案的優(yōu)勢在于：
- 可以限定前景 color 顏色為固定的幾個色值，以保證 UI 層面的統(tǒng)一及美觀
- 滿足任何情況下的背景色
當(dāng)然，唯一限制這個方案的最大問題在于，當(dāng)前，color-contrast 還只是一個實驗室功能，未大規(guī)模被兼容。
總結(jié)一下
到今天，我們可以利用 CSS 提供的各類顏色函數(shù)，對顏色有了更為強大的掌控力。
很多交互效果，不借助 JavaScript 的運算，也能計算出我們想要的最終顏色值。本文簡單的借助：
- 使用 CSS 相對顏色，實現(xiàn)統(tǒng)一按鈕點擊背景切換
- 使用 CSS 相對顏色，實現(xiàn)文字顏色自適應(yīng)背景
兩個案例，介紹了 CSS 相對顏色的功能。但它其實還有更為廣闊的應(yīng)用場景，完整的教程，你可以看這里 -- Chrome for Developers- CSS 相對顏色語法。
最后
好了，本文到此結(jié)束，希望本文對你有所幫助 ??
想 Get 到最有意思的 CSS 資訊，千萬不要錯過我的公眾號 -- iCSS前端趣聞 ??
更多精彩 CSS 技術(shù)文章匯總在我的 Github -- iCSS ，持續(xù)更新，歡迎點個 star 訂閱收藏。文章來源：http://www.zghlxwxcb.cn/news/detail-776960.html
如果還有什么疑問或者建議，可以多多交流，原創(chuàng)文章，文筆有限，才疏學(xué)淺，文中若有不正之處，萬望告知。文章來源地址http://www.zghlxwxcb.cn/news/detail-776960.html
到了這里，關(guān)于現(xiàn)代 CSS 解決方案：文字顏色自動適配背景色！的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
