HEX vs RGB vs HSL vs CMYK：どのカラーフォーマットをいつ使うべきか

同じ色、4つの異なる言語

このコーラルを見てください。まったく同じ色ですが、4つの異なる書き方ができます：

各フォーマットにはそれぞれの目的があります。間違ったものを選んでもプロジェクトは壊れませんが、正しいものを選ぶと時間を節約し、変換エラーを避け、すべてのプラットフォームでブランドの一貫性を保てます。

このガイドでは、それぞれをいつ使うべきかを実例と早見表で正確に説明します。

HEX：Webの標準

とは： 赤、緑、青の値を表し6桁の16進数コード。常に # で始まります。例：#FF6F61 は赤55、緑111、靗97を意味します。

HEXを使うべきとき

• CSSスタイルシート — ほとんどのWeb開発者が使用し、期待するデフォルトフォーマットです。
• デザインツール — Figma、Sketch、CanvaはカラーピッカーでHEXを目立つように表示します。
• ブランドガイドライン — ほとんどのブランドガイドラインはコピーペーストが簡単なのHEXで色を記載しています。
• コミュニケーション — Slackやメールで正確な色を共有する場合、HEXは世界共通で理解されます。

HEXを使うべきでないとき

• 透明度が必要なとき — HEXはネイティブにアルファをサポートしません。8桁HEX（#FF6F6180）は使えますが、ツール間でサポートが不安定です。
• プログラマティックな色操作 — HEX色を明るくしたり暗くしたりするには、まず変換が必要です。
• 印刷デザイン — 印刷はCMYKを使用します。HEXを印刷所に送ると色の不一致が保証されます。

実例：CSS変数

:root {
  --brand-primary: #FF6F61;
  --brand-dark: #CC5850;
  --brand-light: #FF9A91;
  --text-on-primary: #FFFFFF;
}

.button-primary {
  background-color: var(--brand-primary);
  color: var(--text-on-primary);
}

RGB：スクリーンのカラーモデル

とは： 赤、緑、青を表す3つの数値（0–255）— スクリーンが発する実際の光の色です。例：rgb(255, 111, 97)。

RGBを使うべきとき

• 透明度（RGBA） — rgba(255, 111, 97, 0.5) で不透明度を正確に制御できます。CSSで半透明色を使う最も広くサポートされている方法です。
• アプリ開発 — Swift、Kotlin、Flutterは内部的にRGB値を使用します。RGBで作業すると不要な変換を避けられます。
• LED照明とIoT — LEDストリップやスマート電球はRGB値を期待します。
• カラー数学 — 2色を混ぜたり補間したりするのはRGBで簡単な算術です。

RGBを使うべきでないとき

• 印刷デザイン — RGB値はインクの混合に直接対応しません。印刷所に送る前に必ずCMYKに変換してください。
• 彩度や明度の調整 — RGBで彩度を変えるには複雑な式が必要です。HSLの方がはるかに簡単です。

実例：React Native

const Colors = {
  coral: 'rgba(255, 111, 97, 1.0)',
  coralFaded: 'rgba(255, 111, 97, 0.5)',
  coralOverlay: 'rgba(255, 111, 97, 0.15)',
};

<View style={{ backgroundColor: Colors.coralOverlay }}>
  <Text style={{ color: Colors.coral }}>Hello</Text>
</View>

HSL：デザイナーのフォーマット

とは： 3つの値 — 色相（0–360°、カラーホイール上の位置）、彩度（0–100%%、グレーから鮮やかまで）、明度（0–100%%、黒から白まで）。例：hsl(5, 100%%, 69%%)。

HSLを使うべきとき

• デザインシステム — 色相と彩度を固定し、明度だけを変えることで完全なカラースケールを作成できます。
• ダークモード — ダークバリアントの生成は明度を下げるだけ。推測も式も不要です。
• プログラマティックな色生成 — 等間隍の12色が必要？彩度と明度を同じに保ち、色相を30°ずつ増やします。
• アクセシビリティ — 明度値を直接読めるので、コントラストの確認がより直感的です。

HSLを使うべきでないとき

• チーム間コミュニケーション — ほとんどの人は色相/彩度/明度で考えません。会話ではHEXやRGBの方が明確です。
• 印刷ワークフロー — HSLには印刷の直接的な等価物がありません。まずCMYKに変換してください。

実例：Tailwind CSSでのカラースケール

/* tailwind.config.js */
module.exports = {
  theme: {
    extend: {
      colors: {
        coral: {
          50:  'hsl(5, 100%%, 95%%)',
          100: 'hsl(5, 100%%, 90%%)',
          200: 'hsl(5, 100%%, 82%%)',
          300: 'hsl(5, 100%%, 75%%)',
          400: 'hsl(5, 100%%, 69%%)', /* base */
          500: 'hsl(5, 85%%, 58%%)',
          600: 'hsl(5, 70%%, 48%%)',
          700: 'hsl(5, 65%%, 38%%)',
          800: 'hsl(5, 60%%, 28%%)',
          900: 'hsl(5, 55%%, 18%%)',
        }
      }
    }
  }
}

CMYK：印刷のフォーマット

とは： 4つの値 — シアン、マゼンタ、イエロー、ブラック（Key）。RGB（光を加算）とは異なり、CMYKは減算混色— 白い紙から光を吸収するインクの量を記述します。例：0, 56, 62, 0。

CMYKを使うべきとき

• 印刷物すべて — 名刺、ポスター、パッケージ、雑誌。印刷所を通るならCMYKでなければなりません。
• InDesignと印刷ワークフロー — 色域外の色による予想外を避けるため、最初からCMYKでデザインしましょう。
• 色校正 — 画面上の校正はプリンター出力をシミュレートしますが、ソース色がすでにCMYKである場合のみ機能します。

CMYKを使うべきでないとき

• スクリーン — モニターは光（RGB）を使用します。CMYK値は変換が必要で、変換は常に近似です。
• 写真編集 — 編集中はRGBで作業してください。印刷する場合のみ、最後のステップとしてCMYKに変換します。

実例：Illustratorからのエクスポート

/* Illustrator: File > Document Color Mode > CMYK */
/* Export settings for print-ready PDF: */

Color mode:      CMYK
Profile:         U.S. Web Coated (SWOP) v2  /* or your printer's ICC */
Bleed:           3 mm (all sides)
Marks:           Trim marks ON
Flatten:         Transparent objects

クイックリファレンス表

チートシート：プロジェクトタイプ → カラーフォーマット

変換：知っておくべきこと

• HEX ↔ RGB — ロスレス変換。同じカラーモデルの異なる表現です。#FF6F61 は正確に rgb(255, 111, 97) です。
• RGB ↔ HSL — ロスレス変換。同じ色のセットの異なる数学的表現です。
• RGB → CMYK — ロッシー変換。CMYKの色域はRGBより小さいです。スクリーン上の鮮やかな色は印刷ではくすんだ色になることがよくあります。
• CMYK → RGB — 結果は使用するICCプロファイルによります。同じCMYK値でもプロファイルが異なると見た目が変わることがあります。

アプリ Color Picker Camera は4つのフォーマットを同時に表示します。現実世界の任意の色に向けて、HEX、RGB、HSL、CMYKを瞬時に取得できます。手動変換は不要です。

よくある間違い（とその避け方）

1. RGBを印刷所に送る

プリンターはインクを混ぜますが、光ではありません。RGBファイルを送ると、印刷所のソフトがCMYK変換を推測し、画面で見えるものと一致することはほとんどありません。印刷は常に最初からCMYKでデザインしましょう。

2. HEXを透明度に使う

8桁HEX（#FF6F6180）は存在しますが、多くのツールは認識しません。信頼性のある透明度には rgba() または hsla() を使用してください。

3. HEXだけでデザインシステムを構築する

HEXコードから明るいトーンと暗いトーンを生成するには試行錯誤が必要です。HSLは明度を直接変更でき、カラースケールを予測可能で一貫性のあるものにします。

4. CMYK → HEX変換で同じ色を期待する

CMYKはRGB/HEXより色域が小さいです。戻し変換すると色は近似され、くすんだ色や微妙に変化した色になる可能性があります。必ず視覚的に確認してください。

よくある質問

HEXとRGBの違いは？

利用可能な色において違いはありません。どちらも同じ1670万色をカバーします。HEXはRGB値を16進数表記で短く書いたものです。#FF6F61 = rgb(255, 111, 97)。唯一の実用的な違いは透明度のサポートです：RGBにRGBAが組み込まれているのに対し、8桁HEXはサポートが限定的です。

CMYKはいつ使うべき？

デザインが物理的に印刷されるときはいつでも：名刺、パンフレット、ポスター、パッケージ。画面でのみ表示する場合はHEX、RGB、またはHSLを使いましょう。

HSLはRGBより優れている？

優れているのではなく、デザイナーにとって理解しやすいのです。カラースキームの作成、ダークモードテーマの生成、アクセシビリティのコントラスト確認にはHSLがより直感的です。フレームワークがRGB値を期待するアプリ開発ではRGBを使いましょう。

4つのカラーフォーマットを同時に表示するアプリは？

はい。Color Picker Camera では、スマートフォンを現実世界の任意の色に向けて、HEX、RGB、HSL、CMYKの値を1つの画面で瞬時に確認できます。iOSとAndroidで利用可能です。

まとめ

Webには HEX。アプリとスクリーンには RGB。デザインシステムとテーマには HSL。印刷には CMYK。

現実世界の色を扱うなら — 塗装された壁、布のサンプル、看板のロゴ — Color Picker Camera が現実世界のカラー計算機として機能します。向けて、キャプチャして、4つのフォーマットを瞬時に取得。

iOS版をダウンロード Android版をダウンロード