カラーピッカー：HEX・RGB・HSL カラー変換ツール

HEX（#RRGGBB）は16進表記で、コンパクトでCSS標準。RGB（r, g, b）は赤/緑/青の強度0-255で、モニターが実際に表示するもの。HSL（色相, 彩度, 明度）は人間の色知覚に対応し、色相は何色か、彩度は鮮やかさ、明度は明暗を表す。3つとも同じsRGB色空間を異なる座標系で記述。

静的な色：HEXが最も一般的でコンパクト。透明度が必要な色：rgb(r g b / alpha)またはhsl(h s l / alpha)。プログラム的にシェードを生成するデザインシステム：HSL（明度/彩度の調整が直感的）。モダンCSSはcolor-mix()でのブレンドもサポート。

スクリーンのキャリブレーション、カラープロファイル、色域の違い。sRGBの#FF0000は広色域P3ディスプレイと安いTNパネルで異なって見える。Web作業ではsRGB（HEX/RGBが表すもの）でデザインし、全デバイスでの正確な色再現は不可能と受け入れる。

HSLに変換してL（明度）値を調整。明度50%が「純粋な」色；100%に向けて増やすと明るく（白に近づく）、0%に向けて減らすと暗く（黒に近づく）。HとSを同じに保って色の特徴を維持。Tailwindはこの方法で50-950のシェードスケールを生成。

透明度（alpha）は要素を透明にし、背後のものが透けて見える。明るい色（HSL明度が高い）は完全に不透明だが白が混ざっている。白い背景では似て見えるが、色付きや画像の背景では大きく異なる。オーバーレイには透明度、背景色には明るい色を使う。