color()
Baseline 2023
Newly available
Since May 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
color()
関数記法により、他のほとんどの色関数が暗黙に処理する sRGB 色空間ではなく、特定の指定した色空間で色を指定することができます。
特定の色空間に対応しているかどうかは、CSS メディア特性の color-gamut
で検出することができます。
構文
color(display-p3 1 0.5 0);
color(display-p3 1 0.5 0 / .5);
値
関数記法: color(colorspace c1 c2 c3[ / A])
colorspace
-
<ident>
で、定義済みの色空間(srgb
,srgb-linear
,display-p3
,a98-rgb
,prophoto-rgb
,rec2020
,xyz
,xyz-d50
,xyz-d65
)のうちの 1 つを記述します。 c1
,c2
,c3
-
0 と 1 の間の数値 (
<number>
)、<percentage>
、キーワードnone
のいずれかで、その色空間における成分値を指定します。 A
省略可-
<alpha-value>
またはキーワードnone
で、1
は100%
(完全に不透明)に対応します。
メモ: none
の効果については色成分の欠落を参照してください。
形式文法
<color()> =
color( [ from <color> ]? <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<colorspace-params> =
<custom-params> |
<predefined-rgb-params> |
<predefined-polar-params> |
<predefined-rectangular-params> |
<xyz-params>
<alpha-value> =
<number> |
<percentage>
<custom-params> =
<dashed-ident> [ <number> | <percentage> | none ]+
<predefined-rgb-params> =
<predefined-rgb> [ <number> | <percentage> | none ]{3}
<predefined-polar-params> =
jzczhz [ <number> | <percentage> | none ]{2} [ <hue> | none ]
<predefined-rectangular-params> =
<predefined-rectangular> [ <number> | <percentage> | none ]{3}
<xyz-params> =
<xyz> [ <number> | <percentage> | none ]{3}
<predefined-rgb> =
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020 |
rec2100-pq |
rec2100-hlg |
rec2100-linear
<hue> =
<number> |
<angle>
<predefined-rectangular> =
jzazbz |
ictcp
<xyz> =
xyz |
xyz-d50 |
xyz-d65
例
定義済みの色空間で color() を使用
次の例は、 color()
関数の明度、 a 軸、 b 軸の値を変化させたときの効果を示しています。
HTML
<div data-color="red-a98-rgb"></div>
<div data-color="red-prophoto-rgb"></div>
<div data-color="green-srgb-linear"></div>
<div data-color="green-display-p3"></div>
<div data-color="blue-rec2020"></div>
<div data-color="blue-srgb"></div>
CSS
[data-color="red-a98-rgb"] {
background-color: color(a98-rgb 1 0 0);
}
[data-color="red-prophoto-rgb"] {
background-color: color(prophoto-rgb 1 0 0);
}
[data-color="green-srgb-linear"] {
background-color: color(srgb-linear 0 1 0);
}
[data-color="green-display-p3"] {
background-color: color(display-p3 0 1 0);
}
[data-color="blue-rec2020"] {
background-color: color(rec2020 0 0 1);
}
[data-color="blue-srgb"] {
background-color: color(srgb 0 0 1);
}
結果
xyz 色空間で color() を使用
次の例は xyz
色空間を使用して色を指定する方法を示しています。
HTML
<div data-color="red"></div>
<div data-color="green"></div>
<div data-color="blue"></div>
CSS
[data-color="red"] {
background-color: color(xyz 45 20 0);
}
[data-color="green"] {
background-color: color(xyz-d50 0.3 80 0.3);
}
[data-color="blue"] {
background-color: color(xyz-d65 5 0 50);
}
結果
color-gamut メディアクエリーで color() を使用
この例では、color-gamut
メディアクエリーを使用して、具体的な色空間への対応を検出し、その色空間を使用して色を指定する方法を示します。
HTML
<div></div>
<div></div>
<div></div>
CSS
@media (color-gamut: p3) {
div {
background-color: color(display-p3 0 0 1);
}
}
@media (color-gamut: srgb) {
div:nth-child(2) {
background-color: color(srgb 0 0 1);
}
}
@media (color-gamut: rec2020) {
div:nth-child(3) {
background-color: color(rec2020 0 0 1);
}
}
結果
仕様書
Specification |
---|
CSS Color Module Level 5 # color-function |
CSS Color Module Level 5 # relative-color-function |
CSS Color Module Level 4 # color-function |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
<color>
データ型: すべての色記法の一覧color-gamut
メディア特性- Wide Gamut Color in CSS with Display-p3