【CSS Modules】device-cmyk()関数の使い方

device-cmyk()関数は、CSSにおいて、デバイスに依存したCMYK（シアン、マゼンタ、イエロー、キー＝黒）色空間で色を定義するために使用される関数です。この関数は、Webコンテンツの色彩表現を拡張し、特に印刷や特定の出力デバイスにおける色の再現性を高めることを目的としています。

CMYKは、印刷分野で広く用いられる減法混色モデルで、光の三原色であるRGBとは異なり、インクの重ね合わせによって色を表現します。シアン、マゼンタ、イエローの三原色に加えて、より深い黒を表現するためのキー（黒）が用いられます。

device-cmyk()関数を使用することで、ウェブページが最終的に印刷される際や、CMYK色空間をネイティブにサポートする特定のディスプレイ、プリンターなどの出力デバイスで表示される際に、より正確で意図通りの色を再現することが可能になります。これは、従来のRGBベースの色指定では表現が難しかった、印刷特有の色域（ガモット）に対応するために重要です。

この関数は、シアン、マゼンタ、イエロー、キーの各成分の値をパーセンテージ（例: 0%から100%）または数値（例: 0から1）で指定します。さらに、オプションとしてアルファ値（透明度）も指定できます。たとえば、device-cmyk(0% 100% 100% 0%)は純粋なマゼンタを表し、device-cmyk(0 1 1 0 / 0.5)は半透明のマゼンタを指定します。

現在のところ、Webブラウザにおけるdevice-cmyk()関数のネイティブなサポートはまだ発展途上にあります。多くの環境では、内部的に指定されたCMYK値をRGB値に変換して表示する可能性があります。そのため、この関数は主に、将来的なCSS標準の進化を見据えたり、印刷用のスタイルシート（@media printルール内）で利用されたりすることが想定されます。これにより、デジタル表示と物理的な印刷物との間での色の整合性を高めることが期待されます。

Copy
1element {
2  property: device-cmyk(C M Y K);
3}

C <number> | <percentage>, M <number> | <percentage>, Y <number> | <percentage>, K <number> | <percentage>, [ / A <alpha-value> = 1 ]

• C: <number> | <percentage>: シアン（Cyan）の色の成分値を指定します。数値またはパーセンテージで指定できます。
• M: <number> | <percentage>: マゼンタ（Magenta）の色の成分値を指定します。数値またはパーセンテージで指定できます。
• Y: <number> | <percentage>: イエロー（Yellow）の色の成分値を指定します。数値またはパーセンテージで指定できます。
• K: <number> | <percentage>: キープレート（Black）の色の成分値を指定します。数値またはパーセンテージで指定できます。
• A: <alpha-value> = 1: オプション。色の不透明度を指定します。0（完全に透明）から1（完全に不透明）までの値で指定します。省略された場合は1（完全に不透明）が適用されます。

device-cmyk()関数は、デバイスCMYKカラーモデルで色を指定した<color>値を返します。