色彩模型

CSS 除了可以利用十六进制色码和颜色名称设定颜色，也能使用许多“色彩模型”的函数来定义指定颜色，这篇教学会介绍“色彩模型”相关的 CSS 函数，例如 rgb()、hsl()、lab()、lch()、color()、color-mix()、light-dark() 等等，透过不同色域或色彩数值的定义，让网页的颜色更加舒服鲜明。

教学影片

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

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

“定义颜色”的 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() 表示颜色由 Hue ( 色相 )、Saturation ( 饱和度 ) 和 Lightness ( 亮度 ) 组成，具有三个必填参数和一个选填参数，写法如下：

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() 表示颜色由 Lightness ( 亮度 ) 和 a、b 轴向 ( 色彩方向 ) 组成，具有三个必填参数和一个选填参数，写法如下 ( 没有逗号且与 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() 表示颜色由 Lightness ( 亮度 )、Chroma ( 饱和度 ) 和 Hue ( 色相 ) 组成，具有三个必填参数和一个选填参数，写法如下 ( 没有逗号且与 A 之间要有“/”斜线 )：

此处出现的 Chroma ( 彩度、色度 ) 和 Saturation ( 饱和度 ) 常常被混用，但在色彩学上其实是不同概念，Chroma 表示是“颜色离灰色多远”，Saturation 则是“颜色在自己的亮度下，离灰色有多远”，也就是说 Chroma 是绝对值， Saturation 是相对值。

div {color: lch(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() 名称中的 OK 是创作者 Ottosson Kim 名字的缩写，Lab 表示颜色由 Lightness ( 亮度 ) 与 a、b ( 色彩方向 ) 组成，具有三个必填参数和一个选填参数，写法如下 ( 没有逗号且与 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 函数，主要因应近年来网页或移动设备推出的“深色或浅色”模式浏览行为，函数必须搭配 color-scheme 样式属性，透过指定的“light 浅色”或“dark 深色”，就会根据浏览的深浅模式切换，写法如下：

当 color-scheme 设定为 light dark 表示用户可以切换模式，设定 only light 就只会显示亮色模式，设定为 only dark 就只会显示暗色模式。

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

如果想要强制切换样式，也可以参考下方的范例，执行后，不同的 div 里会根据 light 和 dark 的不同，而产生不同的颜色 ( 通常不会这样做，color-scheme 都是放在 :root 读取浏览器深浅模式为主 )。

线上展示：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() 深浅模式切换的功能，如果未来网站里有需要，不妨好好的利用这些函数！

意见反馈