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

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

HEX と rgb() は同じ 8 ビット sRGB チャンネルを正確に表せます。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関数記法の alpha は 0～1、8 桁 HEX の末尾は 00～FF です。80 は 128/255、約 0.502 を意味し、0.5 に近いものの同じ値ではありません。
• 面上でテスト半透明の色は alpha に応じて背後の色と合成されます。実際に置くすべての背景で確認してください。
• 関連するトークンデザインシステムが同じ色相の不透明版と半透明版を出すとき、8 桁の hex ひとつで両者の関係が目に見えて保てます。

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

色階生成ツールは一つの HEX 色から黒と白に向けて重み付けして混合し、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() などの記法を追加し、より広い色域と知覚的に均一なランプを可能にします。

Color Mixer は対応する HEX 色を入力とし、alpha を考慮した補間または source-over 合成を行い、HEX と RGBA で結果を示します。二つのブランド色を比較する前に、方式と比率を選んでください。

入力欄は HEX テキストのみ対応し、任意の CSS 色式は受け付けません。rgb() や hsl() は対応する HEX 形式に変換してから使ってください。

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

パレットはスクリーンショット、ロゴ、写真から始まることも多いものです。ブラウザーでデコードした画素を採取すれば、その表示に対して再現できる値が得られます。ただし元ファイルの生のチャンネル値と同一とは限りません。

Image Color Picker はタブ内で PNG、JPEG、WebP を開き、ブラウザーでデコードした画像から Canvas が採取した画素の RGBA 値を示します。古い素材やアンチエイリアスの縁を調べる助けになりますが、値はデコードや色変換の影響を受ける場合があります。

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