【CSS Modules】hwb()関数の使い方
hwb()関数の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
hwb()関数はCSSにおいてHWB (Hue, Whiteness, Blackness) カラーモデルを使用して色を定義するために実行する関数です。この関数は、色相、白さ、黒さという3つの主要な値を指定することで色を表現します。HWBカラーモデルは、人間がより直感的に色を選択しやすいように設計されており、Webページの要素に色を適用する際に利用されます。
第一引数の「Hue（色相）」は、色の種類を示す角度で、通常0から360の範囲の数値で指定します。例えば、0度または360度は赤、120度は緑、240度は青といった具体的な色に対応します。角度の単位はdegを付けることもできますが、単位なしで指定することも可能です。
第二引数の「Whiteness（白さ）」は、0%から100%のパーセンテージで指定します。これは、純粋な色にどれだけ白を混ぜるかを示しており、値が大きいほど色が明るく、薄い色調になります。
第三引数の「Blackness（黒さ）」も0%から100%のパーセンテージで指定します。これは、純粋な色にどれだけ黒を混ぜるかを示しており、値が大きいほど色が暗く、濃い色調になります。
さらに、オプションとして透明度（アルファ値）を指定することも可能です。これは色の後にスラッシュ（/）を挟んで記述し、0（完全に透明）から1（完全に不透明）までの数値、または0%から100%のパーセンテージで設定します。
hwb()関数は、background-colorやcolorなどのCSSプロパティの値として使用され、現代のWebデザインにおいて柔軟な色の表現を可能にする強力なツールです。
構文(syntax)
1hwb( <hue> <whiteness> <blackness> [ / <alpha> ]? )
引数(parameters)
<hue> <whiteness> <blackness> [ / <alpha> ]
<hue>: 色相を指定する数値。0〜360の範囲で指定します。<whiteness>: 白の度合いを指定するパーセンテージ。0%〜100%の範囲で指定します。<blackness>: 黒の度合いを指定するパーセンテージ。0%〜100%の範囲で指定します。[ / <alpha> ]: アルファ値（透明度）を指定する数値。0.0〜1.0の範囲で指定します。この引数は省略可能です。
戻り値(return)
hwb() 関数は、Hue（色相）、Whiteness（白さ）、Blackness（黒さ）の3つの値に基づいて色を定義し、その色を表す<color>値を返します。