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

必須です。定義された色空間の1つを定義します：

  • 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

必須です。定義された色空間の1つを定義します：

  • 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 カラー