HEX、RGB、HSL

各形式は異なるメンタルモデルを強調します。高レベルの数学を知ると、サイレントな丸めバグを防げます。

HEX

#RRGGBB は 16 進で 3 バイトチャンネルをパックします。

• #2563EB → 赤 0x25 (37)、緑 0x63 (99)、青 0xEB (235)

短縮 #RGB はニブルを複製：#26E → #2266EE。

HEX はデザイン引き渡しと Git diff でコンパクトです。コンバーターなしで「10% 暗く」編集するのは不便です。

RGB

rgb(37, 99, 235) はチャンネルを直接命名。0–255 をリストするデザイン仕様書と照合しやすいです。

関数表記は alpha もサポート：

rgba(37, 99, 235, 0.85)

モダン CSS はスペース区切りを好みます。

rgb(37 99 235 / 0.85)

HSL

hsl(hue, saturation, lightness) はデザイナー言語に合います。

• Hue — 色相環の角度（0–360）
• Saturation — 鮮やか vs グレー
• Lightness — 明 vs 暗

例：hsl(221, 83%, 53%) は #2563EB と一致。

HSL は hover/active 状態の生成に役立ちます。色相を保ち、lightness をわずかに下げる。

注意： HSL の「lightness」は知覚的均一ではありません。50% lightness の 2 色相は不均等に見えることがあります。テキストペアにはコントラストツールを使ってください。

丸めとドリフト

HEX → HSL → HEX の変換は同一に往復しないことがあります。デザイントークンでは 1 つの正規保存形式（モダンシステムでは HEX または OKLCH）を選び、他はビルド時に導出します。

どれをいつ使うか

形式	向いている用途
HEX	トークン、Figma エクスポート、コンパクト保存
RGB	Android/iOS アセット仕様、画像パイプライン
HSL	テーマ調整、プログラム的パレット

要点

コンバーターでビュー間を移動しますが、トークンごとに1 つの権威値を保存してください。alpha が同じトークンに属するか別 opacity スケールかを文書化します。