相較于傳統(tǒng)的手動調(diào)整色值，CSS 中新增的 relative colors（相對顏色）功能，直接解決了多年來前端開發(fā)中顏色維護(hù)難、樣式重復(fù)多、效果不統(tǒng)一等一系列問題。

不夸張地說：這項功能，讓無數(shù)本來要寫 10 多行甚至上百行 JavaScript 的需求，現(xiàn)在只需要一行 CSS。

什么是 Relative Colors？

相對顏色，顧名思義，是基于已有顏色修改其某些成分（如亮度、透明度、色相等）來生成新的顏色。核心思想就是：定義一次，派生多個場景樣式。

示例：

:root {
  --main-color: #0066cc;
  --hover-color: color-mix(in srgb, var(--main-color), white 20%);
}

含義是：將 --main-color 與白色按 80:20 的比例混合，生成懸停時使用的 --hover-color。以后只需修改 --main-color，其他派生顏色都會自動更新。

為什么推薦使用相對顏色？

Relative Color 的語法結(jié)構(gòu)

CSS 支持以下語法：

hsl(from <源顏色> h s l / alpha)
rgb(from <源顏色> r g b / alpha)

支持的顏色模型：

• hsl()、rgb()
• lab()、lch()、oklab()（更現(xiàn)代的模型，適合高級配色）

關(guān)鍵點：

• from 語法表示“從某個已有顏色取值”
• 可選擇重用部分值或修改特定通道
• 支持 calc() 用于亮度或透明度的動態(tài)調(diào)整

示例：修改亮度

hsl(from var(--button-color) h s calc(l + 10%))

這段代碼代表從 --button-color 中提取色相與飽和度，僅對亮度進(jìn)行+10%的調(diào)整。

實戰(zhàn)場景：統(tǒng)一按鈕懸停樣式

傳統(tǒng)做法中，每種按鈕顏色都需要單獨(dú)定義懸停態(tài)，如下：

.button-blue:hover   { background-color: #007fff; }
.button-green:hover  { background-color: #3fb96e; }
.button-red:hover    { background-color: #e04c4c; }

這種方式冗長、難維護(hù)。

相對顏色版本：

:root {
--btn-blue: hsl(220, 100%, 50%);
--btn-green: hsl(140, 70%, 45%);
--btn-red: hsl(0, 80%, 55%);
--btn-yellow: hsl(45, 100%, 50%);
}

.button {
color: white;
border: none;
padding: 10px20px;
cursor: pointer;
}

.button.blue   { --button-color: var(--btn-blue); }
.button.green  { --button-color: var(--btn-green); }
.button.red    { --button-color: var(--btn-red); }
.button.yellow { --button-color: var(--btn-yellow); }

.button.blue,
.button.green,
.button.red,
.button.yellow {
background-color: var(--button-color);
}

/* 通用 hover 樣式 */
.button:hover {
background-color: hsl(from var(--button-color) h s calc(l + 10%));
}

這樣，無論有多少按鈕，只需定義一個懸停樣式，統(tǒng)一且易維護(hù)。

瀏覽器支持情況

截至 2025 年，以下瀏覽器已支持 relative colors：

使用時的注意事項

總結(jié)

CSS 中的 relative colors 是一個被嚴(yán)重低估卻極具潛力的新特性：

• 減少代碼重復(fù)，減少手動維護(hù)；
• 保證 UI 風(fēng)格一致性；
• 改變顏色變體像寫邏輯一樣靈活；
• 已在大多數(shù)現(xiàn)代瀏覽器中得到支持。

不妨在下一個項目中嘗試引入它，一行 CSS，帶來意想不到的開發(fā)與維護(hù)便利。

讓顏色管理進(jìn)入“變量驅(qū)動 + 動態(tài)計算”的新階段！??