【CSS Modules】lab()関数の使い方
lab()関数の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
lab()関数は、CSSにおいてCIE Lab色空間を使用して色を指定するために使用される関数です。この関数は、人間の目の知覚に近い形で色を表現することを目的とした、デバイス非依存の知覚的に均一な色空間であるLab色空間に基づいています。
具体的には、Lab*色空間は、輝度（Lightness）を表すL成分と、2つの色相成分であるa（緑-赤軸）およびb（青-黄軸）の3つの軸で色を定義します。lab()関数は、これらのL、a、bの各値を引数として受け取ります。L値は0%から100%までの輝度を指定し、a値とb値は色の方向と彩度を表し、通常は負の値から正の値の範囲で指定します。また、オプションでアルファ値（透明度）も指定可能です。
この色空間を用いることで、従来のsRGBなどの色空間では表現が難しかった、より広範囲の色（広色域）を正確に表現できます。特に、色の知覚的な均一性を持つため、異なる色の間の変化をより自然に見せたり、特定の色を正確に調整したりする際に非常に有用です。デザインの一貫性を高めたり、アクセシビリティの観点から色のコントラストを正確に管理したりする場面で活用されます。ブラウザの互換性については、最新の主要ブラウザで広くサポートが進んでいます。
公式リファレンス: lab()
構文(syntax)
1lab(70% 30 40);
引数(parameters)
lightness, a-component, b-component, alpha-component = 1
- lightness: number: 色の明度を指定する数値 (0% から 100% または 0 から 1)。
- a-component: number: 色の赤-緑軸成分を指定する数値 (-128 から 127 または -1 から 1)。
- b-component: number: 色の青-黄軸成分を指定する数値 (-128 から 127 または -1 から 1)。
- alpha-component: number = 1: 色の透明度を指定する数値 (0 から 1)。省略時は 1 (不透明) になります。
戻り値(return)
<color>
lab()関数は、CIELAB色空間で指定された色を返します。この色空間は、人間の視覚が知覚する色の違いをより均等に表現するように設計されています。