--- title: "HEX・RGB・HSL・CMYK：どのカラー形式をいつ使うべきか" author: "Lubor Šimůnek" date: 2026-03-21 modified: 2026-08-26 language: "ja" url: "https://appstoryo.com/ja/blog/hex-vs-rgb-vs-hsl-vs-cmyk-which-color-format-to-use" publisher: "AppStoryo (lapnito.cz s.r.o.)" license: "CC BY 4.0" license_url: "https://creativecommons.org/licenses/by/4.0/" category: "デザイン" keywords: ["デザイン", "article", "AppStoryo"] --- # HEX・RGB・HSL・CMYK：どのカラー形式をいつ使うべきか > 4つのカラー形式には、それぞれ4つの用途があります。本ガイドでは HEX、RGB、HSL、CMYK をいつ使うべきかを、Web デザイン・印刷・SNS・アプリ開発の実例とともに解説します。 ## 同じ色、4つの異なる言語 好きな色を1つ選んでください — たとえば暖かみのあるコーラル。それを4通りの方法で表現してみましょう。 - **HEX:** #E8635A - **RGB:** rgb(232, 99, 90) - **HSL:** hsl(4, 75%, 63%) - **CMYK:** 0, 57, 61, 9 この4つはすべてまったく同じ色を表しています。互いに競合する規格ではなく、異なる用途に最適化された色の*表現方法*の違いにすぎません。混乱が生じるのは、どの場面でどの形式を使うべきかを知らないからです。 本ガイドでは、それぞれの形式を平易な言葉で解説します。何であるか、どう機能するか、いつ使うべきか、そしていつ使うべきではないか。デザイン、開発、印刷、マーケティングなど、色を扱うあらゆる仕事において、プロジェクトに合わない形式を選んでしまう失敗を防いでくれるはずです。 ## HEX：Web の標準 ### HEX とは HEX（16進数）は、ハッシュ記号に続く6文字のコードです：`#E8635A`。2文字ずつのペアが、赤・緑・青の各チャンネルを16進表記（00 から FF）で表しています。 機能的には RGB とまったく同じで、書き方が違うだけです。`#E8635A` は `rgb(232, 99, 90)` と同じ色を指します。HEX は単に RGB 値をよりコンパクトに書く方法なのです。 ### HEX を使うべき場面 - **CSS と Web 開発** — HEX は CSS における標準の色表記です。あらゆるブラウザが理解できます。`color: #E8635A;` は Web で色を指定する最も一般的な方法です。 - **デザインツール** — Figma、Sketch、Adobe XD、Canva はいずれも HEX を主要な入力形式として採用しています。デザイナーが「このブルーは #3B82F6 だよ」と言えば、誰にでも通じます。 - **ブランドガイドライン** — デジタル向けのブランドガイドはほぼ必ず HEX 値を掲載します。短く、曖昧さがなく、コピー＆ペーストが容易だからです。 - **素早い意思疎通** — Slack のメッセージでは「#333 を使って」のほうが「rgb(51, 51, 51) を使って」より速く伝わります。 ### HEX を使うべきでない場面 - **透明度が必要なとき** — 標準の6桁 HEX はアルファ（不透明度）に対応していません。8桁 HEX（`#E8635A80`）を使う必要がありますが読みにくく、RGBA に切り替えるほうが現実的です。 - **プログラム的に色を調整したいとき** — 「これを20％明るく」という計算を HEX のまま頭の中で行うのはほぼ不可能です。この用途には HSL がはるかに適しています。 - **印刷用の制作** — 印刷機が HEX を使うことは決してありません。 ### 実例 ランディングページの CSS を書いているとします。デザイナーからブランドカラーを記したスタイルガイドを受け取り、こう書きます： `:root { --primary: #E8635A; --secondary: #2D3748; --accent: #F6AD55; }` ここでは HEX が最適です。コンパクトで、読みやすく、どこでもサポートされています。 ## RGB：画面のカラーモデル ### RGB とは RGB は Red（赤）、Green（緑）、Blue（青）の頭文字で、画面が混ぜ合わせてあらゆる色を作り出す3つの光の色を指します。各チャンネルの値は 0 から 255 までです。`rgb(232, 99, 90)` は赤が232、緑が99、青が90という意味になります。 RGB はすべてのデジタルカラーの土台です。HEX は RGB を別の表記にしたものにすぎず、HSL は RGB を人間に分かりやすく変換したものです。画面上のすべては最終的に RGB 値としてピクセルへ送られます。 ### RGB を使うべき場面 - **透明度が必要なとき** — RGBA はアルファチャンネルを追加します：不透明度50％なら `rgba(232, 99, 90, 0.5)`。8桁 HEX より明快で、CSS、デザインツール、プログラミング言語で広くサポートされています。 - **プログラミングとアプリ開発** — Swift、Kotlin、Flutter、React Native といったアプリ用フレームワークは、内部的に RGB/RGBA 値を扱うのが一般的です。 - **LED と照明** — スマート照明（Philips Hue や LED テープライト）は RGB 値を使います。物理的な照明演出を設計するなら RGB がネイティブ形式です。 - **色の計算** — 色を混ぜる、グラデーションを補間する、プログラムで色を生成するといった処理は RGB なら素直に書けます。 ### RGB を使うべきでない場面 - **印刷** — 画面は光を放ち（加法混色）、紙は光を反射します（減法混色）。RGB では印刷結果を正確に表現できません。 - **明度や彩度の調整** — 「この色の彩度を30％下げて」という操作は RGB では直感的ではありません。まず HSL に変換する必要があります。 ### 実例 React Native アプリを開発していて、半透明のオーバーレイが必要になったとします： `backgroundColor: 'rgba(0, 0, 0, 0.6)'` アルファ付きの RGB が自然な選択です。直接的で読みやすく、レンダリングエンジンにとってネイティブな形式だからです。 ## HSL：デザイナーのための形式 ### HSL とは HSL は Hue（色相）、Saturation（彩度）、Lightness（明度）の頭文字です： - **色相**（0°〜360°）— 色そのもの、色相環上の位置です。0° が赤、120° が緑、240° が青。 - **彩度**（0%〜100%）— 色の鮮やかさ。0% はグレー、100% はその色相の最も純粋な状態です。 - **明度**（0%〜100%）— 明るさ・暗さ。0% は黒、100% は白、50% がその色の「本来」の姿です。 `hsl(4, 75%, 63%)` は、赤寄りの色相（4°）で、非常に鮮やか（彩度75%）、やや明るめ（63%）という意味になります。 ### HSL を使うべき場面 - **デザインシステムとテーマ設計** — 一貫したカラースケールを作るには HSL が最適です。プライマリカラーの10段階のシェードが欲しいですか？色相はそのままに、明度を10%から95%まで変化させるだけです。くすんだ版が欲しければ彩度を下げます。HEX や RGB で直感的に行うのはほぼ不可能です。 - **ダークモード／ライトモード** — テーマの切り替えは明度と彩度の調整であり、HSL のパラメータに直結します。Tailwind CSS、Radix Colors、そして多くの現代的なデザインシステムは HSL を基礎にしています。 - **プログラムによる色の生成** — 1つのベースカラーからホバー状態、無効状態、背景、ボーダーを作るのは HSL なら簡単です：明るい派生色は `hsl(4, 75%, 73%)`、暗い派生色は `hsl(4, 75%, 43%)`。 - **アクセシビリティ** — 明度を直接目で見て調整できるため、コントラスト比のチェックがより直感的になります。 ### HSL を使うべきでない場面 - **チーム間のやり取り** — 多くの人は角度とパーセンテージで色を考えません。デザインの受け渡しでは「ボタンは hsl(4, 75%, 63%)」より「ボタンは #E8635A」のほうが伝わります。 - **印刷** — RGB と同様、HSL も画面用のカラーモデルです。 ### 実例 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：印刷のための形式 ### CMYK とは CMYK は Cyan（シアン）、Magenta（マゼンタ）、Yellow（イエロー）、Key（黒）の頭文字です。白い紙にのせるインクの混合として色を表します。各値の範囲は 0% から 100%：`0, 57, 61, 9` はシアン0%、マゼンタ57%、イエロー61%、黒9% という意味です。 光を足して色を作る RGB とは違い、CMYK は白い紙から差し引いていきます。インクが増えるほど色は暗くなります。これが**減法混色**モデルと呼ばれる理由です。 ### CMYK を使うべき場面 - **印刷物のデザイン** — 名刺、パンフレット、パッケージ、ポスター、雑誌。商業印刷所に入稿するファイルはすべて CMYK カラーモードであるべきです。 - **InDesign や Illustrator での印刷入稿準備** — これらのツールでは CMYK モードで作業し、紙の上で色がどう見えるか（画面より必ず彩度が落ちます）をプレビューできます。 - **色校正** — デザインの色が CMYK で再現可能かを確認します。鮮烈な RGB カラーの一部（特にネオングリーンやエレクトリックブルー）は CMYK では物理的に印刷不可能で、「色域外」となります。 ### CMYK を使うべきでない場面 - **画面上のあらゆるもの** — Web サイト、アプリ、SNS、プレゼン資料、メール。画面は RGB を使います。Web サイトに CMYK を指定するのは、道案内を海里で伝えるようなものです。確かに距離ではありますが、目的地には役立ちません。 - **写真編集** — 編集は 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つすべて | チームごとに必要な形式が異なるため | ## 相互に変換できるのか？ できます — ただし注意点があります。 - **HEX ↔ RGB** — 可逆です。同じデータを別の表記で書いているだけです。 - **RGB ↔ HSL** — 可逆です。数学的な変換にすぎません。 - **RGB → CMYK** — 不可逆です。鮮やかなブルー、ネオン、明るいグリーンなど、一部の RGB カラーは CMYK では再現できません。変換すると印刷可能な最も近い色に置き換えられ、多くの場合くすんで見えます。 - **CMYK → RGB** — 技術的には可能ですが、結果は使用する ICC プロファイルに左右されます。同じ CMYK 値でも、変換ツールが違えば少し異なる RGB 値になることがあります。 外出先で素早く変換したいなら、4つの形式を同時に表示できるスマホのカラーピッカーが最速のワークフローです。**[Color Picker Camera: HEX RGB](https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237)** はまさにそれを実現します。カメラを任意の色に向けるだけで、HEX、RGB、HSL、CMYK が並んで表示されます。どの値もワンタップでコピーできます。[iPhone](https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) と [Android](https://play.google.com/store/apps/details?id=com.tomas.color_picker) で利用できます。 ## よくある間違い ### 1. 印刷物を RGB で作ってしまう 初心者が必ず通る典型的なミスです。Photoshop の RGB モードで鮮やかなポスターを作り、印刷所に送ったら、出力が色あせて見える — 特にグリーンとブルーで顕著です。印刷用に書き出す前には必ず CMYK に変換し、色域の警告を確認しましょう。 ### 2. 透明度が必要なのに HEX を使う 半透明のオーバーレイ、シャドウ、グラスモーフィズム効果が必要なデザインなら、RGBA か HSLA に切り替えてください。標準の6桁 HEX は不透明度の情報を持たず、8桁 HEX は読みにくいためほとんど使われません。 ### 3. デザインシステムを HEX で構築する 「#3B82F6 を20％明るく」には、変換と計算と再変換が必要です。HSL なら明度を20％上げるだけ。デザイントークン、テーマジェネレーター、モダンな CSS カスタムプロパティは、HSL のほうが格段にうまく機能します。 ### 4. CMYK を HEX に変換して同じ色になると期待する 印刷用に CMYK で定義されたブランドカラーは、単純に HEX へ変換すると Web 上で違って見えます。正しいやり方は、画面上で印刷版に視覚的に近づけたうえで、デジタル用に別の HEX 値を定義することです。ブランドガイドラインには両方を記載すべきです。 ## よくある質問 ### HEX と RGB の違いは何ですか？ 色としての違いはなく、表記だけが異なります。HEX は同じ赤／緑／青の値を16進数で書いたものです。`#FF0000` は `rgb(255, 0, 0)` と同一です。HEX は入力が短く済み、RGB はプログラムで変更しやすくアルファチャンネル（RGBA）にも対応します。 ### RGB ではなく CMYK を使うべきなのはいつですか？ 最終的な成果物が物理的な素材 — 紙、厚紙、布、プラスチック — に印刷される場合です。画面上で完結するなら RGB（または HEX／HSL）を使い、印刷するなら書き出しの段階で CMYK に切り替えます。 ### HSL は HEX より優れていますか？ デザインシステム、テーマ設計、色の操作という点では、はい。素早い意思疎通やツールへのコピー＆ペーストという点では HEX のほうが実用的です。どちらも同じ色を表しますが、HSL は人間が色を捉える順序（色相 → 鮮やかさ → 明るさ）に沿って情報を整理しているのです。 ### スマホで4つの形式を一度に表示できますか？ できます。[Color Picker Camera: HEX RGB](https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) はカメラや写真から色を取り込み、HEX、RGB、HSL、CMYK を同時に表示します。どの値もタップでコピー可能。実世界の色をそのまま扱えるカラーフォーマット計算機として、1回の撮影で4つの形式が手に入ります。 ## 結論 Web と素早い意思疎通には **HEX**。アプリ開発と透明度には **RGB**。デザインシステムと色の操作には **HSL**。印刷には **CMYK**。 1つを選ぶ必要はありません。必要なのは、場面ごとに正しいものを使うことです。そして形式を変換したいとき、あるいは現実の色を4形式まとめて取り込みたいときは、スマホのカラーピッカーが最も速い道具になります。 [Color Picker Camera を iPhone でダウンロード](https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) | [Android 版はこちら](https://play.google.com/store/apps/details?id=com.tomas.color_picker) --- Source: License: [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/) Cite as: Lubor Šimůnek (2026). HEX・RGB・HSL・CMYK：どのカラー形式をいつ使うべきか. AppStoryo, lapnito.cz s.r.o. https://appstoryo.com/ja/blog/hex-vs-rgb-vs-hsl-vs-cmyk-which-color-format-to-use