color()

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

関数記法 color() により、他のほとんどの色関数が暗黙に処理する sRGB 色空間ではなく、特定の指定した色空間で色を指定することができます。

特定の色空間に対応しているかどうかは、CSS メディア特性の color-gamut で検出することができます。

CSS アットルール@color-profile では、 color() 関数で色を指定するために使用する色プロファイルを定義し、名前を付けるために使用することができます。

構文

css

color(display-p3 1 0.5 0);
color(display-p3 1 0.5 0 / .5);

関数記法: color( [ [<ident> | <dashed-ident>]? [ <number-percentage>+ | <string> ] [ / <alpha-value> ]? ] )

[<ident> | <dashed-ident>] はオプションで、色空間を示す <ident> または <dashed-ident> (en-US) で す。もしこれが <ident> であれば、定義済みの色空間の 1 つ(display-p3 など)を示します。もしこれが <dashed-ident> であれば、@color-profile ルールで定義された、カスタム色空間であることを意味します。

[ <number-percentage>+ | <string> ] は、色空間が受け取る引数の値を提供する 1 つ以上の <number> または <percentage> 値、または色空間が定義する色の名前を与える <string> です。

/ <alpha-value> (アルファ)は <number>0 から 1 の間、または <percentage>1 から 100% (完全に不透明)の間で、この色の透明度(またはアルファチャネル)を表します。

仕様書

Specification
CSS Color Module Level 4
# color-function

ブラウザーの互換性

BCD tables only load in the browser

関連情報