HEX・RGB・HSL：ウェブのカラーフォーマットを選ぶ

これらの記法の色はすべて、違う服を着た同じ sRGB カラーです。HEX は 16 進で書いた RGB で、#4F46E5 は赤・緑・青の各チャンネルを 2 桁の 16 進数で表したものです。rgb(79, 70, 229) は同じ 3 チャンネルを 10 進で述べ、hsl() は同じピクセルを色相環上の位置として記述します。

sRGB 内での 3 者間の変換はロスレスです。#4F46E5、rgb(79, 70, 229)、等価な hsl() 値は正確に往復するため、記法の切り替えは表現の選択であって色の変更ではありません。

• HEXHEX はコンパクトで安定しており、デザインツールとコード間のコピー＆ペーストに適しています。パレットやスタイルガイドが hex で公開されるのはそのためです。
• RGBRGB は 0 から 255 の 3 つのチャンネル強度として読め、スクリーンや画像フォーマットが実際にピクセルを保存する方式と一致します。
• HSLHSL は色相・彩度・輝度として読め、人が色を語る感覚に近く、意図どおりに調整するのがはるかに簡単です。

透明度はどの記法にも追加できます。rgb() と hsl() は第 4 引数——rgba(79, 70, 229, 0.5)——を取り、HEX には 8 桁形式 #4F46E580 があり、最後の 2 桁が 00 から FF のアルファです。

• 0–1 または 00–FFアルファは関数記法では 0 から 1、hex では 00 から FF の範囲です。0.5 と 80 は同じ半透明値です。
• 面上でテスト半透明のオーバーレイは下にあるものと掛け合わさるため、半透明トークンは載り得るすべての面でテストが必要です。
• 関連するトークンデザインシステムが同じ色相の不透明版と半透明版を出すとき、8 桁の hex ひとつで両者の関係が目に見えて保てます。

RGB チャンネルを直接編集するのは算数ですが、意図の編集は HSL の方が簡単です。tint は同じ色相で輝度を上げたもの、shade は輝度を下げたもの、くすんだ変種は彩度を下げたもの——3 チャンネルが一緒に漂う代わりに、ダイヤル 1 つの操作が 3 回です。

カラーバリエーション生成はそのランプを機械的に構築します。hex カラーを 1 つ渡すと黒方向と白方向に混合し、等間隔の 3 から 20 段を hex 値で返します——ホバー状態もボーダーの色調も、手当たり次第の推測ではなく同じソースカラーから来ます。

• tint と shadetint と shade：色相と彩度を固定し、輝度を白寄りから黒寄りまで掃引すれば、背景・状態・テキストに使える実用的なランプが得られます。
• 彩度の状態くすみ・鮮やか変種は彩度ダイヤルだけから生まれ、ホバーや無効状態が同じ色系に留まるのはこの仕組みです。
• 色相回転色相の回転は関連色を生みます。アナログ（類似色）の隣人は約 30 度以内、補色は 180 度向かいです。

カラーハーモニーは色相環上の幾何学です。補色のペアは向かい合い、トライアドは環を 3 等分し、アナログは寄り集まります。HSL なら計算が見えます——数字を 1 つ変えればスキーム全体が動きます。

配色パレット作成はまさにそのモデルを適用します。6 桁のシード hex から、類似・補色・スプリット補色・トライアド・テトラッド・モノクロームの 6 つの古典スキームで 5 色パレットを生成し、各色見本と黒・白テキストのコントラストを 3・4.5・7 の WCAG 比率目標で検査します。

結果は CSS カスタムプロパティと JSON でエクスポートでき、パレットをスタイルシートやトークンファイルにそのまま落とせます。エンジンは決定論的なので、同じシードとスキームは常に同じ 5 色を再現します——スクリーンショットではなくシードを共有しましょう。

現代の CSS は旧来の関数形式を統合しました。空白区切りのチャンネルと任意のスラッシュアルファ——rgb(79 70 229 / 0.5)——が、カンマだらけの rgba() に取って代わります。レベル 4 仕様はさらに hwb()・lab()・oklch() などの記法を追加し、より広い色域と知覚的に均一なランプを可能にします。

どの記法に標準化しても、2 色の混合はチャンネルごとの演算です。カラーミキサーは 2 色を選んだ重みでブレンドし、結果を RGBA と hex で報告します。ブランドカラー 2 つの中間色を目測ではなく計算で求められます。

同じツールが記法の橋渡しにもなります。一方の形式で色を入れ、別の形式で結果を読むことで、仕様書が hex でスタイルシートが rgb() の場合でも算数を正直に保てます。

• 新構文空白区切りチャンネルとスラッシュアルファは現在のすべてのブラウザで有効です。カンマ形式もレガシーエイリアスとして引き続きサポートされます。
• OKLCH の理由oklch() は HSL の実際の欠陥を直します。HSL では等しい輝度ステップが色相ごとに同じ明るさに見えませんが、OKLCH は知覚輝度を一貫させます。
• 意図的に採用新しい記法は問題を解決する場所——一貫したランプ、広色域ディスプレイ——で採用し、ツールや習慣がすでに機能している場所では hex や rgb() を維持しましょう。

パレットが理論から始まることはめったにありません。スクリーンショット、ロゴ、写真から始まります。ソースから正確なピクセル値を読み取る方が、色相環と見比べる目測より確実です。

画像カラーピッカーはタブ内で PNG・JPEG・WebP を開き、クリックしたピクセルの正確な RGBA 値を報告します——レガシーアセットからブランドカラーを復元したり、アンチエイリアスのエッジに実際何が含まれるか確認したりするのに便利です。

すべてローカルで動作します。画像はブラウザでデコードされ、アップロードされません——素材が未公開デザインのときに重要です。取り出した値をバリエーションやハーモニーのツールに持ち込めば、素材からパレットまでのチェーン全体がデバイス上に留まります。