#FF6347、rgb(255,99,71)、hsl(9,100%,64%) — これらはすべて「トマトレッド」という同じ色を表しながら、まったく異なる方法で記述されています。フロントエンドエンジニアでも UI デザイナーでも、あるいは背景色を変えたいだけの方でも、必ずこれらの表記に出会います。本記事では各色モデルの設計思想と変換ロジック、実務でどれを使うべきかを丁寧に解説します。
1. カラーコードとは？なぜ複数の色モデルが必要なのか
人間の目が知覚できる可視光の波長は約 380 nm（紫色側）〜 700 nm（赤色側）です。コンピュータはこの連続した光のスペクトルを扱うために、明確な数値言語を必要とします。色モデルによってアプローチが異なり、光の物理特性を模倣するもの（RGB）、印刷インクの現実を考慮するもの（CMYK）、人間の視覚的感知に合わせるもの（HSL）があります。どのモデルが「正しい」かではなく、何のメディアに向けてデザインするかによって選択が変わります。
大原則：画面表示には RGB / HEX / HSL、印刷には CMYK、色の調整には HSL、CSS への貼り付けには HEX。
2. RGB：光の加法混色、あらゆる画面の基礎
RGB は赤（Red）・緑（Green）・青（Blue）の 3 チャンネルで構成されます。各チャンネルは 0〜255（8 bit = 256 段階）の値を持ち、組み合わせで 256³ = 16,777,216 色を表現できます。RGB は加法混色：3 つの光をすべて重ねると白、すべてゼロで黒になります。これは絵の具の混色（混ぜるほど暗くなる）とは逆ですが、光の物理的な挙動に忠実です。
CSS では rgb(255, 99, 71) と書きます。透明度は rgba(255, 99, 71, 0.5)（Alpha 0〜1）、または現代的な表記 rgb(255 99 71 / 50%) でも指定できます。LCD・OLED・Micro-LED を問わず、ほぼすべての画面技術はドライバレベルで RGB 3 チャンネルを制御しており、RGB はデジタル表示の最も根本的な色言語です。
3. HEX：デベロッパー御用達の16進数カラーコード
HEX カラーコードは RGB を16進数で表現したものです。#RRGGBB という形式で各 2 桁が 1 チャンネルを表わし、0〜255 を16進数（0–9 + A–F）で記述します。#FF6347 の場合：
FF（赤）= 10 進数 25563（緑）= 10 進数 9947（青）= 10 進数 71
各チャンネルの 2 桁が同じ文字の場合は 3 桁に省略できます：#F06 は #FF0066、#FFF は #FFFFFF（純白）と同義です。CSS では 8 桁 HEX も使え、末尾 2 桁がアルファ値（透明度）を表します。HEX は簡潔で、Figma・Sketch をはじめほぼすべてのデザインツールがワンクリックでコピーできるため、フロントエンド開発の標準フォーマットです。
4. HSL と HSB：人間の感覚に寄り添う色記述
HSL は Hue（色相）・Saturation（彩度）・Lightness（明度）の頭文字です：
- 色相（Hue）：0〜360° のカラーホイール上の角度。0° は赤、120° は緑、240° は青。
- 彩度（Saturation）：0% はグレースケール、100% が最も鮮やかな純色。
- 明度（Lightness）：0% は純黒、50% が最も自然な発色、100% は純白。
HSL の最大の強みは直感性です。「このオレンジを少し暗くしたい」なら Lightness を下げるだけ。RGB では 3 つの値を同時に調整しなければならず、狙い通りの色を出すのは難しいです。CSS は HSL を直接サポートしています：hsl(9, 100%, 64%) でトマトレッドを指定できます。
混同されやすい HSB（HSV とも呼ばれます）：HSB の 100% Brightness は「最も鮮やかな純色」ですが、HSL の 100% Lightness は「純白」になります。Photoshop・Illustrator などの Adobe ツールは伝統的に HSB を採用しており、Figma および CSS は HSL を使用します。
5. CMYK：印刷の世界の4色減法混色
CMYK はシアン（Cyan）・マゼンタ（Magenta）・イエロー（Yellow）・ブラック（Key）の頭文字です。インクは減法混色：特定の波長の光を吸収し、混ぜれば混ぜるほど反射光が減少して暗くなります。CMY 3 色の混合で理論上は黒になりますが実際には濁った茶色になるため、独立したブラック K チャンネルを追加することで真の黒を表現し、大面積の黒印刷時のインク使用量も節約しています。
CMYK は印刷物設計の標準モデルですが、画面表示には適用できません。RGB は CMYK より色域が広く、鮮やかな蛍光系の色は印刷で再現できないことがあります。スクリーン上でデザインした後に印刷会社へ入稿する場合は、必ず色域変換と校正を行ってください。
6. 各色モデルの使い分け一覧
| モデル | 最適な用途 | 主な強み | 主な制限 |
|---|---|---|---|
| RGB | 画面表示・画像処理・プログラム計算 | 物理的現実に最も近い・精密 | 感覚的な調整が難しい |
| HEX | フロントエンド・CSS・デザインデータ | 簡潔・コピーしやすい・業界標準 | 値から色を直感的に読み取れない |
| HSL | UI 調色・CSS テーマ・パレット生成 | 人間の感覚に最も近い | 印刷との対応に変換が必要 |
| CMYK | 印刷物・平面グラフィックデザイン | 実際の印刷プロセスに対応 | 画面表示に不適・色域が狭い |
7. 色変換の計算原理
HEX → RGB：各2桁の16進数を10進数に変換するだけです。#1A2B3C の場合：R = 0x1A = 26、G = 0x2B = 43、B = 0x3C = 60。
RGB → HSL：R・G・B を 255 で割り [0,1] に正規化 → max・min を求める → L = (max + min) / 2 → S = delta / (1 - |2L - 1|)（ただし delta = max - min ≠ 0）→ 最大値のチャンネルに応じて H（0〜360°）を計算。実務では色変換ツールにお任せするのが現実的です。
8. WCAG コントラスト比とアクセシビリティ設計
WCAG（Web Content Accessibility Guidelines）は、テキストと背景の色のコントラスト比に関する最低基準を規定しています：
- AA（通常テキスト）：コントラスト比 ≥ 4.5:1
- AA（大テキスト、≥ 18pt または太字 14pt）：コントラスト比 ≥ 3:1
- AAA（最高基準）：コントラスト比 ≥ 7:1
計算式は (L1 + 0.05) / (L2 + 0.05)（L1 ≥ L2 はそれぞれの色の相対輝度）。純黒（L=0）と純白（L=1）のコントラスト比は 21:1 で最大値。男性の約 8% が何らかの色覚異常を持っており、WCAG AA 達成は現代 UI デザインのベースラインです。
9. 実践的な配色戦略
HSL でカラーパレットを構築する：ブランドカラーの色相（H）を固定し、彩度と明度を変えることで、テキスト用ダーク・メイン・背景用ライトの 3 段階を素早く用意できます。たとえばメインカラー hsl(211, 80%, 45%) から：ダーク hsl(211, 80%, 25%)・ライト hsl(211, 80%, 92%)。
カラーホイールの関係性を活用：補色配色（180° 対称）はコントラストが強く強調要素に向く；類似色配色（30〜60° 差）は調和があり背景や補助色に適する；トライアド配色（120° 三等分）は活気があってカラフルな UI に向く。そして、色だけで情報を伝えないこと — 色覚異常のユーザーが区別できるよう、アイコンやテキストラベルを必ず併用してください。
10. モダン CSS の新しいカラー構文
CSS Color Level 4 では新構文が追加されました：color(display-p3 0.5 0.2 0.8)（広色域 Display P3 対応）、oklch(60% 0.18 255)（知覚的に均一な色空間、デザイナーコミュニティで注目急上昇）、color-mix(in hsl, #FF6347 40%, #1E90FF)（CSS 上で 2 色を直接ミックス）。
まとめ
カラーコードは単なる文字列ではなく、光学・知覚心理学・印刷工学・デジタルアクセシビリティにわたる知識の結晶です。RGB の加法混色の本質を理解し、HSL の直感的なロジックをマスターし、WCAG コントラスト比の意味を把握することで、色選びが感覚頼みから根拠のある判断へと変わります。カラーコード変換ツールはただの電卓ではなく、あなたのデザイン言語を正確に翻訳するパートナーです。