RGB vs CMYK — 画面と印刷でカラーモデルをどう切り替えるか
Web デザイン / 商用印刷 で RGB と CMYK のどちらを使うべきかを、加法色 vs 減法色 / 色域 / 印刷工程 / 入稿データ形式 で比較。RGB を CMYK 変換するときに色がくすむ理由も解説します。
どの軸で選ぶか — 4 つの判断基準
RGB と CMYK は単に「Web 用と印刷用」という対比ではなく、色を作る原理そのものが逆向き です。判断軸は 4 つあります。色の作り方 (加法混色 / 減法混色) は画面と紙で再現できる色の集合 (色域) を根本的に変えます。色域 (gamut) は鮮やかな緑や蛍光ピンクといった彩度の高い色がどこまで表現できるかを決めます。出力工程 は最終的にユーザーが目にする媒体 — モニタ / プロジェクタ / オフセット印刷機 / オフィスプリンタ — のどれかに応じて要求が変わります。データ仕様 はファイル形式 (PNG / TIFF / PDF/X-1a) や ICC プロファイルの扱いに直結します。
「印刷だから CMYK で作る」「Web だから RGB」と短絡せず、配布先の工程が何を要求するかを先に確認するのが事故を減らすコツです。たとえば名刺やパッケージは CMYK 入稿が前提ですが、社内文書をオフィスプリンタに出すだけなら RGB のままで構いません (プリンタ側が内部で変換します)。
RGB と CMYK の比較表
| 項目 | RGB | CMYK |
|---|---|---|
| 色の作り方 | 加法混色 (光を足す) | 減法混色 (インクで光を吸収) |
| チャンネル | R / G / B (各 0-255 など) | C / M / Y + K (墨版、各 0-100%) |
| 代表色空間 | sRGB / Display P3 / Adobe RGB | Japan Color 2001 Coated / U.S. Web Coated (SWOP) |
| 色域 (sRGB 比) | 100% (sRGB) / 約 125% (Display P3) | 約 70-80% (sRGB の内側にほぼ収まる) |
| 媒体 | モニタ / スマホ / カメラ / スキャナ | 紙 / 布 / プラスチック (オフセット・オンデマンド印刷) |
| 主なファイル形式 | JPG / PNG / WebP / AVIF | TIFF / EPS / PDF (PDF/X-1a が入稿標準) |
| 標準化 | sRGB は 1996 (IEC 61966-2-1) | プロセスインクは 19 世紀末、ICC プロファイルは 1993〜 |
| 編集ソフトの扱い | 既定 | Photoshop の Image > Mode > CMYK Color で明示変換 |
色域差は実務で一番効いてくる項目です。鮮やかな緑・蛍光ピンク・純青 は RGB (とくに Display P3) なら出せますが、CMYK では色域外に落ちて「くすんだ近似色」に丸められます。これが「画面ではきれいだったのに印刷したらくすんだ」の正体で、変換は不可逆 (色域外の色は元に戻せない) です。
ユースケース別の推奨
Web / アプリ / 動画 / SNS 投稿: RGB (sRGB)。Display P3 対応端末が増えていますが、配信時は sRGB をマスターにして P3 はオプション扱いが安全です。スマホやブラウザの色管理が sRGB を前提にしているケースがまだ多いためです。
商業印刷 (チラシ・名刺・パッケージ・本): CMYK で入稿。印刷会社は ICC プロファイル (日本ではほぼ Japan Color 2001 Coated、北米は U.S. Web Coated v2) を指定してくるので、PDF/X-1a 形式で書き出すのが標準ワークフローです。元データを RGB のまま入稿すると印刷会社側で機械的に変換され、意図しない色ずれの原因になります。
オフィスプリンタ / 家庭用インクジェット: RGB のままで OK。ドライバが内部で CMYK + ライトシアン / ライトマゼンタなど 6-8 色に変換するため、ユーザー側で CMYK 化する必要はありません。むしろ手動 CMYK 変換した方が色域が狭まって損です。
名刺・社外配布物のロゴ: RGB 用と CMYK 用の 2 種類を用意。Web サイトの hero やメール署名は RGB、印刷物は CMYK、と用途別に持ち分けるのがブランドガイドライン上の定石です。
ブラウザで色を扱う / 落とし穴
色変換やコントラスト確認はブラウザ内で完結させられます。color-converter は HEX / RGB / HSL / OKLCH を相互変換し、CMYK 近似値も出力します (sRGB → CMYK は ICC プロファイルなしでは概算なので、入稿用ではなく見当をつける用と割り切ってください)。Web 配色の検証には color-contrast-checker を使うと WCAG の AA / AAA 基準を満たすかが即座に分かります。
実務での落とし穴は 3 つあります。1 つ目は RGB → CMYK 変換は破壊的 で、色域外の色は近似色に丸められ復元できないこと。マスターは必ず RGB で保持し、CMYK は出力時に派生させます。2 つ目は モニタのキャリブレーション で、未キャリブレーションのモニタで色を選ぶと印刷物との差が顕著になります。色校正が必要な案件は印刷会社の本紙校正を必ず取りましょう。3 つ目は PDF 入稿時の透明オブジェクトと特色 (DIC / PANTONE) で、これらは PDF/X-1a で自動的にプロセスカラーに変換されるため、特色指定が必要な場合は PDF/X-4 や別途指示書での運用になります。実装は GitHub で公開しており、DevTools の Network タブで色データが外部に送信されないことを確認できます。