CSS Reference

color()

特定の色空間を指定した上で、色を指定する

color() 関数は、特定の色空間を指定した上で、色を指定することができる CSS 関数です。

color() 関数では、CSS Color Module Level 4 で定義済みのカラープロファイル（例えば、display-p3、prophoto-rgb、rec2020 など）、もしくは、@color-profile 規則で定義したカラープロファイルを指定した上で、色を指定することができます。

また、from キーワードを使用して基となる色を指定することで、その色に対する相対的な値で色を指定することもできます。

color()のサンプルソース

/* display-p3 カラープロファイルを指定し、絶対的記述で色を指定した例 */
:root {
  --base:  color(display-p3 0.7 0.5 0.1);
}
/* from キーワードで --base の色を指定し、xyz-d65 色空間を指定した相対的記述で色を指定した例 */
:root {
  --base:  color(display-p3 0.7 0.5 0.1);
  --dark:  color(from var(--base) xyz-d65 calc(x/2) calc(y/2) calc(z/2));
}
/* @color-profile であらかじめ定義したカラープロファイルを指定する例 */
@color-profile --swopc {
  src: url('http://example.org/swop-coated.icc');
}
@color-profile --indigo {
  src: url('http://example.org/indigo-seven.icc');
}

.example01 {
  color: color(--swopc 0.0134 0.8078 0.7451 0.3019);
}
.example02 {
  color: color(--indigo 0.0941 0.6274 0.3372 0.1647 0 0.0706 0.1216);
}
/* from キーワードで --base の色を指定し、xyz-d65 色空間を指定した相対的記述で :hover 時に少し暗い色（輝度が基の色の半分となる色）になるよう指定した例 */
:root {
  --base: orange;
}

.example {
  background-color: var(--base);
}
.example:hover {
  background-color: color(
    from var(--base) xyz-d65 calc(x/2) calc(y/2) calc(z/2)
  );
}

主要ブラウザの対応

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

関連するCSS関数

仕様書

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

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

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

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

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