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.

How we use color

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.

Bild, das die Farbtöne und Schattierungen Rot, Weiß und Schwarz zeigt.

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. 

Bild, das Orange, Gelb, Blaugrün und Purpur zeigt.

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.

Ein Bild, das verschiedene Gradientenoptionen aus der Palette zeigt.

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.

Core light
Eine Farbpalette zeigt 3 Möglichkeiten zur Verwendung von Farben in Anwendungen mit Core Light. Hintergrundbereiche können gray-10 oder weiß sein. Text kann schwarz oder red-50 sein. Andere Grafiken können in Farbtönen oder Schattierungen von Red Hat Rot, Schwarz oder Weiß gehalten sein. Rechts sind 4 Beispielbilder für die Verwendung der Farbpalette Expressive Dark dargestellt.
Core dark
Eine Farbpalette zeigt 3 Möglichkeiten zur Verwendung von Farben in Anwendungen mit Core Dark. Hintergrundbereiche können schwarz oder gray-80 sein. Text kann weiß oder red-50 sein. Andere Grafiken können in Farbtönen oder Schattierungen von Red Hat Rot, Schwarz oder Weiß gehalten sein. Rechts sind 4 Beispielbilder für die Verwendung der Farbpalette Core Dark dargestellt.
Core red
Eine Farbpalette zeigt 3 Möglichkeiten zur Verwendung von Farben in Anwendungen mit Core Red. Hintergrundbereiche können red-10 oder weiß sein. Text kann schwarz oder red-50 sein. Andere Grafiken können in Farbtönen oder Schattierungen von Red Hat Rot, Schwarz oder Weiß gehalten sein. Rechts sind 5 Beispielbilder für die Verwendung der Farbpalette Core Red dargestellt.
Expressive light
Eine Farbpalette zeigt 3 Möglichkeiten zur Verwendung von Farben in Anwendungen mit Expressive Light. Hintergrundbereiche können gray-10, red-10 oder weiß sein. Text kann schwarz, purple-80 oder red-50 sein. Andere Grafiken können in Farbtönen oder Schattierungen von Red Hat Rot, Purpur, Schwarz, Weiß, Blaugrün, Orange und gelb gehalten sein. Rechts sind 3 Beispielbilder für die Verwendung der Farbpalette Expressive Dark dargestellt.
Expressive dark
Eine Farbpalette zeigt 3 Möglichkeiten zur Verwendung von Farben in Anwendungen mit Expressive Dark. Hintergrundbereiche können schwarz oder purple-80 sein. Text kann weiß oder rot sein. Andere Grafiken können in Farbtönen oder Schattierungen von Red Hat Rot, Purpur, Schwarz, Weiß, Blaugrün, Orange und Gelb gehalten sein. Rechts sind 3 Beispielbilder für die Verwendung der Farbpalette Expressive Dark dargestellt.
Interface light
Eine Farbpalette zeigt 3 Möglichkeiten zur Verwendung von Farben in Anwendungen mit heller Benutzeroberfläche (light interface). Die häufigsten Hintergrundfarben sind Weiß, gray-10 und gray-30. Text kann gray-95, gray-80, interaction-blue-50 oder red-50 sein. Andere Grafiken können in Farbtönen oder Schattierungen einer beliebigen anderen Farbe aus der Red Hat Farbpalette gehalten sein. Rechts sind 3 Beispielbilder für die Verwendung der Farbpalette Core Red dargestellt.

Spezifischere Informationen zu Farben in Benutzeroberflächen finden Sie unter ux.redhat.com (für Webdesign) und PatternFly (für Produktdesign).

Interface dark
Eine Farbpalette zeigt 3 Möglichkeiten zur Verwendung von Farben in Anwendungen mit dunkler Benutzeroberfläche (dark interface). Die häufigsten Hintergrundfarben sind gray-95, gray-80, and gray-70. Text kann weiß, gray-30, interaction-blue-20 oder red-50 sein. Andere Grafiken können in Farbtönen oder Schattierungen einer beliebigen anderen Farbe aus der Red Hat Farbpalette gehalten sein. Rechts sind 3 Beispielbilder für die Verwendung der Farbpalette für dunkle Benutzeroberflächen dargestellt.

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

Bild, das eine falsche Verwendung zeigt: Eine Präsentation mit Einsatz von Farben, die nicht zur Red Hat Farbpalette gehören.

Verwenden Sie keine Farben, die nicht zur Red Hat Farbpalette gehören.

Bild, das eine falsche Verwendung zeigt: Ein Beispiel für eine Anzeige mit Hintergrund in Red Hat Rot.

Überfluten Sie Ihre Inhalte nicht mit Red Hat Rot (red-50). Rot ist eine starke Farbe. Verwenden Sie sie, um Farbtupfer hinzuzufügen.

Bild, das eine falsche Verwendung zeigt: Eine Illustration, die Rot und 3 sekundäre Farben verwendet.

Verwenden Sie nicht mehr als 2 sekundäre Farben in demselben Bildmaterial. Je weniger Farben, desto besser.

Bild, das eine falsche Verwendung zeigt: Ein Social-Media-Post, der nur sekundäre Farben verwendet.

Vergessen Sie nicht, Red Hat Rot (red-50) zu verwenden. Alles von Red Hat sollte red-50 beinhalten.

Bild, das eine falsche Verwendung zeigt: Eine Präsentationsfolie mit Farben mit geringem Kontrast.

Verwenden Sie keine Farben, die nicht barrierefrei sind. Gleichen Sie stets das Kontrastverhältnis von Text und anderen Elementen mit der Hintergrundfarbe ab.

Bild, das eine falsche Verwendung zeigt: Website-Überschrift mit mehreren Gradienten.

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.

Ein Bild, das Information Blue, Success Green und Danger Orange zeigt.

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.

Ein Bild, das die Farbtöne und Schattierungen von kühlen und warmen Farben zeigt.

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.

FarbeAssoziationWeitere Informationen
RotRed HatRot ist die Farbe unserer Marke. Verwenden Sie kein Rot, um negative Dinge darzustellen.
Danger OrangeGefahr, VerringerungEin negatives Ereignis ist aufgetreten, etwa ein destruktiver Fehler oder eine Wertminderung.
OrangeVorsichtEine nicht destruktive Aktion oder ein nicht destruktiver Fehler ist aufgetreten.
GelbWarnungHandeln Sie jetzt, um eine destruktive Aktion oder einen destruktiven Fehler zu vermeiden.
Success GreenErfolg, ErhöhungEin positives Ereignis ist eingetreten, etwa eine erfolgreiche Aktion oder eine Wertsteigerung.
Interaction BlueLink oder InteraktionEin Klick auf das Objekt oder den Text führt zu einem Hyperlink oder zu einer Statusänderung.
ViolettInfo oder TippEs sind hilfreiche Informationen verfügbar.
GrauNeutralEine Schaltfläche oder Information ist nicht verfügbar oder nicht wichtig.
Color swatches

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

orange-50

#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

Accessibility

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 Text und Symbole auf schwarzem Hintergrund

red-50 erfüllt die Farbkontraststandards auf black.

Weißer Text und Symbole auf teal-60

Weiß erfüllt die Farbkontraststandards auf teal-60.

Schwarzer Text und Symbole auf red-10

Schwarz erfüllt die Farbkontraststandards auf red-10.

Weißer Text und Symbole auf purple-80

Weiß erfüllt die Farbkontraststandards auf purple-60.

red-50 Text und Symbole auf gray-80

red-50 auf gray-80 erfüllt die Farbkontraststandards nicht.

Weißer Text und Symbole auf teal-40

Weiß auf teal-40 erfüllt die Farbkontraststandards nicht.

Schwarzer Text und Symbole auf red-60

Schwarz auf red-60 erfüllt die Farbkontraststandards nicht.

Weißer Text und Symbole auf purple-30

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.

Kreisdiagramm mit Beschriftungen neben dem jeweils entsprechenden Abschnitt des Diagramms.

Verwenden Sie zusätzlich zu Farben auch Beschriftungen, um unterschiedliche Bereiche von Diagrammen, Tabellen und Benutzeroberflächen zu kennzeichnen.

Bild, das eine falsche Verwendung zeigt: Ein Kreisdiagramm mit farbcodierter Legende. Die Beschriftungen zeigen nicht auf Bereiche des Diagramms.

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.

Ein Beispiel für Farben mit hohem Kontrast, die nicht vibrieren.

Kombinieren Sie helle Farben mit weniger gesättigten und neutralen Farben.

Bild, das eine falsche Verwendung zeigt: Ein Beispiel für Farben mit geringem Kontrast, die vibrieren.

Verwenden Sie keine Farben mit ähnlicher Intensität in demselben Bereich.

Mehr erfahren

Webseitensymbol.

Grundlagen der Barrierefreiheit im digitalen Design

Checklistensymbol.

WCAG-Standards (Web Content Accessibility Guidelines)

Augensymbol.

Visuelle Barrierefreiheit bei Red Hat