HEX、RGB、HSL、CMYK の違いとは？ Web、印刷、UI デザイン、SNS でどのカラー形式を使うべきかを実践的な例とともに解説します。
好きな色を1つ選んでください — たとえば暖かみのあるコーラル。それを4通りの方法で表現してみましょう。
この4つはすべてまったく同じ色を表しています。互いに競合する規格ではなく、異なる用途に最適化された色の
本ガイドでは、それぞれの形式を平易な言葉で解説します。何であるか、どう機能するか、いつ使うべきか、そしていつ使うべきではないか。デザイン、開発、印刷、マーケティングなど、色を扱うあらゆる仕事において、プロジェクトに合わない形式を選んでしまう失敗を防いでくれるはずです。
HEX（16進数）は、ハッシュ記号に続く6文字のコードです：
機能的には RGB とまったく同じで、書き方が違うだけです。
ランディングページの CSS を書いているとします。デザイナーからブランドカラーを記したスタイルガイドを受け取り、こう書きます：
ここでは HEX が最適です。コンパクトで、読みやすく、どこでもサポートされています。
RGB は Red（赤）、Green（緑）、Blue（青）の頭文字で、画面が混ぜ合わせてあらゆる色を作り出す3つの光の色を指します。各チャンネルの値は 0 から 255 までです。
RGB はすべてのデジタルカラーの土台です。HEX は RGB を別の表記にしたものにすぎず、HSL は RGB を人間に分かりやすく変換したものです。画面上のすべては最終的に RGB 値としてピクセルへ送られます。
React Native アプリを開発していて、半透明のオーバーレイが必要になったとします：
アルファ付きの RGB が自然な選択です。直接的で読みやすく、レンダリングエンジンにとってネイティブな形式だからです。
HSL は Hue（色相）、Saturation（彩度）、Lightness（明度）の頭文字です：
Tailwind CSS でデザインシステムを構築していて、一貫したカラースケールが必要だとします：
同じ色相、同じ彩度、異なる明度。30秒で完璧なスケールの完成です。HEX で同じことをやってみてください。
CMYK は Cyan（シアン）、Magenta（マゼンタ）、Yellow（イエロー）、Key（黒）の頭文字です。白い紙にのせるインクの混合として色を表します。各値の範囲は 0% から 100%：
光を足して色を作る RGB とは違い、CMYK は白い紙から差し引いていきます。インクが増えるほど色は暗くなります。これが
Illustrator でポスターをデザインしました。印刷所に送る前にドキュメントを CMYK カラーモードに変換し（
| 形式 | 最適な用途 | 範囲 | 透明度対応 | 人間にとっての読みやすさ | 印刷向き |
|---|---|---|---|---|---|
| Web、CSS、ブランドガイド | #000000 – #FFFFFF | 8桁のみ（#RRGGBBAA） | 中 | いいえ | |
| 画面、アプリ、グラデーション | 各チャンネル 0–255 | はい（RGBA） | 中 | いいえ | |
| デザインシステム、テーマ設計 | 0°–360°、0%–100%、0%–100% | はい（HSLA） | 高 | いいえ | |
| 印刷、パッケージ | 各チャンネル 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つの形式を同時に表示できるスマホのカラーピッカーが最速のワークフローです。
初心者が必ず通る典型的なミスです。Photoshop の RGB モードで鮮やかなポスターを作り、印刷所に送ったら、出力が色あせて見える — 特にグリーンとブルーで顕著です。印刷用に書き出す前には必ず CMYK に変換し、色域の警告を確認しましょう。
半透明のオーバーレイ、シャドウ、グラスモーフィズム効果が必要なデザインなら、RGBA か HSLA に切り替えてください。標準の6桁 HEX は不透明度の情報を持たず、8桁 HEX は読みにくいためほとんど使われません。
「#3B82F6 を20％明るく」には、変換と計算と再変換が必要です。HSL なら明度を20％上げるだけ。デザイントークン、テーマジェネレーター、モダンな CSS カスタムプロパティは、HSL のほうが格段にうまく機能します。
印刷用に CMYK で定義されたブランドカラーは、単純に HEX へ変換すると Web 上で違って見えます。正しいやり方は、画面上で印刷版に視覚的に近づけたうえで、デジタル用に別の HEX 値を定義することです。ブランドガイドラインには両方を記載すべきです。
色としての違いはなく、表記だけが異なります。HEX は同じ赤／緑／青の値を16進数で書いたものです。
最終的な成果物が物理的な素材 — 紙、厚紙、布、プラスチック — に印刷される場合です。画面上で完結するなら RGB（または HEX／HSL）を使い、印刷するなら書き出しの段階で CMYK に切り替えます。
デザインシステム、テーマ設計、色の操作という点では、はい。素早い意思疎通やツールへのコピー＆ペーストという点では HEX のほうが実用的です。どちらも同じ色を表しますが、HSL は人間が色を捉える順序（色相 → 鮮やかさ → 明るさ）に沿って情報を整理しているのです。
できます。
Web と素早い意思疎通には
1つを選ぶ必要はありません。必要なのは、場面ごとに正しいものを使うことです。そして形式を変換したいとき、あるいは現実の色を4形式まとめて取り込みたいときは、スマホのカラーピッカーが最も速い道具になります。