【CSS】1860- 快速了解CSS 相對顏色
在正式開始介紹之前，可以先想一個問題：如何動態(tài)去改變一個顏色的透明度？
比如一個顏色
:root{
color: red
}
如何將它變成透明度為 50% 的紅色呢？
其實在之前這幾篇文章中都有提到過一些顏色混合方法，有興趣的可以回顧一下
不過這些方式都是“偏方”。
現(xiàn)在 Chrome 119 中，令人無比期待的 CSS 相對顏色終于正式支持了！有了它，可以很輕松地將一個顏色轉換成任意你所需要的顏色，對設計師和前端都非常友好，一起了解一下吧
一、什么是 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 中的解構賦值。
也就是說，上面的寫法最后等同于
color: rgb(255 0 0 / 100%)
那么，這個有什么用呢？
其實經過上面的from關鍵詞分解以后，得到的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)?code data-line="60" style="padding: 0.2em 0.5em;font-weight: bold;font-family: -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 1em;color: rgb(145, 109, 213);word-break: break-word;overflow-x: auto;border-radius: 2px;max-width: unset;">50%
你也可以訪問在線鏈接
CSS relative color (juejin.cn)[2]
CSS relative color (codepen.io)[3]
二、相對顏色實現(xiàn)的奧秘：calc
從上一節(jié)我們了解到，通過from關鍵詞，可以將一個顏色分解成幾個獨立變量，比如r、g、b、alpha，但是，僅僅這樣是不夠的。
回到文章標題，為什么說是相對顏色呢？那肯定是和現(xiàn)在的顏色有些關聯(lián)，要做到這一點，需要用到 CSS calc 函數(shù)。
舉個例子，比如一個半透明的紅色
--color: rgba(255,0,0,.5)
如何在這個基礎上繼續(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)*/
這樣，無論給定的顏色是什么透明度，都可以在這個基礎之上降低20%，這就是「相對顏色」！
下面介紹的幾個例子都需要用到calc，接著往下看
三、顏色的加深和減淡
顏色的加深和減淡其實是提升和降低顏色的亮度。
提到亮度，需要用到有表示亮度（light）的顏色空間，比如說綠色，用hls表示如下
如果需要將這個綠色加深，就是需要將亮度調暗一點，比如減少10%
color: hsl(from green h s calc(l - .1 )); /*hsl(120deg 100% 15%)*/
如果需要將這個綠色減淡，其實就是需要將亮度調高一點
color: hsl(from green h s calc(l + .1 )); /*hsl(120deg 100% 35%)*/
下面是實際效果（中間是原色，兩邊分別是減淡和加深的效果）
四、讓顏色更加鮮艷
和上面的例子一樣，還可以通過改變顏色的飽和度，讓顏色更加鮮艷
當然，這里就不能用上面的綠色了，因為它的飽和度已經是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 濾鏡中有一個色相旋轉濾鏡，可以很輕松的改變任意元素的色相
filter: hue-rotate(30deg)
不過這種濾鏡是整體改變，無法只改變某個顏色。
現(xiàn)在用 CSS 相對顏色就很好實現(xiàn)了，比如下面是紅色在經過一系列色相變化后的效果
--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]
七、最后總結一下
CSS 相對顏色可以說是關于 CSS 顏色處理最為強大的新特性了，幾乎可以滿足在 CSS 中一切關于顏色的計算，再也無需 JS參與計算了，下面總結一下要點
在以往，CSS 中很難對一個顏色進行轉換，只能通過濾鏡或者其他偏方去處理
現(xiàn)在出來了 CSS 相對顏色，可以將顏色按照顏色空間分解成單獨的值，類似于 JS 中的解構賦值
并且這些值可以隨意配合 calc 計算，在現(xiàn)有基礎上增加或者減少，因此叫做相對顏色
CSS 相對顏色可以實現(xiàn)顏色的加深和減淡、飽和度變化、色相變化，還有反色等需求
當然相對顏色的應用遠遠不止以上幾點，可以說能夠想到的場景都可以用這種方式來解決，將來，這一特性在全局主題應用中尤為重要，一起期待一下吧。最后，如果覺得還不錯，對你有幫助的話，歡迎點贊、收藏、轉發(fā)???
[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