ブランドイエローは #FFFF00 ではない:McDonald's、IKEA、DHL、Nikon の黄色の使い方

優れたブランドイエローは、決して #FFFF00 ではありません。純粋な黄色は白い背景ではほとんど消えてしまい、印刷では画面で見たときよりも暗くくすんで戻ってきます。有名な黄色のロゴは、どれも同じ方法でこの問題を解決していて、そのパターンは自分のロゴにも簡単に真似できます。

なぜ黄色はブランドカラーの中で最も難しいのか

他の鮮やかな色には、どれもある程度の暗さがあります。純粋な赤は中間グレーほどの明るさで、純粋な青はさらに暗い。ところが純粋な黄色はほぼ白と同じ明るさなので、白いページ上では両者を分けるものがほとんどありません。

#FFFF00

白の上

#FFFF00

黒の上

同じ色なのに、結果は正反対です。黄色のロゴが見えるかどうかは背後にあるもので決まり、ほとんどのロゴは白の上で生きています。レターヘッド、請求書、ウェブサイトのヘッダー、アプリストア、スポンサーボードなど。

しかも印刷すると色が変わる

#FFFF00

画面上

#F4E600

印刷(コート紙)

画面は光を足して黄色を作ります。プリンターは紙の上のインクで作りますが、紙は光りません。標準的なコート紙の印刷に変換すると、#FFFF00 は約 #F4E600 として出力されます。暗く、緑がかり、平坦になります。訓練された目なら別の色だと言うほどの差です。

以下の有名な黄色は、印刷でも元の色に近いままです。4色とも、純粋な黄色よりずっと変化が小さいのです。

有名な黄色はどうやっているのか

McDonald's:赤 #DB0007 の上の #FFBC0D

ほぼ必ず赤の上に置かれる、深みのある金色がかった黄色です。大変な仕事は赤が担当します。白いページでも赤は単独で見やすいので、黄色は読まれる必要がなく、認識されるだけで済むのです。

IKEA:青 #0058AB の上の #FBD914

黄色い楕円は青い地の上にあり、名前も同じ青で書かれているので、黄色が白に触れる必要はありません。青と黄色はスウェーデン国旗の色でもあり、ブランドの出自も一緒に伝えています。

DHL:赤 #D2002E と組む #FFCC00

ここでは黄色が背景、つまり面全体で、その上に赤い名前が乗ります。DHL のバンや封筒も同じ作りです。通りの向かいからでも目に入る黄色い面に、読むための赤。

Nikon:ほぼ黒 #150301 と組む #FFE100

4つの中で最も極端な組み合わせです。黒い文字の背後に、すっきりとした少し暖かい黄色。2色で出せる最大級のコントラストです。黄色が記憶になり、黒が読まれる部分になります。

全員がやっている2つのこと

有名な黄色はどれも、純粋な黄色より暖かい。 色相環で、純粋な黄色は60度にあります。McDonald's は43、DHL は48、IKEA は51、Nikon は53。4色ともオレンジ寄りで、黄色をより豊かで金色っぽく見せ、蛍光ペンのような印象を和らげています。

可読性はパートナーカラーが担う。 4つの黄色はどれも、白地の上では文字として読めません。パートナーはどれも読めます。

つまり黄色は、読まれようとしていません。名前も、小さな文字も、ウェブサイトのボタンも、すべてパートナーの担当です。だから「もっと濃い黄色にすればいい」は間違った解決策です。白地で読めるほど濃くした黄色は、もう誰も欲しがった黄色ではないのですから。

ロゴの黄色の選び方

1. まずパートナーを選ぶ。 名前を書く濃い色を決めます。McDonald's のような赤、IKEA のような青、Nikon のようなほぼ黒。どの白いページでも単独で機能する色でなければなりません。
2. 黄色を暖かくする。 #FFFF00 から始めて、有名な4社が使う範囲、43〜53度に収まるまでオレンジ側に寄せます。
3. 決める前に印刷で試す。 印刷会社に校正刷りを頼むか、デザインツールでコート紙プロファイルを使ってソフトプルーフをしましょう。印刷した黄色が別の色に見えるなら、画面と印刷が一致するまで調整します。

盗みたい4つの組み合わせ

各ブランドが実際に使っている4組です。

#FFBC0DMcDonald's の黄色#DB0007McDonald's の赤#FBD914IKEA の黄色#0058ABIKEA の青#FFCC00DHL の黄色#D2002EDHL の赤#FFE100Nikon の黄色#150301Nikon の黒

研究用や、自分の色と並べてアイデアを試すために使ってください。関連業種の新しいロゴに有名ブランドとまったく同じ組み合わせを使うと、パチモノに見えるのがオチです。使うのはパターンであって、コードではありません。

FAQ

McDonald's の黄色の HEX コードは?

McDonald's の2020年版スクエアロゴのゴールデンアーチは #FFBC0D で、赤 #DB0007 の上に置かれます。

IKEA の黄色の HEX コードは?

IKEA の黄色は #FBD914 で、IKEA ブルー #0058AB の上で使われます。

DHL の黄色の HEX コードは?

DHL イエローは #FFCC00(Pantone 116 C)で、DHL レッド #D2002E(Pantone 199 C)と組み合わされます。

なぜ黄色は白地で見栄えが悪いのですか?

純粋な黄色は白とほぼ同じ明るさなので、両者のコントラストはほとんどありません。白地の #FFFF00 は約 1.07 対 1 で、本文には 4.5 対 1 が必要です。黄色は濃い色の上に置くか、文字は濃いパートナーカラーにしましょう。

ロゴに向いている黄色は?

色相がおよそ43〜53度の暖かい黄色。McDonald's、DHL、IKEA、Nikon の金色がかった黄色のように、名前を担う濃い色と組み合わせます。

出典

• 色は Wikimedia Commons にある各ブランドのロゴファイルから読み取りました:McDonald's スクエアロゴ(2020)、IKEA ロゴ、DHL Express ロゴ(Pantone 116 C と 199 C)、Nikon ロゴ。
• 印刷での変化:Coated FOGRA39 印刷プロファイルでのソフトプルーフ。#FFFF00 は #F4E600 として出力され、色差(Delta E 2000)は 5.6 です。約2を超えると別の色に見えます。4つのブランドイエローの変化は 0.2〜0.7 です。
• 色相角と「白地で読めるか」の列は、HEX コードから HSL モデルと WCAG 2 のコントラスト式で算出しました。黄色は白地で 1.3〜1.7 対 1、パートナーは 5.0〜20 対 1 です。
• 最初は Logo Brainy のカルーセルとして公開されました。