相对颜色

过去如果要根据现有颜色进行调整，往往需要依赖 CSS 预处理器 ( SASS、LESS ) 或手动管理大量的自订颜色，但随着 CSS 技术的发展，目前已经可以开始透过“CSS 相对颜色”（ CSS Relative Colors ），以更简洁、更动态的方式来处理颜色，这篇教学会介绍如何使用 CSS 的相对颜色。

快速导览：

• 认识 CSS 相对颜色
• 使用 CSS 相对颜色的好处
• CSS 相对颜色范例：调整透明度
• CSS 相对颜色范例：调整亮度
• CSS 相对颜色范例：调整饱和度
• CSS 相对颜色范例：呈现相邻色、对比色、互补色

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

认识 CSS 相对颜色

CSS 相对颜色是 CSS Color Module Level 5 的一项核心功能，可以让用户从一个现有的“基础颜色”中，根据简单的公式或计算产生“新颜色”，核心语法会使用“CSS 的色彩模型函数”，搭配“from”关键字，就能根据颜色通道（ 例如 RGB 色彩空间的红、绿、蓝和透明度 ），独立计算出要产生的颜色的独立变数，基本写法如下：

div {
  color: 色彩函式(from 來源色 色彩通道1 色彩通道2 色彩通道3 / 透明度);
}

语法中的 from 关键字所取得的来源色，会转换成颜色函数所使用的色彩通道，并以“独立变数”的形式呈现，各个变数中间使用“空白”分隔，这些变数可以保持原始数值，也可以透过 CSS 的计算函数进行数学运算，例如 calc()，实现对颜色的“相对”调整，下方是一个简单的范例，透过 rgb() 函数搭配 from 关键字与 calc() 计算函数，将红色里的“绿色”增加 150，就能算出最后的结果：橘黄色。

• 参考：rgb()、calc()
• 线上展示：https://codepen.io/oxxo/pen/qEdRJdy

<!-- 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 通道数值 )，就能让所有的文字产生不同的透明度变化，如果要修改所有文字颜色，只需要调整变数数值，所有相关颜色就会改变且不会影响透明度。

线上展示：https://codepen.io/oxxo/pen/bNdgmvB

<!-- 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() 函数让所有的文字产生不同的亮度变化，未来如果要修改所有颜色且不影响亮度，只需要调整变数数值，所有相关颜色就会一起调整。

线上展示：https://codepen.io/oxxo/pen/EajZOvY

<!-- 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() 让所有的文字产生不同的饱和度变化，未来如果要修改所有颜色且不影响饱和度，只需要调整变数数值，所有相关颜色就会一起调整。

线上展示：https://codepen.io/oxxo/pen/raVjQzg

<!-- 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 色相环中这些颜色的偏移范围：

下方范例会在 :root 放置一个变数，接着运用相对颜色搭配 hsl() 就能产生特定颜色的相邻色、对比色、互补色，未来如果要修改只需要调整变数数值，所有相关颜色就会一起调整。

线上展示：https://codepen.io/oxxo/pen/KwpaJYZ

<!-- 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 元素，就能实现选择颜色时，即时预览相邻色、对比色和互补色的效果。

线上展示：https://codepen.io/oxxo/pen/JodEVYE

<!-- 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 解决方案，预计在未来的网页开发中将扮演重要的角色。

意见反馈