ブランドカラーは #1E6FEB のような1つの値で書かれることが多いのですが、この値は画面で見るための値です。印刷には別の値が要り、色ブレを避けたい場面では色見本の番号を使います。
この記事では、HEX・RGB・CMYK・特色（DIC・PANTONE）の違いと使い分けを、媒体別の早見表から説明します。あわせて、色を配る側がガイドラインにどう書くか、その色を文字に使ってよいかの判定方法も扱います。
ブランドカラーは、媒体ごとにどう書き分けるのか
| 媒体 | 使う表記 | 書き方の例 |
|---|---|---|
| Webサイト・アプリ | HEX（またはRGB） | #1E6FEB |
| スライド・Word | RGB | 30, 111, 235 |
| オフセット印刷（名刺・チラシ・パンフレット） | CMYK | C87 M53 Y0 K8（計算式の目安） |
| 色ブレを避けたい印刷、蛍光色・金・銀 | 特色（DIC・PANTONE の色番号） | 色見本の番号 |
| 看板・塗装・成形品 | 色見本の番号 | DIC・PANTONE・塗料用標準色など |
HEXとRGBは何が違うのか
同じ色の、別の書き方です。画面は赤・緑・青の光の強さで色を作ります。RGB はその強さを、赤・緑・青の順に 0 から 255 の数で書きます。HEX は、同じ3つの数を16進法の2桁ずつに直して並べ、先頭に # を付けたものです。
たとえば #DFF000 は、赤 DF = 223、緑 F0 = 240、青 00 = 0 なので、RGB では rgb(223, 240, 0) です。
- 赤・緑・青それぞれの2桁が同じ数字（
FF・CC・00など）なら、3桁に略せます。#FC0は#FFCC00と同じです。 - 英字の大文字と小文字は同じ意味です。ガイドラインの中では、どちらかに統一します。
- Web で色を指定するときの基準は、sRGB という色の範囲です。HEX も RGB も、この範囲の画面の色を表します。
使い分けは、扱うツールで決まります。Web の制作では HEX、スライドやデザインツールでは RGB を使うことが多いものの、どちらの入力欄もあるツールが多く、どちらで入れても同じ色になります。
CMYKとは何か、RGBからそのまま変換できないのはなぜか
CMYK は、シアン・マゼンタ・イエロー・ブラックの4色のインキを、それぞれ何％使うかで色を表す方法です。印刷は、紙にインキを重ねて、紙が反射する光で色を作ります。光を足して作る画面とは、色の作り方が逆です。
そのため、再現できる色の範囲（色域）が違います。画面で出せる鮮やかな黄緑や青は、CMYK では出しきれず、沈んだ色になることがあります。用紙（コート紙かマット紙か）や印刷条件でも見え方が変わります。日本の商業印刷では、Japan Color 系のプロファイルがよく使われます。
計算式で出したCMYKは「目安」
RGB から CMYK を、次の式で機械的に出すことはできます。K = 1 − max(R, G, B) ÷ 255、C = (1 − R÷255 − K) ÷ (1 − K)、M と Y も同様です。Acme のメインカラー rgb(30, 111, 235) をこの式で変換すると、C87 M53 Y0 K8 になります。
ただし、この式は色域も紙も考えていません。実際に刷る値は、印刷会社の条件に合わせて決め直します。結論として、変換に頼らず、最初から RGB と CMYK を別々に決めて、両方を併記します。
特色（DIC・PANTONE）はいつ使うのか
特色とは、あらかじめ調合されたインキを、1色として刷る方法です。CMYK の4色を掛け合わせる方法と違い、同じ色番号のインキを使うため、色ブレが小さくなります。ただし、用紙やインキの量でも見え方は変わります。
- DIC：DIC 株式会社の色見本帳（DIC カラーガイド）の色番号。日本の印刷で広く使われます。
- PANTONE：米国 Pantone 社の色見本の番号。海外の取引でよく指定されます。コート紙用（C）と非コート紙用（U）で見え方が違うので、番号は用紙に合わせて「PANTONE 286 C」のように書きます。
使う場面は、次のとおりです。
- コーポレートカラーの色ブレを、厳しく抑えたいとき
- 蛍光色や金・銀など、CMYK では出せない色を使うとき
- CMYK では沈んでしまう、鮮やかな色を再現したいとき
ただし、特色は1色ぶんの版が増えるので、印刷費が上がります。名刺のように部数が少ない印刷では、CMYK で近づけることも多いので、ガイドラインには特色の番号と、その近似のCMYKを両方書いておくと、どちらの場合にも対応できます。
ガイドラインには、色をどう書くか
| 名前・用途 | HEX | RGB | CMYK（目安） |
|---|---|---|---|
| Acme Blue（メイン） | #1E6FEB | 30, 111, 235 | C87 M53 Y0 K8 |
実際のガイドラインでは、CMYK の欄に、印刷会社と確かめた値を入れます。ここの値は、計算式で出した目安です。
- 色に名前を付ける。共有するときに呼びやすくなります。
- 用途を書く。メイン・サブ・背景・文字のどれに使う色かを、色ごとに書きます。
- 書式を統一する。HEX は
#付きで大文字、RGB は 0〜255 の数をカンマで区切り、CMYK は％で書きます。 - 画面用と印刷用を分ける。画面用は sRGB の HEX・RGB、印刷用は CMYK と、必要なら特色の番号です。
MediaKit™での扱い
MediaKit™ のカラー欄は、色の名前と、画面用の HEX・RGB を掲載します。値をクリックすると、その値がクリップボードにコピーされます。CMYK や特色の番号を載せたいときは、ガイドラインの概要欄に、文章として書き添えてください。手順はアップロードガイドにあります。
ブランドカラーを文字の色に使ってよいか
文字の読みやすさは、文字色と背景色のコントラスト比で判断します。Webアクセシビリティの国際基準である WCAG 2.x の AA 水準では、通常の大きさの文字は 4.5 : 1 以上、大きな文字（約24px以上、または約19px以上の太字）は 3 : 1 以上が必要です。
比は、それぞれの色の明るさ（相対輝度）から、（明るいほうの輝度 + 0.05）÷（暗いほうの輝度 + 0.05）で出します。ツールに2色を入れれば計算してくれるので、式を覚える必要はありません。
| 文字色 | 背景色 | 比 | 通常文字（AA） |
|---|---|---|---|
| #DFF000 | 白 #FFFFFF | 1.26 : 1 | 満たさない |
| #DFF000 | 黒 #000000 | 16.6 : 1 | 満たす |
| #1E6FEB（Acme Blue） | 白 #FFFFFF | 4.64 : 1 | 満たす（ぎりぎり） |
#DFF000 は、株式会社 Creators Team のキットに登録されているブランドカラーの1つです。白い背景では文字色に使えません。黒い背景の上で使うか、背景色として使います。このように、色ごとに「文字に使ってよい背景」を書いておくと、コントラスト不足の事故を減らせます。
なお、WCAG は、ロゴに含まれる文字（ロゴタイプ）には、コントラスト比の基準を求めていません。ここでの話は、ロゴそのものではなく、ブランドカラーを文章などの文字色に使う場合です。
よくある失敗と、その直し方
NG
HEX だけを印刷会社に渡し、刷り上がりの色が沈んでしまう。
「コーポレートブルー」のように、色名だけで指定する。
画面で見た色と、刷り上がりの色が同じになると考える。
OK
CMYK を併記し、色ブレが困るなら特色の番号も添える。
名前と、HEX・RGB・CMYK の値をセットで書く。
印刷は色見本や色校正で確認する。モニターの設定でも見え方は変わる。
- 色ごとに、名前・用途・HEX・RGB・CMYK を書いた
- CMYK は、印刷会社の条件で確認した値にした（計算式の値のままにしていない）
- 色ブレが困る色には、特色の番号を添えた
- 文字に使ってよい背景を、色ごとに書いた
- 書式（# の有無・大文字・単位）を統一した
ガイドライン全体の項目立てはブランドガイドラインの作り方で説明しています。ロゴのファイル形式の選び方はロゴのファイル形式の違いにあります。
