CSS/@color-profile

@color-profile

@color-profileルールは、CSSでカラープロファイルを定義するために使用されます。特定のカラープロファイルを定義して名前を付け、そのプロファイルをスタイルシート内で参照することで、より高度な色管理を実現できます。

書式

@color-profileルールの基本的な書式は以下の通りです：

@color-profile <名前> {
  src: url("<プロファイルファイル>");
  rendering-intent: <値>;
}

• <名前>: カラープロファイルの名前。後で参照するための識別子となります。
• src: プロファイルファイルのURL。ICCファイルなどのカラープロファイルを指定します。
• rendering-intent: レンダリングの目的（オプション）。以下の値が指定できます：
  • auto
  • perceptual
  • relative-colorimetric
  • saturation
  • absolute-colorimetric

使用例

以下は、@color-profileの具体的な使用例です：

@color-profile my-profile {
  src: url("sRGB.icc");
  rendering-intent: relative-colorimetric;
}

body {
  color: color(my-profile 0.8 0.6 0.4);
}

この例では、my-profileという名前のカラープロファイルを定義し、それを利用して特定の色を指定しています。

属性の説明

• src

  プロファイルファイルの場所を指定します。通常、.iccや.icm形式のファイルを使用します。

• rendering-intent

  色空間をどのように変換するかを指定します。指定しない場合はautoがデフォルトとなります。

注意事項

• このルールは、高度な色管理が必要な場面で使用されます。一般的なプロジェクトでは必須ではありません。
• ブラウザの対応状況によっては、サポートされていない場合があります。
• 定義されたカラープロファイルを使用するには、color()関数などで参照する必要があります。

関連情報

• W3C仕様: @color-profile

@color-profileは、ウェブで正確な色再現が必要な場合に特に有用です。たとえば、写真編集アプリケーションや印刷物向けのデザインで役立ちます。