color theoryNovember 5, 20267 min read

Marken-Blau ist nicht #0000FF: Wie Intel, LinkedIn, IBM und Dell Blau einsetzen

Reines Blau druckt grauer, sieht aus wie ein Link und ist auf Schwarz schwer zu erkennen. Die berühmten blauen Logos setzen stattdessen alle auf ein ruhigeres Blau. Ihre exakten Codes, warum sich die Blautöne von Facebook und Visa im Druck verschieben und wie du deins findest.

By Boone
XLinkedIn
Brand Blue Is Not #0000FF: How Intel, LinkedIn, IBM and Dell Use Blue

Ein gutes Marken-Blau ist niemals #0000FF. Reines Blau ist das tiefste Blau, das ein Bildschirm darstellen kann. Das klingt stark, bis das Logo in den Druck geht und grauer zurückkommt, oder auf einer Webseite landet, auf der jedes blaue Ding wie ein Link aussieht. Die berühmten blauen Logos lösen das alle auf dieselbe Weise, und das Muster lässt sich leicht für dein eigenes übernehmen.

Warum reines Blau schwierig ist

Reines Blau ist die Ecke des Farbraums eines Bildschirms: das blaue Licht mit voller Leistung und sonst nichts. Druckfarbe kann diese Ecke nicht erreichen.

#0000FF

Auf dem Bildschirm

#2C4A9A

Im Druck, auf gestrichenem Papier

Dasselbe Blau auf einem Bildschirm und als Andruck.

Für eine Standard-Druckmaschine mit gestrichenem Papier umgerechnet wird #0000FF zu CMYK 93/75/0/0 und proofed als etwa #2C4A9A: grauer und flacher. Der Unterschied ist groß genug, dass ein geschultes Auge von einer anderen Farbe spricht. Das Blau auf deiner Visitenkarte passt also nicht zum Blau auf deiner Website.

Reines Blau hat auf Schwarz ein zweites Problem. Es ist die dunkelste der leuchtenden Farben, also verschwindet blauer Text oder eine blaue Marke auf dunklem Hintergrund fast.

#0000FF

Auf Weiß

#0000FF

Auf Schwarz

Reines Blau hält auf Weiß, versinkt auf Schwarz.
#0000EE

Standard-Link im Browser

#0000FF

Reines Blau

Fast dasselbe Blau. Eins davon ist ein Hyperlink.

Browser färben nicht besuchte Links mit #0000EE, aus dem vorgeschlagenen Stylesheet des HTML Standards. Das ist einen Schritt von #0000FF entfernt, also wirkt ein Logo oder ein Button in reinem Blau wie etwas zum Anklicken oder wie etwas, das ungestylt geblieben ist.

Wie die berühmten Blautöne es machen

Intel: #0068B5

Das Intel-Logo in Weiß auf Intel-Blau

Ein klares, mittleres Blau, etwa 34 Grad von reinem Blau Richtung Cyan verschoben. Im Druck liegt es mit einem Delta E von 0,8 an seiner Bildschirmfarbe, zu wenig, um es zu sehen. Das Intel-Logo wird auf diesem Blau weiß umgekehrt verwendet, und Weiß darauf ist gut lesbar.

LinkedIn: #0A66C2

Das LinkedIn-Logo in Weiß auf LinkedIn-Blau, mit den Buchstaben in in Blau ausgespart

Ein freundliches Blau mit einem Hauch mehr Violett als bei Intel. Es verschiebt sich von den vieren im Druck am stärksten, mit einem Delta E von 2,0, und das liegt immer noch genau an der Grenze dessen, was das Auge bemerken kann. Wortmarke und Kasten werden weiß, und das „in“ wird in Blau ausgespart.

IBM: #1F70C1

Das gestreifte IBM-Logo in Weiß auf IBM-Blau

Ein stabiles, etwas weicheres Blau mit ein wenig Grau darin. Die gestreiften Buchstaben sind dünn, deshalb muss die Farbe hell genug bleiben, damit weiße Linien sich abheben: Weiß auf diesem Blau übertrifft das Zugänglichkeitsminimum für Text mit Reserve. Es druckt mit einem Delta E von 1,3.

Dell: #007DB8

Das Dell-Logo in Weiß auf Dell-Blau

Das hellste und cyanlastigste der vier, aus Dells Refresh von 2016. Es ist das sauberste Blau hier, 41 Grad von reinem Blau entfernt, und es druckt innerhalb von 0,9 Delta E. Es hat auch am wenigsten Spielraum für weißen Text: Es besteht die Kontrastprüfung, aber nur knapp.

Die drei Dinge, die alle tun

Sie neigen zu Cyan. Reines Blau liegt bei 240 Grad auf dem Farbkreis, und die Standard-Linkfarbe auch. Dell liegt bei 199, Intel bei 206, LinkedIn und IBM bei 210. 30 bis 40 Grad weg von 240 zu gehen macht ein Blau ruhig und verhindert, dass es wie ein Hyperlink aussieht.

Sie funktionieren auf Weiß und auf Schwarz. Reines Blau ist stark auf Weiß und versinkt auf Schwarz. Diese vier liegen in der Mitte des Helligkeitsbereichs, also besteht weißer Text bei allen, und jedes bleibt als Farbe auf dunklem Grund sichtbar.

Sie drucken treu. Jedes proofed innerhalb eines Delta E von 2,0.

MarkeBlauFarbtonWeißer Text daraufAls Farbe auf SchwarzDruckverschiebung
Reines Blau#0000FF240°Besteht, 8,6 zu 1Fällt durch, 2,4 zu 1Groß, 16,6
Intel#0068B5206°Besteht, 5,8 zu 1Besteht, 3,6 zu 1Unsichtbar, 0,8
LinkedIn#0A66C2210°Besteht, 5,7 zu 1Besteht, 3,7 zu 1Klein, 2,0
IBM#1F70C1210°Besteht, 5,1 zu 1Besteht, 4,1 zu 1Klein, 1,3
Dell#007DB8199°Besteht, 4,5 zu 1Besteht, 4,6 zu 1Unsichtbar, 0,9

Eine Druckverschiebung unter etwa 2 ist kaum zu sehen. Ab etwa 5 wirkt die gedruckte Farbe wie ein anderes Blau.

Blautöne, die sich im Druck verschieben

Die Bildschirmprüfungen zu bestehen reicht nicht, denn der Druck ist ein eigener Test. Auf dieselbe Weise gemessen, bewegen sich drei andere berühmte Blautöne auf einer Druckmaschine mit gestrichenem Papier stark.

MarkeBlauFarbtonWeißer Text daraufDruckverschiebung
Facebook#0866FF217°Besteht, 4,8 zu 1Groß, 9,7
Visa#1434CB230°Besteht, 8,8 zu 1Groß, 9,2
Samsung (zitiert)#1428A0231°Besteht, 11,4 zu 1Spürbar, 6,0

Facebooks Blau ist das interessante. Es liegt im cyanlastigen Bereich und besteht die Prüfung für weißen Text, und doch proofed es als spürbar anderes Blau.

Hellere, gesättigtere Blautöne liegen außerhalb dessen, was Vierfarbdruck drucken kann. Diese Marken haben ihre eigenen Gründe und leben meist auf Bildschirmen, das ist also eine Messung und kein Fehler. Die Lehre für dein Logo: Mach den Druck-Proof, statt vom Farbton aus zu raten.

  1. Starte 30 bis 40 Grad von reinem Blau entfernt. Zieh #0000FF Richtung Cyan, bis es zwischen etwa 199 und 210 Grad liegt, dem Bereich der vier berühmten Blautöne.
  2. Teste es auf drei Arten. Weißer Text darauf sollte in Fließtextgröße leicht lesbar sein. Die Farbe selbst sollte auf Schwarz noch auffallen. Und sie sollte neben #0000EE nicht wie ein Link aussehen.
  3. Proofe es im Druck. Mach einen Softproof in deinem Design-Tool mit einem Profil für gestrichenes Papier, oder frag deine Druckerei nach einem Proof. Wenn das gedruckte Blau wie eine andere Farbe aussieht, verschiebe es, bis Bildschirm und Druck übereinstimmen.

Klau diese 4 Blautöne

Die vier Blautöne, so wie jede Marke sie zeichnet.

Aus jeder Logodatei ausgelesen. Tippe auf eine Farbe, um ihren Code zu kopieren.

Nutze sie, um zu lernen und dein eigenes Blau daneben zu testen. Das exakte Blau einer berühmten Marke für ein neues Logo in einer verwandten Branche zu kopieren ist der sichere Weg, wie ein Plagiat auszusehen: Nutze das Muster, nicht die Codes.

FAQ

Was ist der Hex-Code von Intel-Blau?

Intel-Blau ist #0068B5, so wie es in der Intel-Logodatei gezeichnet ist.

Was ist der Hex-Code von LinkedIn-Blau?

LinkedIn-Blau ist #0A66C2, so wie es in der LinkedIn-Logodatei von 2021 gezeichnet ist.

Was ist der Hex-Code von IBM-Blau?

IBM-Blau ist #1F70C1, so wie es in der IBM-Logodatei gezeichnet ist.

Was ist der Hex-Code von Dell-Blau?

Dell-Blau ist #007DB8, so wie es im Dell-Logo aus dem Refresh von 2016 gezeichnet ist.

Es druckt spürbar grauer, als es auf dem Bildschirm aussieht, es ist fast dasselbe Blau wie ein Standard-Link im Browser, und es verschwindet auf Schwarz fast. Ein ruhigeres Blau Richtung Cyan behebt alle drei Probleme.

Nicht besuchte Links sind im vorgeschlagenen Stylesheet des HTML Standards #0000EE, einen Schritt von reinem Blau entfernt.

Ein mittleres Blau zwischen etwa 199 und 210 Grad Farbton, wie die Blautöne von Intel, LinkedIn, IBM und Dell, das weißen Text besteht, auf Schwarz sichtbar bleibt und im Druck innerhalb eines Delta E von etwa 2 proofed.

Quellen

  • Farben aus der Logodatei jeder Marke auf Wikimedia Commons ausgelesen: Intel-Logo (2020), LinkedIn (2021), IBM, Dell (2016).
  • Standard-Linkfarbe: der HTML Standard, Rendering, wo :link #0000EE ist.
  • Druckverschiebung: ein Softproof auf dem Druckprofil Coated FOGRA39, gemessen als Delta E 2000. #0000FF proofed als #2C4A9A, ein Unterschied von 16,6. Die vier berühmten Blautöne verschieben sich zwischen 0,8 und 2,0. Facebooks #0866FF, Visas #1434CB und Samsungs zitiertes #1428A0 verschieben sich um 9,7, 9,2 und 6,0.
  • Farbwinkel aus den Hex-Codes mit dem HSL-Modell berechnet. Verhältnisse für Weiß auf Farbe und Farbe auf Schwarz mit der WCAG-2-Kontrastformel berechnet.
  • Jedes Logo wird weiß umgekehrt auf seinem eigenen Blau gezeigt, der Version, die diese Marken auf ihrer Farbe nutzen. Nur umgefärbt, nie neu gezeichnet, und die Marken gehören ihren Inhabern.
  • Zuerst als Karussell auf Logo Brainy veröffentlicht.

Choosing colors for a new logo? Our team designs brand identities with colors that work on screen, in print and next to each other.

Get Started

More from Brainy Papers

Keep reading