ブランドブルーは #0000FF ではない:Intel、LinkedIn、IBM、Dell の青の使い方

優れたブランドブルーは、決して #0000FF ではありません。純粋な青は画面が出せる最も深い青で、強そうに聞こえますが、ロゴを印刷するとくすんで返ってきたり、青いものがすべてリンクに見えるWebページに置かれたりします。有名な青のロゴはどれも同じやり方でこの問題を解決していて、そのパターンは自分のロゴにも簡単に真似できます。

純粋な青が難しい理由

純粋な青は、画面の色空間の隅っこです。青い光が全開で、ほかには何もありません。印刷インクはその隅には届きません。

#0000FF

画面上

#2C4A9A

コート紙への印刷

標準的なコート紙の印刷用に変換すると、#0000FF は CMYK 93/75/0/0 となり、校正では約 #2C4A9A になります。よりくすんで平板な色です。訓練された目なら別の色と言い切れるほどの差で、名刺の青とWebサイトの青は一致しません。

純粋な青には、黒の上でもう一つ問題があります。明るい色の中で最も暗いため、暗い背景の上の青い文字や青いマークはほとんど消えてしまいます。

#0000FF

白の上

#0000FF

黒の上

リンクにも見える

#0000EE

ブラウザ標準のリンク

#0000FF

純粋な青

ブラウザは未訪問のリンクを、HTML Standard の推奨スタイルシートに従って #0000EE で表示します。#0000FF とはほんの一歩違いなので、純粋な青のロゴやボタンは、クリックするものか、スタイルが当たっていないものに見えてしまいます。

有名な青はどうしているか

Intel:#0068B5

澄んだ中間の青で、純粋な青からシアン方向に約34度ずれています。印刷校正では画面の色との差が Delta E 0.8 以内で、見分けられないほど小さい差です。Intel のロゴはこの青の上で白抜きにして使われ、白は読みやすく映えます。

LinkedIn:#0A66C2

Intel よりほんの少し紫がかった、親しみやすい青です。4色の中では印刷で最もズレが大きく Delta E 2.0 ですが、それでも目で気づけるかどうかのぎりぎりの範囲です。ワードマークとボックスは白になり、「in」は青で抜かれます。

IBM:#1F70C1

安定感のある、わずかに柔らかくグレーを含んだ青です。ストライプの文字は細いので、白い線が読めるくらい色を明るく保つ必要があります。この青の上の白は、テキスト用のアクセシビリティ基準を余裕でクリアします。印刷では Delta E 1.3 です。

Dell:#007DB8

4色の中で最も明るく、最もシアンに近い青で、2016年のリフレッシュ時のものです。純粋な青から41度離れた最もクリーンな青で、印刷では Delta E 0.9 以内に収まります。ただし白い文字の余裕は最も小さく、コントラストチェックは通るものの、ぎりぎりです。

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

シアン寄りである。 純粋な青は色相環の240度にあり、標準のリンク色も同じです。Dell は199、Intel は206、LinkedIn と IBM は210。240度から30〜40度離れることで、青は落ち着き、ハイパーリンクに見えなくなります。

白の上でも黒の上でも機能する。 純粋な青は白の上では強く、黒の上では沈みます。この4色は明度の中間帯にあるので、どれも白い文字が通り、暗い地の上でも色として見えます。

印刷で正確に出る。 どれも校正で Delta E 2.0 以内に収まります。

印刷のズレが約2未満なら、ほとんど見分けられません。約5を超えると、印刷された色は別の青に見えます。

印刷でズレる青

画面のチェックを通るだけでは足りません。印刷は別のテストです。同じ方法で測ると、ほかの有名な青のうち3つはコート紙の印刷で大きく動きます。

面白いのは Facebook の青です。シアン寄りの範囲にあり、白文字のチェックも通るのに、校正では明らかに違う青になります。

より明るく彩度の高い青は、4色インクで印刷できる範囲の外に出てしまいます。これらのブランドには独自の事情があり、主に画面上で生きているので、これは間違いではなく測定結果です。自分のロゴへの教訓は、色相から推測せず、印刷校正を実際にやることです。

ロゴ用の青の選び方

1. 純粋な青から30〜40度離れたところから始める。 #0000FF をシアン方向に引き寄せ、色相が約199〜210度の間に収まるようにします。有名な4色が使っている範囲です。
2. 3通りでテストする。 その上の白い文字が本文サイズで楽に読めること。色そのものが黒の上でも見えること。そして #0000EE と並べてもリンクに見えないこと。
3. 印刷で校正する。 デザインツールでコート紙のプロファイルを使ってソフトプルーフするか、印刷会社に校正刷りを頼みます。印刷された青が別の色に見えるなら、画面と印刷が一致するまで動かしましょう。

この4つの青を拝借しよう

各ブランドが描いている4つの青です。

#0068B5Intelブルー#0A66C2LinkedInブルー#1F70C1IBMブルー#007DB8Dellブルー

研究用に、そして自分の青を隣に並べてテストするために使ってください。関連する業種の新しいロゴに有名ブランドの青をそのままコピーすると、偽物に見えてしまいます。真似するのはパターンであって、コードではありません。

FAQ

Intelブルーのhexコードは?

Intelブルーは #0068B5 です。Intelのロゴファイルに描かれている色です。

LinkedInブルーのhexコードは?

LinkedInブルーは #0A66C2 です。2021年のLinkedInロゴファイルに描かれている色です。

IBMブルーのhexコードは?

IBMブルーは #1F70C1 です。IBMのロゴファイルに描かれている色です。

Dellブルーのhexコードは?

Dellブルーは #007DB8 です。2016年のリフレッシュ後のDellロゴに描かれている色です。

なぜ #0000FF はロゴに向かないのですか?

画面で見るよりも明らかにくすんで印刷され、ブラウザ標準のリンクとほぼ同じ青で、黒の上ではほとんど消えてしまいます。シアン寄りの落ち着いた青なら、この3つとも解決できます。

ブラウザの標準のリンク色は何色ですか?

未訪問のリンクは、HTML Standard の推奨スタイルシートでは #0000EE で、純粋な青とほんの一歩の違いです。

ロゴに良い青とは?

色相が約199〜210度の中間の青です。Intel、LinkedIn、IBM、Dell の青のように、白い文字が通り、黒の上でも見え、印刷で Delta E 約2以内に収まるものです。

Sources

• 色は各ブランドのWikimedia Commons上のロゴファイルから読み取りました:Intel logo (2020)、LinkedIn (2021)、IBM、Dell (2016)。
• 標準のリンク色:HTML Standard のレンダリング。:link は #0000EE です。
• 印刷のズレ:Coated FOGRA39 印刷プロファイルでのソフトプルーフを Delta E 2000 で測定。#0000FF は #2C4A9A として校正され、差は16.6です。有名な4色のズレは0.8〜2.0。Facebook の #0866FF、Visa の #1434CB、Samsung の引用値 #1428A0 は、それぞれ 9.7、9.2、6.0 ズレます。
• 色相角は hex コードから HSL モデルで算出。白地に色、黒地に色のコントラスト比は WCAG 2 のコントラスト式で算出しています。
• 各ロゴは、そのブランドが自社カラーの上で使うバージョンである、自身の青の上での白抜きで表示しています。色を変えただけで描き直してはおらず、商標は各所有者に帰属します。
• 最初に Logo Brainy でカルーセルとして公開されました。