【CSS Modules】color()関数の使い方

color()関数は、CSSで色を定義する際に使用される関数です。この関数は、従来の色の指定方法（例: #rrggbb、rgb()、hsl()など）と比較して、より高度で幅広い色空間を利用して色を指定する能力を提供します。

具体的には、color()関数を用いることで、色の表現形式である「色空間」を明示的に指定できます。例えば、一般的なsRGB色空間だけでなく、より広い色域を持つdisplay-p3やrec2020といった色空間を用いて、デザイナーの意図により忠実で正確な色を再現することが可能です。これにより、特に広色域に対応したディスプレイを使用しているユーザーに対して、より鮮やかで豊かな色のWebコンテンツを提供できます。

color()関数の基本的な書式は、まず使用したい色空間の名前（例: sRGB、display-p3など）を指定し、その後にその色空間における色の各要素（例えば、赤、緑、青の成分、または明度、彩度など）を数値で記述します。オプションとして、色の透明度を表すアルファ値も追加で指定できます。

この関数は、最新のCSSカラーモジュールで導入されており、Webサイトやアプリケーションにおいて、デバイス間で一貫性のある、より高度な色表現を実現するための重要なツールです。Webデザインの忠実性を高め、将来的なWebの視覚表現の標準となることが期待されています。

Copy
1color(srgb 1 0 0 / 0.5)

color-space: <custom-ident>, component1: <number>, component2: <number>, component3: <number>, alpha: <number> | <percentage> = 1

• color-space: <custom-ident>: 色空間を指定します。例えば "rgb", "hsl", "lch" などが指定できます。
• component1: <number>: 色空間の1番目の色成分の値を指定します。
• component2: <number>: 色空間の2番目の色成分の値を指定します。
• component3: <number>: 色空間の3番目の色成分の値を指定します。
• alpha: <number> | <percentage> = 1: 色の透明度を指定します。0（完全に透明）から1（完全に不透明）までの数値、またはパーセンテージで指定します。デフォルト値は1（完全に不透明）です。

<color>

color()関数は、指定された色表現に基づいてCSSの色値を生成し、<color>型として返します。