---
title: "HEX・RGB・CMYKの違いと変換方法｜WebデザインとDTP印刷で使うカラーコードを解説"
description: "HEX・RGB・CMYKの違いと変換方法を解説します。WebデザインではHEX/RGB、印刷ではCMYKを使う理由、Adobe・Figmaでのカラーコード確認方法と、ブランドカラーを正確に管理する方法をまとめました。"
date: 2026-06-15
category: Web制作
tags: [カラーコード]
related_tools: [brand-color]
draft: false
---

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

## カラーモードの基本

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

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

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

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

## HEX（16進数カラーコード）

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

```
#017387
  ↑↑  ↑↑  ↑↑
  RR  GG  BB
```

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

| HEXコード | 色 |
|---|---|
| `#000000` | 黒 |
| `#ffffff` | 白 |
| `#ff0000` | 赤 |
| `#017387` | ティールブルー |

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

## RGB

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

```css
color: rgb(1, 115, 135);
```

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

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

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

### RGBAでの透明度指定

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

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

## CMYK

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

```
C: 99%  M: 15%  Y: 0%  K: 47%
```

| 特徴 | 内容 |
|---|---|
| 用途 | 印刷物（チラシ・名刺・パンフレットなど） |
| 色域 | RGBより狭い（再現できない色がある） |
| 黒の扱い | K（Key=黒）を別に持つ（3色混合だと濁るため） |

### RGBとCMYKの変換式

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

```
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・HSVという表現も使われます。

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

```css
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を一括で確認・コピーできます。