好きな色を1つ選んでください — たとえば暖かみのあるコーラル。それを4通りの方法で表現してみましょう。
この4つはすべてまったく同じ色を表しています。互いに競合する規格ではなく、異なる用途に最適化された色の表現方法の違いにすぎません。混乱が生じるのは、どの場面でどの形式を使うべきかを知らないからです。
本ガイドでは、それぞれの形式を平易な言葉で解説します。何であるか、どう機能するか、いつ使うべきか、そしていつ使うべきではないか。デザイン、開発、印刷、マーケティングなど、色を扱うあらゆる仕事において、プロジェクトに合わない形式を選んでしまう失敗を防いでくれるはずです。
HEX（16進数）は、ハッシュ記号に続く6文字のコードです：#E8635A。2文字ずつのペアが、赤・緑・青の各チャンネルを16進表記（00 から FF）で表しています。
機能的には RGB とまったく同じで、書き方が違うだけです。#E8635A は rgb(232, 99, 90) と同じ色を指します。HEX は単に RGB 値をよりコンパクトに書く方法なのです。
color: #E8635A; は Web で色を指定する最も一般的な方法です。#E8635A80）を使う必要がありますが読みにくく、RGBA に切り替えるほうが現実的です。ランディングページの CSS を書いているとします。デザイナーからブランドカラーを記したスタイルガイドを受け取り、こう書きます：
:root { --primary: #E8635A; --secondary: #2D3748; --accent: #F6AD55; }
ここでは HEX が最適です。コンパクトで、読みやすく、どこでもサポートされています。
RGB は Red（赤）、Green（緑）、Blue（青）の頭文字で、画面が混ぜ合わせてあらゆる色を作り出す3つの光の色を指します。各チャンネルの値は 0 から 255 までです。rgb(232, 99, 90) は赤が232、緑が99、青が90という意味になります。
RGB はすべてのデジタルカラーの土台です。HEX は RGB を別の表記にしたものにすぎず、HSL は RGB を人間に分かりやすく変換したものです。画面上のすべては最終的に RGB 値としてピクセルへ送られます。
rgba(232, 99, 90, 0.5)。8桁 HEX より明快で、CSS、デザインツール、プログラミング言語で広くサポートされています。React Native アプリを開発していて、半透明のオーバーレイが必要になったとします：
backgroundColor: 'rgba(0, 0, 0, 0.6)'
アルファ付きの RGB が自然な選択です。直接的で読みやすく、レンダリングエンジンにとってネイティブな形式だからです。
HSL は Hue（色相）、Saturation（彩度）、Lightness（明度）の頭文字です：
hsl(4, 75%, 63%) は、赤寄りの色相（4°）で、非常に鮮やか（彩度75%）、やや明るめ（63%）という意味になります。
hsl(4, 75%, 73%)、暗い派生色は hsl(4, 75%, 43%)。Tailwind CSS でデザインシステムを構築していて、一貫したカラースケールが必要だとします：
--brand-50: hsl(4, 75%, 95%);
--brand-100: hsl(4, 75%, 90%);
--brand-200: hsl(4, 75%, 80%);
--brand-500: hsl(4, 75%, 63%);
--brand-700: hsl(4, 75%, 43%);
--brand-900: hsl(4, 75%, 25%);
同じ色相、同じ彩度、異なる明度。30秒で完璧なスケールの完成です。HEX で同じことをやってみてください。
CMYK は Cyan（シアン）、Magenta（マゼンタ）、Yellow（イエロー）、Key（黒）の頭文字です。白い紙にのせるインクの混合として色を表します。各値の範囲は 0% から 100%：0, 57, 61, 9 はシアン0%、マゼンタ57%、イエロー61%、黒9% という意味です。
光を足して色を作る RGB とは違い、CMYK は白い紙から差し引いていきます。インクが増えるほど色は暗くなります。これが減法混色モデルと呼ばれる理由です。
Illustrator でポスターをデザインしました。印刷所に送る前にドキュメントを CMYK カラーモードに変換し（File → Document Color Mode → CMYK Color）、色域外の警告を確認し、くすんだティールに転んでしまったエレクトリックブルーを調整します。最終的な PDF は印刷所の ICC プロファイルを付けて CMYK で保存します。
| 形式 | 最適な用途 | 範囲 | 透明度対応 | 人間にとっての読みやすさ | 印刷向き |
|---|---|---|---|---|---|
| HEX | Web、CSS、ブランドガイド | #000000 – #FFFFFF | 8桁のみ（#RRGGBBAA） | 中 | いいえ |
| RGB | 画面、アプリ、グラデーション | 各チャンネル 0–255 | はい（RGBA） | 中 | いいえ |
| HSL | デザインシステム、テーマ設計 | 0°–360°、0%–100%、0%–100% | はい（HSLA） | 高 | いいえ |
| CMYK | 印刷、パッケージ | 各チャンネル 0%–100% | いいえ | 低 | はい |
| あなたのプロジェクト | 使うべき形式 | 理由 |
|---|---|---|
| Web サイトの CSS | HEX または HSL | 手軽さなら HEX、テーマ対応のデザインシステムなら HSL |
| モバイルアプリ（iOS/Android） | RGB/RGBA | ネイティブのフレームワークが内部で RGB を使うため |
| Figma / Sketch のデザインファイル | HEX | デザインツールの標準的な入力形式 |
| デザインシステム／トークン | HSL | スケールや派生色の作成が HSL なら簡単 |
| SNS 用のグラフィック | HEX または RGB | デジタル専用。Canva も Photoshop も両方に対応 |
| 名刺／パンフレット | CMYK | 実際の印刷機に送るため |
| 製品パッケージ | CMYK ＋ Pantone | 印刷とブランドカラーの一貫性の両立 |
| メールテンプレート | HEX | メールクライアントが HEX を確実にサポートするため |
| スマート照明／LED | RGB | LED ハードウェアがネイティブに RGB を使うため |
| ブランドガイドライン文書 | 4つすべて | チームごとに必要な形式が異なるため |
できます — ただし注意点があります。
外出先で素早く変換したいなら、4つの形式を同時に表示できるスマホのカラーピッカーが最速のワークフローです。Color Picker Camera: HEX RGB はまさにそれを実現します。カメラを任意の色に向けるだけで、HEX、RGB、HSL、CMYK が並んで表示されます。どの値もワンタップでコピーできます。iPhone と Android で利用できます。
初心者が必ず通る典型的なミスです。Photoshop の RGB モードで鮮やかなポスターを作り、印刷所に送ったら、出力が色あせて見える — 特にグリーンとブルーで顕著です。印刷用に書き出す前には必ず CMYK に変換し、色域の警告を確認しましょう。
半透明のオーバーレイ、シャドウ、グラスモーフィズム効果が必要なデザインなら、RGBA か HSLA に切り替えてください。標準の6桁 HEX は不透明度の情報を持たず、8桁 HEX は読みにくいためほとんど使われません。
「#3B82F6 を20％明るく」には、変換と計算と再変換が必要です。HSL なら明度を20％上げるだけ。デザイントークン、テーマジェネレーター、モダンな CSS カスタムプロパティは、HSL のほうが格段にうまく機能します。
印刷用に CMYK で定義されたブランドカラーは、単純に HEX へ変換すると Web 上で違って見えます。正しいやり方は、画面上で印刷版に視覚的に近づけたうえで、デジタル用に別の HEX 値を定義することです。ブランドガイドラインには両方を記載すべきです。
色としての違いはなく、表記だけが異なります。HEX は同じ赤／緑／青の値を16進数で書いたものです。#FF0000 は rgb(255, 0, 0) と同一です。HEX は入力が短く済み、RGB はプログラムで変更しやすくアルファチャンネル（RGBA）にも対応します。
最終的な成果物が物理的な素材 — 紙、厚紙、布、プラスチック — に印刷される場合です。画面上で完結するなら RGB（または HEX／HSL）を使い、印刷するなら書き出しの段階で CMYK に切り替えます。
デザインシステム、テーマ設計、色の操作という点では、はい。素早い意思疎通やツールへのコピー＆ペーストという点では HEX のほうが実用的です。どちらも同じ色を表しますが、HSL は人間が色を捉える順序（色相 → 鮮やかさ → 明るさ）に沿って情報を整理しているのです。
できます。Color Picker Camera: HEX RGB はカメラや写真から色を取り込み、HEX、RGB、HSL、CMYK を同時に表示します。どの値もタップでコピー可能。実世界の色をそのまま扱えるカラーフォーマット計算機として、1回の撮影で4つの形式が手に入ります。
Web と素早い意思疎通には HEX。アプリ開発と透明度には RGB。デザインシステムと色の操作には HSL。印刷には CMYK。
1つを選ぶ必要はありません。必要なのは、場面ごとに正しいものを使うことです。そして形式を変換したいとき、あるいは現実の色を4形式まとめて取り込みたいときは、スマホのカラーピッカーが最も速い道具になります。
" }