HEX・RGB・CMYKの違いと変換方法｜WebデザインとDTP印刷で使うカラーコードを解説

Webデザインとグラフィックデザインでは、色の表現方法が異なります。「画面で見た色と印刷物の色が違う」というトラブルの多くは、HEX・RGB・CMYKそれぞれの特性を理解していないことが原因です。

カラーモードの基本

色を表現する方法は大きく2つあります。

加法混色（光の三原色）: 赤・緑・青の光を混ぜて色を作ります。混ぜるほど明るくなり、すべて合わせると白になります。画面（ディスプレイ）はこの原理で色を表示します。

減法混色（色の三原色）: シアン・マゼンタ・イエローのインクを混ぜて色を作ります。混ぜるほど暗くなり、すべて合わせると黒（理論上）になります。印刷はこの原理で色を表現します。

この根本的な違いが「画面で見た色を印刷で完全に再現できない」理由です。

HEX はWebデザインで最もよく使われる表記方法です。# に続く6桁の16進数で赤・緑・青の各成分を表します。

#017387
  ↑↑  ↑↑  ↑↑
  RR  GG  BB

- 00 = 0（その色なし） - ff = 255（その色最大）

3桁の短縮記法もあります。#fff は #ffffff、#abc は #aabbcc と同じです。

RGB は赤・緑・青それぞれを0〜255の数値で指定します。CSS・デザインツール・スクリーンキャプチャーツールなど幅広く使われます。

color: rgb(1, 115, 135);

HEXとRGBは相互変換できます。

#017387
01 → R: 1
73 → G: 115
87 → B: 135

16進数を10進数に変換することでRGBに変換できます。

アルファ（A）チャンネルを加えると透明度を指定できます。

color: rgba(1, 115, 135, 0.5);  /* 50% 透明 */

## CMYK

CMYK は印刷で使われるカラーモデルです。シアン（C）・マゼンタ（M）・イエロー（Y）・ブラック（K）の4色を0〜100%で指定します。

完全に正確な変換はできませんが、近似値として以下の式が使われます。

R, G, B を 0〜1 に正規化して：
K = 1 - max(R, G, B)
C = (1 - R - K) / (1 - K)
M = (1 - G - K) / (1 - K)
Y = (1 - B - K) / (1 - K)

実際の印刷では、プリンターのプロファイルや用紙によって発色が変わるため、入稿前に必ずカラープルーフで確認することが推奨されます。

デザインツールではHSL・HSVという表現も使われます。

HSL: 色相（H: 0〜360°）・彩度（S: 0〜100%）・輝度（L: 0〜100%）

color: hsl(189, 99%, 27%);

色を直感的に調整しやすいため、デザインツールのカラーピッカーでよく使われます。「この色より少し明るく」という調整がLの値を変えるだけでできます。

企業やブランドのカラーは、Web・印刷・映像など複数の媒体で一貫して使われます。それぞれの媒体用に変換した値を一元管理しておくことが重要です。

ブランドカラー: ティールブルー
  Web (HEX):  #017387
  Web (RGB):  rgb(1, 115, 135)
  印刷 (CMYK): C:99 M:15 Y:0 K:47
  Pantone:    3165 C

ブランドガイドラインには必ずこれらの値を記載し、デザイナー・印刷会社・Web制作者が同じ色を使えるようにします。

カラーコードの変換はブランドカラーパレット作成ツールを使うとHEX・RGB・CMYKを一括で確認・コピーできます。