CSS 函式 ( 色彩模型 )

CSS 除了可以利用十六進位色碼和顏色名稱設定顏色，也能使用許多「色彩模型」的函式來定義指定顏色，這篇教學會介紹「色彩模型」相關的 CSS 函式，例如 rgb()、hsl()、lab()、lch()、color()、color-mix() 等等，透過不同色域或色彩數值的定義，讓網頁的顏色更加舒服鮮明。

「定義顏色」的 CSS 函式

下方列出「定義顏色」類型的 CSS 函式 ( 支援度 All 表示主流瀏覽器都支援 )：

rgb()

「rgb()」是「RGB 色彩模型」CSS 函式，屬於 sRGB 色彩空間的顏色模型，下圖呈現 RGB 色彩模型 ( 參考「維基百科 RGB」 )：

rgb() 具有三個必填參數和一個選填參數，寫法如下：

注意，如果是透過 SCSS 或 LESS 編譯 CSS，當用到 A 透度明參數時，需要寫成 rgba()。

div {color: rgb(R, G, B, A);}

下方的範例執行後，會使用 rgb() 設定 div 的邊框顏色、背景顏色和內容文字顏色。

線上展示：https://codepen.io/oxxo/pen/gOJLVme

<!-- HTML 程式碼 -->
<div>oxxo.studio</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border-style: solid;
    border-width: 10px;
    border-color: rgb(0, 0, 0, 0.5);  /* 邊框半透明黑 */
    color: rgb(255, 255, 255);        /* 文字全白 */
    background-color: rgb(255, 0, 0); /* 背景全紅 */
  }
</style>

hsl()

「hsl()」是「HSL 色彩模式」CSS 函式，屬於 sRGB 色彩空間的顏色模型，下圖呈現 HSL 色彩模式 ( 參考「維基百科 HSL」 )：

hsl() 具有三個必填參數和一個選填參數，寫法如下：

div {color: hsl(H, S, L, A);}

下方的範例執行後，會使用 hsl() 設定 div 的邊框顏色、背景顏色和內容文字顏色。

線上展示：https://codepen.io/oxxo/pen/mdYONxL

<!-- HTML 程式碼 -->
<div>oxxo.studio</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border-width: 10px;
    border-style: solid;
    border-color: hsl(0, 0%, 0%, 0.5);     /* 邊框半透明黑 */
    color: hsl(0, 0%, 100%);               /* 文字全白 */
    background-color: hsl(120, 50%, 30%);  /* 背景深綠色 */
  }
</style>

lab()

「lab()」是「Lab 色彩模型」CSS 函式，屬於 CIELab 色彩空間的顏色模型，下圖呈現 LAB 色彩模式 ( 參考「維基百科 Lab」 )：

lab() 具有三個必填參數和一個選填參數，寫法如下 ( 沒有逗號且與 A 之間要有「/」斜線 )：

div {color: lab(L a b / A);}

下方的範例執行後，會使用 lab() 設定 div 的背景顏色。

線上展示：https://codepen.io/oxxo/pen/XWwprRe

<!-- HTML 程式碼 -->
<div class="a">a</div>
<div class="b">b</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid black;
    margin: 10px;
    padding: 5px;
  }

  .a {
    background-color: lab(100% 0 125);
  }

  .b {
    background-color: lab(100% -125 125 / 0.2); /* 加上透明度 */
  }
</style>

lch()

「lch()」是「LCH 色彩模型」CSS 函式，屬於 CIELab 色彩空間的顏色模型，下圖呈現 LCH 色彩模式 ( 參考「維基百科 LCH」 )：

lch() 具有三個必填參數和一個選填參數，寫法如下 ( 沒有逗號且與 A 之間要有「/」斜線 )：

div {color: lab(L C H / A);}

下方的範例執行後，會使用 lab() 設定 div 的背景顏色。

線上展示：https://codepen.io/oxxo/pen/qBGRWmK

<!-- HTML 程式碼 -->
<div class="a">a</div>
<div class="b">b</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid black;
    margin: 10px;
    padding: 5px;
  }

  .a {
    background-color: lch(100% 100 0);
  }

  .b {
    background-color: lch(50% 50 180 / 0.3); /* 加上透明度 */
  }
</style>

oklab()

「oklab()」是「OkLab 色彩模型」CSS 函式，屬於 Oklab 色彩空間的顏色模型，Oklab() 可以在修改顏色的飽和度時保留色調與亮度，並建立平滑均勻的顏色漸層。Oklab() 具有三個必填參數和一個選填參數，寫法如下 ( 沒有逗號且與 A 之間要有「/」斜線 )：

div {color: oklab(L a b / A);}

下方的範例執行後，會使用 oklab() 設定 div 的背景顏色。

線上展示：https://codepen.io/oxxo/pen/JjqEPpB

<!-- HTML 程式碼 -->
<div class="a">a</div>
<div class="b">b</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid black;
    margin: 10px;
    padding: 5px;
  }

  .a {
    background-color: oklab(100% 100% 0%);
  }

  .b {
    background-color: oklab(0.3 -0.4 0.4 / 0.8); /* 加上透明度 */
  }
</style>

oklch()

「oklch()」是「OkLCH 色彩模型」CSS 函式，屬於 Oklab 色彩空間的顏色模型，Oklch() 具有三個必填參數和一個選填參數，寫法如下 ( 沒有逗號且與 A 之間要有「/」斜線 )：

div {color: oklch(L C H / A);}

下方的範例執行後，會使用 oklch() 設定 div 的背景顏色。

線上展示：https://codepen.io/oxxo/pen/yLWgBEb

<!-- HTML 程式碼 -->
<div class="a">a</div>
<div class="b">b</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid black;
    margin: 10px;
    padding: 5px;
  }

  .a {
    background-color: oklch(100% 100% 50);
  }

  .b {
    background-color: oklch(0.3 0.2 0 / 0.5); /* 加上透明度 */
  }
</style>

color()

「color()」是「指定色彩空間顏色」CSS 函式，透過指定色彩空間以及分色的數值設定顏色，color() 具有四個必填參數和一個選填參數，寫法如下 ( 沒有逗號且與 A 之間要有「/」斜線 )：

div {color: color(colorspace c1 c2 c3 / A);}

其中 colorspace 參數的的色彩空間名稱如下表所示：

下方的範例執行後，會使用 color() 設定不同 div 的背景顏色 ( 仔細看顏色有些許差異 )。

線上展示：https://codepen.io/oxxo/pen/LYoxYEv

<!-- HTML 程式碼 -->
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid black;
    margin: 10px;
    padding: 5px;
  }
  .a {
    background-color: color(srgb-linear 0.5 1 0);
  }
  .b {
    background-color: color(display-p3 0.5 1 0);
  }
  .c {
    background-color: color(xyz 0.5 1 0);
  }
</style>

color-mix()

「color-mix()」是「色彩模型裡的顏色混合」CSS 函式，透過指定色彩模型、要混合的顏色比例，就能混合出特定的顏色，color-mix() 具有三個必填參數和兩個選填參數，寫法如下：

div {color: color-mix(in colorspace, color1, color2);}       /* 按照 50% 50% 混合 */
div {color: color-mix(in colorspace, color1 p1, color2 p2);} /* 按照比例混合 */

下方的範例執行後，會使用 color-mix() 設定不同 div 的背景顏色。

線上展示：https://codepen.io/oxxo/pen/YzbNzpP

<!-- HTML 程式碼 -->
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
<div class="d">d</div>
<div class="e">e</div>
<div class="f">f</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid black;
    margin: 10px;
    padding: 5px;
  }
  .a {
    background-color: color-mix(in srgb, blue 0%, white);
  }
  .b {
    background-color: color-mix(in srgb, blue 20%, white);
  }
  .c {
    background-color: color-mix(in srgb, blue 40%, white);
  }
  .d {
    background-color: color-mix(in srgb, blue 60%, white);
  }
  .e {
    background-color: color-mix(in srgb, blue 80%, white);
  }
  .f {
    background-color: color-mix(in srgb, blue 100%, white);
  }
</style>

light-dark()

「light-dark()」是「淺色或深色模式」CSS 函式，主要因應近年來網頁或行動裝置推出的「深色或淺色」模式瀏覽行為，函式裡可以指定一組「light 淺色」顏色和一組「dark 深色顏色」，接著就會根據瀏覽的深淺模式切換，寫法如下：

:root {
  color-scheme: light dark;  /* 根據使用者的設定 */
}
div {color: light-dark(light, dark);}

如果想要強制切換樣式，也可以參考下方的範例，執行後，不同的 div 裡會根據 light 和 dark 的不同，而產生不同的顏色 ( 通常不會這樣做，這種效果使用 CSS 選擇器才是標準做法 )。

線上展示：https://codepen.io/oxxo/pen/yLWgLPq

<!-- HTML 程式碼 -->
<div class="light">
  <ul>
    <li class="a">oxxo</li>
    <li class="b">apple</li>
    <li class="c">banana</li>
  </ul>
</div>
<div class="dark">
  <ul>
    <li class="a">oxxo</li>
    <li class="b">apple</li>
    <li class="c">banana</li>
  </ul>
</div>

<!-- CSS 程式碼 -->
<style>
  .light {
    color-scheme: light;
  }
  .dark {
    color-scheme: dark;
  }
  .a {
    background-color: light-dark(#f00, #0cf);
  }
  .b {
    background-color: light-dark(#f70, #09f);
  }
  .c {
    background-color: light-dark(#fa0, #06f);
  }
</style>

小結

通常在設定 CSS 顏色時，大多用到十六進位色碼或 rgb() 就差不多處理完成，極少數的狀況才會用到其他的色彩模型函式，不過透過這篇文章，也了解到原來 CSS 支援這麼多種色彩模型，甚至還有提供 color-mix 混色和 light-dark() 深淺模式切換的功能，如果未來網站裡有需要，不妨好好的利用這些函式！

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～