ブランドカラーの指定方法｜HEX・RGB・CMYK・DICの違いと使い分け

ブランドカラーは #1E6FEB のような値ひとつで書かれていることが多いのですが、これは画面で見るときの値です。印刷には別の値が要り、色ブレを避けたい場合は色見本の番号で指定します。

媒体ごとの使い分けは下の早見表のとおりです。このあと HEX・RGB・CMYK・特色（DIC・PANTONE）の違いを順に見ていき、後半では色を配る側がガイドラインにどう書けばよいかと、その色を文字に使ってよいかどうかの見分け方を取り上げます。

ブランドカラーは、媒体ごとにどう書き分けるのか

HEXとRGBは何が違うのか

HEX と RGB は、同じ色を別の書き方で表したものです。画面は赤・緑・青の光の強さを組み合わせて色を出しており、RGB はその強さを、赤・緑・青の順に 0 から 255 の数で書きます。一方 HEX は同じ3つの数を16進法の2桁ずつに直して並べ、頭に # を付けたものです。

たとえば #DFF000 なら、赤 DF = 223、緑 F0 = 240、青 00 = 0 なので、RGB で書くと rgb(223, 240, 0) になります。

• 3桁に縮めて書けるのは、赤・緑・青のどれも2桁が同じ数字（FF・CC・00 など）のときです。#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色使うと版が1枚増えるので、印刷費は上がります。名刺のように部数が少ないものは CMYK で近い色に寄せることも多いため、ガイドラインには特色の番号と、それに近い CMYK の値を両方書いておくと、どちらで刷る場合にも困りません。

ガイドラインには、色をどう書くか

この表の 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 以上が求められています。

比は2色それぞれの明るさ（相対輝度）から （明るいほうの輝度 + 0.05）÷（暗いほうの輝度 + 0.05）で計算します。とはいえ、チェックツールに2色を入れれば計算してくれるので、式を覚えておく必要はありません。

#DFF000 は、株式会社 Creators Team のキットに登録されているブランドカラーのひとつです。表のとおり白い背景の上では文字色に使えないので、黒い背景の上で使うか、背景色として使います。こうした色は、どの背景なら文字に使ってよいかを色ごとに書いておくと、コントラスト不足のミスが起きにくくなります。

なお、WCAG ではロゴに含まれる文字（ロゴタイプ）にコントラスト比の基準を設けていません。この章で扱っているのは、ブランドカラーを本文などの文字色に使う場合の話です。

よくある失敗と、その直し方

ガイドライン全体にどんな項目を立てるかはブランドガイドラインの作り方で、ロゴのファイル形式の選び方はロゴのファイル形式の違いで説明しています。