【CSS Modules】oklab()関数の使い方
oklab()関数の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
oklab()関数は、CSSで色を定義するために使用される関数です。この関数は、人間の知覚に合わせた色空間であるOklab色空間に基づいて色を指定します。Oklabは、Webにおける色の表現力を高め、より正確で直感的な色指定を可能にすることを目的として導入されました。
Oklab色空間は、輝度 (Lightness)、a軸 (緑から赤)、b軸 (青から黄) の3つの要素で色を表現します。これにより、従来のRGBやHSLといった色空間に比べて、人間が感じる色の違いに、より忠実な色の調整や変化を実現できます。例えば、グラデーションを作成する際に、より自然で滑らかな色の移り変わりを表現したり、特定の色相で明るさを変更しても、色の印象が大きく変わってしまう問題を軽減したりすることが可能です。
引数としては、まず「L」で輝度を0%から100%の範囲で指定します。次に「a」と「b」で色相と彩度を表現する値を指定します。「a」は緑色 (−) から赤色 (+) の範囲、「b」は青色 (−) から黄色 (+) の範囲で値を設定します。これらの値は通常、浮動小数点数で指定します。さらに、オプションとして透明度を示す「アルファ値」を0から1の間、またはパーセンテージで指定できます。
この関数を使用することで、デザイナーや開発者は、より広範囲の色を表現できるようになり、ウェブコンテンツにおける色の再現性とアクセシビリティの向上に貢献します。
公式リファレンス: oklab()
構文(syntax)
1oklab(80% 0.1 0.2 / 0.7)
引数(parameters)
L, a, b, alpha = 1
- L: float: 明度 (0.0 ～ 1.0)
- a: float: 赤-緑軸の色成分 (-0.4 ～ 0.4)
- b: float: 黄-青軸の色成分 (-0.4 ～ 0.4)
- alpha: float = 1: アルファ値 (透明度) (0.0 ～ 1.0)
戻り値(return)
<color>
oklab() 関数は、OKLab色空間で定義された色を返します。これは、知覚的に均一な色空間であり、色の明るさ、色相、彩度をより直感的に調整できます。