CSS 相對顏色 ( Relative Colors )
過去如果要根據現有顏色進行調整，往往需要依賴 CSS 預處理器 ( SASS、LESS ) 或手動管理大量的自訂顏色，但隨著 CSS 技術的發展，目前已經可以開始透過「CSS 相對顏色」（ CSS Relative Colors ），以更簡潔、更動態的方式來處理顏色，這篇教學會介紹如何使用 CSS 的相對顏色。
快速導覽：
教學影片
搭配教學影片一起閱讀，效果會更好！歡迎大家訂閱 STEAM 教育學習網的 Youtube 頻道。
認識 CSS 相對顏色
CSS 相對顏色是 CSS Color Module Level 5 的一項核心功能，可以讓使用者從一個現有的「基礎顏色」中，根據簡單的公式或計算產生「新顏色」，核心語法會使用「CSS 的色彩模型函式」，搭配「from」關鍵字，就能根據顏色通道（ 例如 RGB 色彩空間的紅、綠、藍和透明度 ），獨立計算出要產生的顏色的獨立變數，基本寫法如下：
div {
color: 色彩函式(from 來源色 色彩通道1 色彩通道2 色彩通道3 / 透明度);
}
語法中的 from 關鍵字所取得的來源色，會轉換成顏色函式所使用的色彩通道，並以「獨立變數」的形式呈現，各個變數中間使用「空白」分隔，這些變數可以保持原始數值，也可以透過 CSS 的計算函式進行數學運算，例如 calc()，實現對顏色的「相對」調整，下方是一個簡單的範例，透過 rgb() 函式搭配 from 關鍵字與 calc() 計算函式，將紅色裡的「綠色」增加 150，就能算出最後的結果：橘黃色。
<!-- HTML 程式碼 -->
<h1>oxxo</h1>
<!-- CSS 程式碼 -->
<style>
h1 {
font-size: 50px;
color: rgb(from red r calc(g + 150) b); /* 來源 red 紅色，將 g 通道增加 150 */
}
</style>
使用 CSS 相對顏色的好處
由於 CSS 相對顏色可以針對現有顏色進行動態調整，就不用再過去依賴 CSS 預處理器或 JavaScript，下方列出使用 CSS 相對顏色的主要好處：
簡化程式碼與提升可讀性
減少定義顏色的數量，只需要修改一組顏色，就可以讓所有的顏色跟著變化，尤其適合應用在需要顏色變化的情境 ( 例如 hover、active 或切換亮色暗色系等 )，大幅提升維護效率。
在原有顏色的基礎進行動態調整
相對顏色使用現有顏色的通道進行調整，所以可以動態改變透明度、亮度、飽和度、色相，甚至可以做到顏色反轉或讓設計師根據配色指南進行配色，產生最佳的顏色效果。
建立彈性主題與調色系統
能根據主色動態產生整組變化色，方便使用者建立自適應的色彩設計系統，因應主題或模式改變而自動調整。
CSS 相對顏色範例：調整透明度
下方範例會在 :root 中放置一個顏色變數，接著根據這個顏色變數的數值，透過相對顏色修改顏色的透明度 ( alpha 通道數值 )，就能讓所有的文字產生不同的透明度變化，如果要修改所有文字顏色，只需要調整變數數值，所有相關顏色就會改變且不會影響透明度。
<!-- HTML 程式碼 -->
<h2 class="a">rgb(from var(--color) r g b / 80%)</h2>
<h2 class="b">rgb(from var(--color) r g b / 60%)</h2>
<h2 class="c">rgb(from var(--color)r g b / 40%)</h2>
<h2 class="d">rgb(from var(--color) r g b / 20%)</h2>
<!-- CSS 程式碼 -->
<style>
:root {--color: red;}
h2 {margin: 0;}
.a {color: rgb(from var(--color) r g b / 80%);}
.b {color: rgb(from var(--color) r g b / 60%);}
.c {color: rgb(from var(--color) r g b / 40%);}
.d {color: rgb(from var(--color) r g b / 20%);}
</style>
CSS 相對顏色範例：調整亮度
過去要調整顏色亮度，不外乎都需要先運用繪圖軟體觀察色碼，雖然可以使用 hsl() 或 lch() 等相關色彩函式調整亮度，但只要使用了某種色彩函式定義顏色，如果沒有統一色彩格式，就會造成整份文件色彩格式不一且難以管理，下方範例會在 :root 放置一個變數，接著運用相對顏色搭配 hsl() 函式讓所有的文字產生不同的亮度變化，未來如果要修改所有顏色且不影響亮度，只需要調整變數數值，所有相關顏色就會一起調整。
<!-- HTML 程式碼 -->
<h2 class="a">hsl(from var(--color) h s calc(l - 20))</h2>
<h2 class="b">hsl(from var(--color) h s l)</h2>
<h2 class="c">hsl(from var(--color) h s calc(l + 20))</h2>
<h2 class="d">hsl(from var(--color) h s calc(l + 40))</h2>
<!-- CSS 程式碼 -->
<style>
:root {--color: chocolate;}
h2 {margin: 0;}
.a {color: hsl(from var(--color) h s calc(l - 20));}
.b {color: hsl(from var(--color) h s l);}
.c {color: hsl(from var(--color) h s calc(l + 20));}
.d {color: hsl(from var(--color) h s calc(l + 40));}
</style>
CSS 相對顏色範例：調整飽和度
過去要調整顏色飽和度，通常都需要先運用繪圖軟體降低飽和度後觀察色碼，雖然可以使用 hsl() 或 lch() 等相關色彩函式調整亮度，但針對使用色碼或其他色彩函式的顏色就難以著手調整，下方範例會在 :root 放置一個變數，接著運用相對顏色搭配 hsl() 讓所有的文字產生不同的飽和度變化，未來如果要修改所有顏色且不影響飽和度，只需要調整變數數值，所有相關顏色就會一起調整。
<!-- HTML 程式碼 -->
<h2 class="a">hsl(from var(--color) h calc(s + 50) l)</h2>
<h2 class="b">hsl(from var(--color) h s l)</h2>
<h2 class="c">hsl(from var(--color) h calc(s - 50) l)</h2>
<h2 class="d">hsl(from var(--color) h calc(s - 100) l)</h2>
<!-- CSS 程式碼 -->
<style>
:root {--color: chocolate;}
h2 {margin: 0;}
.a {color: hsl(from var(--color) h calc(s + 50) l);}
.b {color: hsl(from var(--color) h s l);}
.c {color: hsl(from var(--color) h calc(s - 50) l);}
.d {color: hsl(from var(--color) h calc(s - 100) l);}
</style>
CSS 相對顏色範例：相鄰色、對比色、互補色
透過 CSS 相對顏色，可以很輕鬆地做出兩種顏色的「相鄰色、對比色、互補色」，下方列出在 Hue 色相環中這些顏色的偏移範圍：
| 名稱 | 色相偏移範圍 | 說明 |
|---|---|---|
| 相鄰色 | ±30 度以內 | 色系相近，相對和諧。 |
| 對比色 | ±120 度 | 色彩對比強，但不突兀。 |
| 互補色 | ±180 度 | 色彩對比最強，對眼睛最刺激。 |
下方範例會在 :root 放置一個變數，接著運用相對顏色搭配 hsl() 就能產生特定顏色的相鄰色、對比色、互補色，未來如果要修改只需要調整變數數值，所有相關顏色就會一起調整。
<!-- HTML 程式碼 -->
<h2>相鄰色</h2>
<div class="a1">hsl(from var(--c) calc(h + 30) s l)</div>
<div class="a2">hsl(from var(--c) h s l)</div>
<div class="a3">hsl(from var(--c) calc(h - 30) s l)</div>
<h2>對比色</h2>
<div class="b1">hsl(from var(--c) calc(h + 120) s l)</div>
<div class="b2">hsl(from var(--c) h s l)</div>
<div class="b3">hsl(from var(--c) calc(h - 120) s l)</div>
<h2>互補色</h2>
<div class="c1">hsl(from var(--c) h s l)</div>
<div class="c2">hsl(from var(--c) calc(h + 180) s l)</div>
<!-- CSS 程式碼 -->
<style>
:root{--c: #f98765;}
h2{margin: 20px 0 5px;}
div{padding: 10px 0;}
.a1{background: hsl(from var(--c) calc(h + 30) s l);}
.a2{background: hsl(from var(--c) h s l);}
.a3{background: hsl(from var(--c) calc(h - 30) s l);}
.b1{background: hsl(from var(--c) calc(h + 120) s l);}
.b2{background: hsl(from var(--c) h s l);}
.b3{background: hsl(from var(--c) calc(h - 120) s l);}
.c1{background: hsl(from var(--c) h s l);}
.c2{background: hsl(from var(--c) calc(h + 180) s l);}
</style>
將程式稍作修改，加入一些簡單的 JavaScript 和 HTML 的 input 元素，就能實現選擇顏色時，即時預覽相鄰色、對比色和互補色的效果。
<!-- HTML 程式碼 -->
<input type="color" value="#ff0000" id="c">
<main style="--c: #f98765;">
<h2>相鄰色</h2>
<div class="a1">hsl(from var(--c) calc(h + 30) s l)</div>
<div class="a2">hsl(from var(--c) h s l)</div>
<div class="a3">hsl(from var(--c) calc(h - 30) s l)</div>
<h2>對比色</h2>
<div class="b1">hsl(from var(--c) calc(h + 120) s l)</div>
<div class="b2">hsl(from var(--c) h s l)</div>
<div class="b3">hsl(from var(--c) calc(h - 120) s l)</div>
<h2>互補色</h2>
<div class="c1">hsl(from var(--c) calc(h + 180) s l)</div>
<div class="c2">hsl(from var(--c) h s l)</div>
</main>
<!-- CSS 程式碼 -->
<style>
h2{
padding: 20px 0 5px;
margin: 0;
clear: both;
}
div{
width: 200px;
height: 100px;
margin: 0 5px 0 0;
float: left;
}
.a1{background: hsl(from var(--c) calc(h + 30) s l);}
.a2{background: hsl(from var(--c) h s l);}
.a3{background: hsl(from var(--c) calc(h - 30) s l);}
.b1{background: hsl(from var(--c) calc(h + 120) s l);}
.b2{background: hsl(from var(--c) h s l);}
.b3{background: hsl(from var(--c) calc(h - 120) s l);}
.c1{background: hsl(from var(--c) calc(h + 180) s l);}
.c2{background: hsl(from var(--c) h s l);}
</style>
<script>
const input = document.getElementById('c');
const main = document.querySelector('main');
input.addEventListener('input', () => {
main.style.setProperty('--c', input.value); // 讀取數值，即時改變 main 裡面 --c 變數數值
});
</script>
小結
CSS 相對顏色是 CSS 顏色處理領域的一大進步，它賦予開發者在 CSS 中更強大的顏色掌控能力。不僅簡化了許多常見的顏色調整任務，也為動態主題、響應式設計和無障礙網頁提供更好的原生 CSS 解決方案，預計在未來的網頁開發中將扮演重要的角色。
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～