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

oklch()関数は、CSSにおいて色を定義するために使用される関数です。この関数は、Oklch色空間を用いて色を指定します。Oklchは、知覚的に均等なOklab色空間を円筒座標で表現したもので、人間が色を認識する方法に非常に近い形で色を扱えるという特徴があります。これにより、色の明るさ、彩度、色相をより直感的に調整し、デザイナーや開発者が意図する色を予測可能な結果で再現することが可能です。

oklch()関数は、主に3つの値とオプションのアルファ値（透明度）を受け取ります。最初の値は「L（Lightness）」で、色の明度、つまりどれくらい明るいかを0%から100%の範囲で指定します。2番目の値は「C（Chroma）」で、色の彩度、つまりどれくらい鮮やかかを0から0.4（またはそれ以上）の範囲で指定します。値が大きいほど鮮やかな色になります。3番目の値は「H（Hue）」で、色の色相、つまり色合い（赤、緑、青など）を角度（0degから360deg）で指定します。さらに、オプションとして色の透明度を0から1、またはパーセンテージで指定するアルファ値を追加できます。

この関数を使用する主な利点は、sRGBなどの従来の色空間では表現できないような、より広範囲で鮮やかな色も扱える点です。また、知覚的に均等であるため、複数の色の間で明度や彩度を調整する際に、見た目の変化が予測しやすくなります。例えば、明るさだけを変更しても色相や彩度が不自然に変化することが少なく、自然で美しいグラデーションや一貫性のあるカラーパレットを簡単に作成できます。現代のWebデザインにおいて、より正確で柔軟な色表現が求められる場面で非常に有効なツールとして活用されています。

Copy
1.example {
2  color: oklch(70% 0.15 240deg / 0.8);
3}

lightness chroma hue [/ alpha]

• lightness: 色の明るさを指定します。0 (黒) から 1 (白) の範囲で指定します。
• chroma: 色の鮮やかさを指定します。0 (無彩色) から無限大まで指定できますが、通常は限られた範囲内で使用されます。
• hue: 色相を指定します。0度から360度の範囲で指定します。
• alpha (オプション): 色の透明度を指定します。0 (完全透明) から 1 (完全不透明) の範囲で指定します。

oklch() 関数は、OKLCH色空間で表現された色を返します。これは、明度、彩度、色相の3つの要素で色を指定できるCSSの色関数です。