CSS Reference

@color-profile

カラープロファイルを定義し名前を付ける

@color-profile 規則は color() 関数や color-mix() 関数で色を指定するために用いられるカラープロファイルを定義し、名前を付けます。

印刷物に忠実な色の再現などが必要な場合など、あらかじめカラープロファイルを定義しておくことで、別のところで記述した color() 関数や color-mix() 関数からそのカラープロファイルを利用できるようになります。

詳細説明

@color-profile 規則の基本的な構文は下記のようになります。

@color-profile [<dashed-ident> | device-cmyk] { <declaration-list> }

具体的な記述例は下記の通りです。

@color-profile --swop5c {
  src: url('https://example.org/SWOP2006_Coated5v2.icc');
  rendering-intent: relative-colorimetric;
}

<dashed-ident>

<dashed-ident> は、CSS 内で利用することになるカラープロファイルの名前を指定します。--sampleName のように指定し、このとき大文字と小文字は区別されます。

もし、device-cmyk キーワードを与えた場合、カラープロファイルは device-cmyk() 関数に指定した色を解決するために利用されます。

<declaration-list>

<declaration-list> は宣言リストのことです。@color-profile 規則では、下記の指定が可能ます。

src

カラープロファイルの URL を指定します。

rendering-intent

カラープロファイルが複数のレンダリングインテントを含む場合、rendering-intent で指定できます。指定可能な値は下記の通りです。

relative-colorimetric 相対的な色彩保持（初期値）
absolute-colorimetric 絶対的な色彩保持
perceptual 知覚重視
saturation 彩度重視

components

カラープロファイルで定義される色空間は、いくつかの成分で成り立ちます。例えば、CMYK プロファイルは、［ c, m, y, k ］と命名される4つの成分を利用するかもしれませんが、components で指定することで、カラープロファイル内で利用される成分を、記述した順序で命名できます。

例えば下記の記述は、cyan、magenta、yellow、black と命名される4つの成分がカラープロファイルに含まれることを宣言します。

components: cyan, magenta, yellow, black

あるいは、簡素化された名前を定義することもできます。

components: c,m,y,k

@color-profileのサンプルソース

@color-profile --fogra39 {
  src: url('https://example.org/Coated_Fogra39L_VIGC_300.icc');
}

/* 定義したカラープロファイルを color() 関数で使用する */
.header {
  background-color: color(--fogra39 0% 70% 20% 0%);
}
@color-profile --fogra39 {
  src: url('https://example.org/Coated_Fogra39L_VIGC_300.icc');
  rendering-intent: relative-colorimetric;
}

/* 定義したカラープロファイルを color() 関数で使用する */
.header {
  background-color: color(--fogra39 0% 70% 20% 0%);
}

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

関連する@-規則

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome