CSS color() 函數

定義和用法

CSS 的 color() 函數允許在特定的顏色空間中指定顏色。

實例

例子 1

在 display-p3 顏色空間中指定背景顏色（透明度為 0.3）：

div {
  padding: 15px;
  border: 2px solid black;
  background-color: color(display-p3 0.6 0.6 0 / .3);
}

親自試一試

例子 2

使用相對值語法：

div {
  padding: 15px;
  border: 2px solid black;
  background-color: color(from blue srgb r g b / 0.4);
}

親自試一試

CSS 語法

絕對值語法

color(colorspace c1 c2 c3 / A)
值 描述
colorspace

必需。定義預定義的顏色空間之一：

  • srgb
  • srgb-linear
  • display-p3
  • a98-rgb
  • prophoto-rgb
  • rec2020
  • xyz
  • xyz-d50
  • xyz-d65
c1 c2 c3

必需。表示顏色空間的組件值。

每個值可以寫為數字（0 到 1 之間）、百分比（0% 到 100%）或關鍵字 none。
/ A

可選。表示顏色的透明度通道值（0 表示完全透明，100 表示完全不透明）。

也可以使用 none（表示無透明度通道）。

默認值為 100。

相對值語法

color(from color colorspace c1 c2 c3 / A)
值 描述
from color

以關鍵字 from 開頭，后跟表示原始顏色的顏色值。

這是相對顏色所基于的原始顏色。
colorspace

必需。定義預定義的顏色空間之一：

  • srgb
  • srgb-linear
  • display-p3
  • a98-rgb
  • prophoto-rgb
  • rec2020
  • xyz
  • xyz-d50
  • xyz-d65
c1 c2 c3

必需。表示顏色空間的組件值。

每個值可以寫為數字（0 到 1 之間）、百分比（0% 到 100%）或關鍵字 none。
/ A

可選。表示顏色的透明度通道值（0 表示完全透明，100 表示完全不透明）。

也可以使用 none（表示無透明度通道）。

默認值為 100。

技術細節

版本： CSS Color Module Level 5

瀏覽器支持

表格中的數字表示首個完全支持該函數的瀏覽器版本。

Chrome Edge Firefox Safari Opera
111 111 113 15 97

相關頁面

參考：CSS 顏色