Farbe
Farben sehen nicht nur gut aus: Sie beeinflussen, wie unser Zielpublikum Ton und Relevanz unserer Botschaft wahrnimmt. Mit Rot als Kernfarbe schafft unsere Farbpalette eine Balance zwischen Praktikabilität und unserer Markenpersönlichkeit, um unser Zielpublikum zur Interaktion mit uns zu bewegen.
Nicht einfach ein beliebiges Rot
Jede Marke hat eine identifizierbare Markenfarbe, doch nur wenige Marken haben eine Farbe, die so untrennbar mit ihrer Kernidentität verbunden ist. Die Farbe Rot spielt seit jeher eine zentrale Rolle in der Red Hat Story. Sie repräsentiert unsere Leidenschaft für Zusammenarbeit und dafür, anderen zu helfen.
Red Hat Rot ist pures Rot (kein Blau oder Grün hier).
#ee0000
RGB 238, 0, 0
CMYK 0, 98, 85, 0 Pantone 1788 C
Red Hat Rot (auch bekannt als red-50) erregt Aufmerksamkeit − setzen Sie sie daher mit Bedacht ein. Rote Tupfer identifizieren unsere Marke und heben hervor, was wichtig ist, ohne zu überladen.
Kernfarben
Wenn wir etwas kreieren, das unmissverständlich Red Hat ist, bleiben wir bei unseren Kernfarben, also den Farben, die in unserem Logo enthalten und am engsten mit unserer Marke verbunden sind. Farbtöne und Schattierungen von Rot und neutrales Grau bieten Flexibilität zum Erzeugen von Tiefe und Schatten.
Sekundäre Farben
Unsere sekundäre Palette fügt Energie hinzu und ergänzt Red Hat Rot, ohne damit zu konkurrieren. Bleiben Sie neben Red Hat Rot bei 1 oder 2 sekundären Farben, um eine stärkere Wirkung zu erzeugen.
Gradienten
Um Tiefe und Fülle hinzuzufügen, setzen wir subtile Gradienten zum Füllen von Hintergrundbereichen und Akzenten ein. Sie sollten niemals den Hauptfokus der Komposition darstellen − sie sollten verbessern, nicht übertreffen.
Wie wir Farbe einsetzen
Damit etwas wie Red Hat aussieht, ist mehr erforderlich als nur die Verwendung der Farben in unserer Palette. Die Menge und Platzierung der einzelnen Farben hat einen ebenso großen Einfluss. Befolgen Sie diese Kernprinzipien für eine konsistente Verwendung von Farben.
Einfachheit
Verwenden Sie eingeschränkte, stilisierte Farben. Halten Sie die Dinge einfach und verwenden Sie großzügigen Weißraum, um die Aufmerksamkeit auf die Botschaft zu lenken, damit sich unsere Zielgruppe auf das Wesentliche konzentrieren kann.
Bewusster Einsatz von Rot
Red Hat Rot ist eine starke Farbe. Verwenden Sie rote Farbtupfer, um wichtige Elemente der Komposition hervorzuheben, anstatt einen kompletten Raum auszufüllen.
Ausgewogenheit
Füllen Sie große Objekte und Hintergrundbereiche mit den hellsten Farbtönen, den dunkelsten Schattierungen und subtilen Gradienten. Setzen Sie die am stärkten gesättigten Farbwerte sparsam ein — um etwas hervorzuheben, verwenden Sie Navigationselemente oder fügen Sie Fülle hinzu.
Berücksichtigung von Farbquellen
Verringern Sie den Zoom und achten Sie auf die Farben sämtlicher Elemente in der Komposition. Prüfen Sie, wie sie sich ergänzen und worauf die Aufmerksamkeit gelenkt wird.
Farbkollektionen
Um die Auswahl sich ergänzender Farben zu erleichtern, haben wir Farbkollektionen zusammengestellt, die Farben palettenübergreifend auf unterschiedliche Weise kombinieren. Beginnen Sie bei Ihren Projekten jeweils mit einer dieser Kollektionen.
Spezifischere Informationen zu Farben in Benutzeroberflächen finden Sie unter ux.redhat.com (für Webdesign) und PatternFly (für Produktdesign).
Spezifischere Informationen zu Farben in Benutzeroberflächen finden Sie unter ux.redhat.com (für Webdesign) und PatternFly (für Produktdesign).
Was es zu vermeiden gilt
Verwenden Sie keine Farben, die nicht zur Red Hat Farbpalette gehören.
Überfluten Sie Ihre Inhalte nicht mit Red Hat Rot (red-50). Rot ist eine starke Farbe. Verwenden Sie sie, um Farbtupfer hinzuzufügen.
Verwenden Sie nicht mehr als 2 sekundäre Farben in demselben Bildmaterial. Je weniger Farben, desto besser.
Vergessen Sie nicht, Red Hat Rot (red-50) zu verwenden. Alles von Red Hat sollte red-50 beinhalten.
Verwenden Sie keine Farben, die nicht barrierefrei sind. Gleichen Sie stets das Kontrastverhältnis von Text und anderen Elementen mit der Hintergrundfarbe ab.
Vermeiden Sie eine übermäßige Verwendung von Gradienten. Verwenden Sie Gradienten, um subtile Tiefe und Fülle hinzuzufügen.
Zusatzfarben
Zusätzlich zu unseren Kern- und sekundären Farben haben wir 2 Zusatzfarbpaletten, die bei Bedarf verwendet werden können. Diese Farben sollten nur für den vorgesehenen Zweck verwendet werden, nicht als sekundäre Farben.
Informationspalette
Die Informationspalette ist für Status und Interaktivität reserviert. Sie ist funktionell, nicht dekorativ. Verwenden Sie diese Farben für Benutzeroberflächen, Webseiten, Grafiken und Diagramme, Berichte und anderes informatives Bildmaterial.
Personenpalette
Unser Ziel ist es, Menschen immer so darzustellen, wie sie im richtigen Leben sind. Diese Farben sollten nur als Hauttöne für in Illustrationen dargestellte Menschen verwendet werden. Wählen Sie für jede dargestellte Person 1 Hautfarbtonfamilie. Erfahren Sie mehr über die Darstellung von Menschen.
Text mit Farbe versehen
Mit Farbe lässt sich schnell eine Botschaft oder eine Information vermitteln. Wir arbeiten mit allgemein verständlichen Farbassoziationen für Benutzeroberflächen sowie Präsentationsfolien, Infografiken und Diagrammen, um ein konsistentes Kundenerlebnis zu schaffen.
Farbe | Assoziation | Weitere Informationen |
Red Hat | Rot ist die Farbe unserer Marke. Verwenden Sie kein Rot, um negative Dinge darzustellen. | |
Gefahr, Verringerung | Ein negatives Ereignis ist aufgetreten, etwa ein destruktiver Fehler oder eine Wertminderung. | |
Vorsicht | Eine nicht destruktive Aktion oder ein nicht destruktiver Fehler ist aufgetreten. | |
Warnung | Handeln Sie jetzt, um eine destruktive Aktion oder einen destruktiven Fehler zu vermeiden. | |
Erfolg, Erhöhung | Ein positives Ereignis ist eingetreten, etwa eine erfolgreiche Aktion oder eine Wertsteigerung. | |
Link oder Interaktion | Ein Klick auf das Objekt oder den Text führt zu einem Hyperlink oder zu einer Statusänderung. | |
Info oder Tipp | Es sind hilfreiche Informationen verfügbar. | |
Neutral | Eine Schaltfläche oder Information ist nicht verfügbar oder nicht wichtig. |
Farbmuster
Unsere Farbpalette ist in 11 Farbfamilien unterteilt. Die einzelnen Farben sind numerisch von hell nach dunkel gekennzeichnet, beginnend mit 10. Farben verschiedener Familien mit der gleichen Nummer haben eine ähnliche Sättigung und einen ähnlichen Wert. Sie haben auch ein ähnliches optisches Gewicht.
Klicken Sie unten auf ein Farbmuster, um den Hex-Code in Ihre Zwischenablage zu kopieren, oder laden Sie unsere Musterdateien herunter.
Die Farben unserer Marke
Dies sind die Farben, die wir zur Repräsentation und zum Aufbau des Markenbewusstseins für Red Hat einsetzen.
Kernpalette
red-10
#fce3e3
red-20
#fbc5c5
red-30
#f9a8a8
red-40
#f56e6e
red-50
(Red Hat Rot)
#ee0000
RGB 238 0 0
CMYK 0 98 85 0
Pantone 1788C
red-60
#a60000
red-70
#5f0000
red-80
#3f0000
Weiß
#ffffff
RGB 255 255 255
CMYK 0 0 0 0
Pantone Weiß
gray-10
#f2f2f2
gray-20
#e0e0e0
gray-30
#c7c7c7
gray-40
#a3a3a3
gray-50
#707070
gray-60
#4d4d4d
gray-70
#383838
gray-80
#292929
gray-90
#1f1f1f
gray-95
(UX Schwarz)
#151515
Schwarz
#000000
RGB 0 0 0
CMYK 60 40 40 100
Pantone Schwarz C
Sekundäre Palette
orange-10
#ffe8cc
orange-20
#fccb8f
orange-30
#f8ae54
orange-40
#f5921b
RGB 245 146 27
CMYK 0 50 100 0
Pantone 144C
#ca6c0f
orange-60
#9e4a06
orange-70
#732e00
orange-80
#4d1f00
yellow-10
#fff4cc
yellow-20
#ffe072
yellow-30
#ffcc17
RGB 248 204 23
CMYK 0 15 100 0
Pantone 108C
yellow-40
#dca614
yellow-50
#b98412
yellow-60
#96640f
yellow-70
#73480b
yellow-80
#54330b
teal-10
#daf2f2
teal-20
#b9e5e5
teal-30
#9ad8d8
teal-40
#63bdbd
teal-50
#37a3a3
RGB 55 163 163
CMYK 80 10 30 10
Pantone 2234C
teal-60
#147878
teal-70
#004d4d
teal-80
#003333
purple-10
#ece6ff
purple-20
#d0c5f4
purple-30
#b6a6e9
purple-40
#876fd4
purple-50
#5e40be
RGB 94 64 190
CMYK 85 80 0 0
Pantone 2097C
purple-60
#3d2785
purple-70
#21134d
purple-80
#1b0d33
Zusatzfarben
Informationspalette
Bei diesen Farben handelt es sich um funktionelle Farben. Sie sollten nur für den vorgesehenen Zweck und nicht für dekoratives Bildmaterial verwendet werden.
success-green-10
#e9f7df
success-green-20
#d1f1bb
success-green-30
#afdc8f
success-green-40
#87bb62
success-green-50
#63993d
RGB 99 153 61
CMYK 70 0 100 10
Pantone 7737C
success-green-60
#3d7317
success-green-70
#204d00
danger-orange-10
#ffe3d9
danger-orange-20
#fbbea8
danger-orange-30
#f89b78
danger-orange-40
#f4784a
danger-orange-50
#f0561d
RGB 240 86 29
CMYK 0 83 100 0
Pantone 165C
danger-orange-60
#b1380b
danger-orange-70
#731f00
interaction-blue-10
#e0f0ff
interaction-blue-20
#b9dafc
interaction-blue-30
#92c5f9
interaction-blue-40
#4394e5
interaction-blue-50
#0066cc
RGB 0 102 204
CMYK 85 55 0 5
Pantone 2387C
interaction-blue-60
#004d99
interaction-blue-70
#003366
Personenpalette
Die Beschreibung von Hautfarbtonfamilien unterscheidet sich von traditionellen Farbassoziationen: Kühle Hautfarben tendieren zu Rosatönen, während warme Hautfarben zu Gelb- und Brauntönen tendieren. Erfahren Sie mehr über die Darstellung von Menschen.
cool-tone-10
#ffe3dc
cool-tone-20
#f7c8bb
cool-tone-30
#e8a997
cool-tone-40
#ce8873
cool-tone-50
#a66552
cool-tone-60
#724335
cool-tone-70
#40251d
warm-tone-10
#ffe9dc
warm-tone-20
#f9d5c0
warm-tone-30
#edbea1
warm-tone-40
#d8a381
warm-tone-50
#b88564
warm-tone-60
#8e6549
warm-tone-70
#664934
Barrierefreiheit
Offen und hilfreich zu sein bedeutet, Erlebnisse zu schaffen, die Gleichberechtigung und Inklusion widerspiegeln. Sämtliche Red Hat Assets − Präsentationsfolien, Webseiten, Produktoberflächen, Social-Media-Posts und mehr − sollten für alle Nutzenden zugänglich sein.
Farbe spielt eine entscheidende Rolle für die Barrierefreiheit, da sie sich darauf auswirkt, wie Menschen mit eingeschränktem Sehvermögen Informationen wahrnehmen und verarbeiten. Es ist daher wichtig, bewusste Entscheidungen beim Einsatz von Farbe im Bildmaterial zu treffen.
Kontrast
Kontrast wird als Verhältnis gemessen und beschreibt den Unterschied in der wahrgenommenen Helligkeit zwischen Vordergrund- und Hintergrundfarben. Ein geringer Kontrast kann dazu führen, dass Dinge nur schwer lesbar oder erkennbar sind, insbesondere von Menschen mit einer Sehschwäche. Informatives Bildmaterial oder Bildmaterial, dessen Informationen für das Verständnis der Inhalte entscheidend sind, muss den Kontrastverhältnissen der Stufe AA des WCAG-Standards (Web Content Accessibility Guidelines) entsprechen.
Für Red Hat Assets muss Text in kleiner Schriftgröße (17pt oder kleiner) ein Kontrastverhältnis von mindestens 4,5:1 aufweisen. Bei größerem Text (18pt oder größer) und informativen Grafikelementen wie Symbolen ist ein Kontrastverhältnis von mindestens 3:1 erforderlich. Mit Tools wie Adobe Color können Sie das Kontrastverhältnis Ihrer Farben messen. Informieren Sie sich außerdem in den WCAGs (Web Content Accessibility Guidelines) über die Standardkontrastverhältnisse für Text und andere Grafikelemente.
red-50 erfüllt die Farbkontraststandards auf black.
Weiß erfüllt die Farbkontraststandards auf teal-60.
Schwarz erfüllt die Farbkontraststandards auf red-10.
Weiß erfüllt die Farbkontraststandards auf purple-60.
red-50 auf gray-80 erfüllt die Farbkontraststandards nicht.
Weiß auf teal-40 erfüllt die Farbkontraststandards nicht.
Schwarz auf red-60 erfüllt die Farbkontraststandards nicht.
Weiß auf purple-30 erfüllt die Farbkontraststandards nicht.
Farbenblindheit
Menschen mit Farbenblindheit nehmen Farbunterschiede anders als die meisten Menschen wahr. Dadurch fällt es ihnen schwer, Informationen zu verstehen, die sich nur durch Farben unterscheiden, insbesondere in Diagrammen oder Benutzeroberflächen. Die häufigsten Formen von Farbenblindheit sind die Rot-Grün-Sehschwäche (Deuteranopie oder Protanopie) und die Blau-Gelb-Sehschwäche (Tritanopie).
Wenn Sie etwas nur mit Farbe ausdrücken, verstehen Menschen mit Farbenblindheit Ihr Bildmaterial unter Umständen nicht. Verwenden Sie daher neben Farbe zusätzlich Text oder Symbole und wählen Sie Farben unterschiedlicher Sättigungsgrade, um Dinge zu differenzieren. Verwenden Sie ein Tool wie Color Oracle, um durch eine Simulation ein besseres Gefühl dafür zu bekommen, wie Ihr Bildmaterial für jemanden mit Farbenblindheit aussieht.
Verwenden Sie zusätzlich zu Farben auch Beschriftungen, um unterschiedliche Bereiche von Diagrammen, Tabellen und Benutzeroberflächen zu kennzeichnen.
Verlassen Sie sich nicht nur auf Farben. Eine Person mit Farbenblindheit kann die Farben möglicherweise nicht unterscheiden, was es ihr unmöglich macht, die Informationen zu verstehen.
Vibration
Gesättigte Farbtöne mit ähnlicher Intensität können bei gemeinsamer Verwendung vibrieren, sodass die Ränder unscharf und verschwommen erscheinen. Diese Farben können für jedermann schwierig zu betrachten und zu unterscheiden sein und bei Menschen mit eingeschränktem Sehvermögen sogar Schmerzen verursachen.
Kombinieren Sie helle Farben mit weniger gesättigten und neutralen Farben.
Verwenden Sie keine Farben mit ähnlicher Intensität in demselben Bereich.