現代 CSS 解決方案：文字顏色自動適配背景色！

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

簡單而言，相對顏色的功能，讓我們在 CSS 中，對顏色有了更爲強大的掌控能力。

其核心功能就是，讓我們能夠基於一個現有顏色 A，通過一定的轉換規則，快速生成我們想要的顏色 B。

其功能能夠涵蓋：

• 精簡
• 調暗
• 飽和度
• 降低飽和度
• 色度增強
• 調整不透明度
• 反轉
• 補充
• 轉換
• 對比度
• 調色板

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

當然，今天我們不會一個一個去過這些功能，更多的時候，我們只需要知道我們能夠實現這些功能。

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

快速語法入門

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

相對顏色語法的目標是允許從另一種顏色派生顏色。

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

舉個例子：

<p> CSS Relative Color </p>

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

實現一個 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) */
}

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

解釋一下：

1. 原本的紅色顏色，我們把它設置爲 CSS 變量 --color: rgb(255, 0, 0)
2. 想通過紅色得到綠色，對於紅色的 rgb 值 rgb(255, 0, 0) 而言，需要轉換成 rgb(0, 255, 0)
3. 使用 CSS 相對顏色語法，就是 rgb(from var(--color) calc(r - 255) calc(g + 255) b)

通過這個 DEMO，我們把幾個核心基礎語法點學習一下：

1. from 關鍵字

from 關鍵字，它是相對顏色的核心。它表示會將 from 關鍵字後的顏色定義轉換爲相對顏色！在 from 關鍵字後面，CSS 會期待一種顏色，即能夠啓發生成另一種顏色。

2. from 關鍵字 後的顏色表示，支持不同顏色表示或者是 CSS 變量

第二個關鍵點，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);
}

3. 對轉換後的變量使用 calc() 或其他 CSS 函數

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

就是我們上面的例子：

p {
    --color: rgb(255, 0, 0);
    color: rgb(from var(--color) calc(r - 255) calc(g + 255) b);  /* result = rgb(0, 255, 0) */
}

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

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

• sRGB 顏色空間：hsl()、hwb()、rgb()；
• CIELAB 顏色空間：lab()、lch()；
• Oklab 顏色空間：oklab()、oklch()；

使用 CSS 相對顏色，實現統一按鈕點擊背景切換

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

像是這樣：

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

p {
    color: #ffcc00;
    transition: .3s all;
}
/* Hover 僞類下爲 B 顏色 */
p:hover {
    color: #ffd21f;
}
/** Active 僞類下爲 C 顏色 **/
p:active {
    color: #ab8a05;
}

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

在今天，我們也可以利用 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 色相、飽和度、亮度顏色表示法表示顏色。實現：

1. 在 :hover 狀態下，根據背景色，將背景亮度 l 調整爲原背景色的 1.2 倍
2. 在 :avtive 狀態下，根據背景色，將背景亮度 l 調整爲原背景色的 0.8 倍

在實際業務中，這是一個非常有用的用法。

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

使用 CSS 相對顏色，實現文字顏色自適應背景

相對顏色，還有一個非常有意思的場景 -- 讓文字顏色能夠自適應背景顏色進行展示。

有這麼一種場景，有的時候，無法確定文案的背景顏色的最終表現值（因爲背景顏色的值可能是後臺配置，通過接口傳給前端），但是，我們又需要能夠讓文字在任何背景顏色下都正常展現（譬如當底色爲黑色時文字應該是白色，當背景爲白色時，文字應該爲黑色）。

像是這樣：

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

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

div {
    // 不確定的背景色
}
p {
    color: #fff;
    mix-blend-mode: difference;
}

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

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

利用 CSS 相對顏色，反轉顏色

我們可以利用相對顏色的能力，基於背景色顏色進行反轉，賦值給 color。

一種方法是將顏色轉換爲 RGB，然後從 1 中減去每個通道的值。

代碼非常簡單：

p {
    /** 任意背景色 **/
    --bg: #ffcc00;
    background: var(--bg);

    color: rgb(from var(--bg) calc(1 - r) calc(1 - g) calc(1 - b));  /** 基於背景反轉顏色 **/
}

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

效果如下：

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

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

當然，這個方案還有兩個問題：

1. 如果顏色恰好是在 #808080 灰色附近，它的反色，其實還是它自己！會導致在灰色背景下，前景文字不可見；
2. 絕大部分情況雖然可以正常展示，但是並不是非常美觀好看

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

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

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

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

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

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

p {
    /** 任意背景色 **/
    --bg: #ffcc00;
    background: var(--bg);

    color: color-contrast(var(--bg) vs #fff, #000);  /** 基於背景色，自動選擇對比度更高的顏色 **/
}

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

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

此方案的優勢在於：

1. 可以限定前景 color 顏色爲固定的幾個色值，以保證 UI 層面的統一及美觀
2. 滿足任何情況下的背景色

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

總結一下

到今天，我們可以利用 CSS 提供的各類顏色函數，對顏色有了更爲強大的掌控力。

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

1. 使用 CSS 相對顏色，實現統一按鈕點擊背景切換
2. 使用 CSS 相對顏色，實現文字顏色自適應背景

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

最後

好了，本文到此結束，希望本文對你有所幫助 😃

想 Get 到最有意思的 CSS 資訊，千萬不要錯過我的公衆號 -- iCSS前端趣聞 😄

更多精彩 CSS 技術文章彙總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。

如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。