Unsere Farbpalette besteht aus 10 Farbfamilien (mit jeweils 7 einzelnen Farben) sowie Weiß, Schwarz und verschiedenen Grautönen. Die Farbfamilien sind abhängig von der geplanten Nutzung in 3 Unterpaletten unterteilt: Kernfarben, sekundäre Farben und Zusatzfarben.

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. Daher haben sie auch ein ähnliches optisches Gewicht.

Unsere Kernfarben sind die Farben im Red Hat Logo. Sie sind am engsten mit unserer Marke verbunden: rot, schwarz und weiß. Wählen Sie bei Unsicherheiten bezüglich der Farbe immer eine unserer Kernfarben aus.

Unsere primäre Markenfarbe ist red-50, auch bekannt als „Red Hat Rot“. Mit wenigen Ausnahmen sollte im gesamte Bildmaterial von Red Hat die Farbe red-50 enthalten sein, um eine Verbindung zu unserer Marke herzustellen.

In Bildmaterialien und Oberflächen von Red Hat werden auch häufig Schwarz-, Weiß- und Grautöne als Hintergrundfarben verwendet, damit der restliche Inhalt hervorgehoben wird. Es gibt 10 neutrale Grautöne zwischen Schwarz und Weiß, die Flexibilität bei der Gestaltung von Tiefe, Schatten und hellen und dunklen Modi in Benutzeroberflächen ermöglichen.

Einsatz von Weißraum

In Einklang mit unserer Markenpersönlichkeit legt Red Hat bei seinen Designs Wert auf offene, luftige Layouts. Unabhängig von den im Bildmaterial genutzten Farben sollte der Weißraum Priorität haben. Einfache, ordentliche Layouts lenken die Aufmerksamkeit auf das, was wichtig ist.

Bewusster Einsatz von Rot

Rot ist eine starke Farbe. Lenken Sie daher mit roten Farbtupfern die Aufmerksamkeit auf die zentralen Elemente des Bildmaterials, anstatt große Flächen mit Red Hat Rot zu füllen.

Wenn Sie auf wichtige Alerts oder Fehlermeldungen aufmerksam machen wollen, sollten Sie Danger Orange statt Red Hat Rot verwenden. Weiter unten finden Sie weitere Informationen zu den Statusfarben.

Hellere und dunklere Farbtöne als Akzente

Mit helleren und dunkleren Rot-, Schwarz- und Weißtönen können Sie Schatten und Akzente erzeugen oder große Flächen wie Hintergründe füllen. Dadurch sticht das Red Hat Rot besser hervor.

Verwenden Sie einen neutralen Hintergrund mit viel Weißraum.

Heben Sie wichtige Elemente mit red-50 hervor, um die Aufmerksamkeit darauf zu lenken.

Füllen Sie nie das gesamte Bildmaterial mit red-50. Rot ist eine starke Farbe. Versuchen Sie es mit einem neutralen Hintergrund, bevor Sie eine Fläche mit Red Hat Rot ausfüllen.

Verwenden Sie nie ein helleres oder dunkleres Rot als einzigen Rotton in Ihrem Bildmaterial. Verwenden Sie immer Red Hat Rot.

Verwenden Sie red-50 nicht für alle Elemente eines Designs. Wenn alle Elemente hervorgehoben werden, sticht nichts heraus.

Unsere Kernfarben sind die Farben, für die wir bekannt sind. In manchen Situationen müssen wir diese Farbpalette aber verlassen. Unsere sekundäre Farbpalette besteht aus 5 Farbfamilien: Orange, Gelb, Blaugrün, Blau und Purpur.

Erfolgreiche Red Hat Bildmaterialien setzen Farben reduziert und stilisiert ein. Dadurch bleibt das Bildmaterial einfach, und das Red Hat Rot sticht besser heraus. Verwenden Sie bei Projekten neben unseren Kernfarben maximal 2 sekundäre Farbfamilien.

Wenn Sie nicht sicher sind, welche sekundären Farben Sie wählen sollen, können Sie eine unserer Farbkollektionen verwenden. Die Farbfamilien, die in diesen Kollektionen kombiniert werden, ergänzen sich gegenseitig und spiegeln die Marke Red Hat weiterhin getreu wieder.

Verwenden Sie maximal 2 sekundäre Farbfamilien in Ihrem Bildmaterial. Diese Illustration verwendet nur Rot, Orange und Purpur.

Verwenden Sie nie mehr als 2 sekundäre Farbfamilien. Das wirkt zu unruhig.

Verwenden Sie in Ihrem Bildmaterial immer red-50 als Akzent, um eine Verbindung zur Marke Red Hat herzustellen, selbst wenn das Red Hat Logo nicht zu sehen ist.

Erstellen Sie keine Red Hat Assets, die nur sekundäre Farben verwenden.

Verwenden Sie zur Differenzierung einen Mix aus hellen und dunklen Farben in Ihrem Bildmaterial. Diese Diagramme verwenden red-50, blue-70 und orange-30.

Vermeiden Sie es, in einem Bildmaterial zu viele Farben mit der gleichen Sättigung zu verwenden. Die Farben sind sich zu ähnlich und stellen keine Hierarchie her.

Heben Sie die wichtigen Teile Ihres Bildmaterials hervor, indem Sie weniger kräftige Farben für den Hintergrund verwenden.

Verwenden Sie kräftige Farben nie als Hintergrundfarben. Dies kann erdrückend wirken.

Zusätzlich zu unseren Kern- und sekundären Farben haben wir 2 Zusatzfarbpaletten, mit denen sich bestimmte Dinge bei Bedarf zielgerichteter ausdrücken lassen. Diese Farben sollten nur für den vorgesehenen Zweck verwendet werden, nicht als sekundäre Farben.

Personenpalette

Unser Ziel ist es, Menschen immer genau so darzustellen, wie sie im richtigen Leben sind. Dazu gehört auch das Verwenden realistischer Hauttöne in Illustrationen, unabhängig davon, welche Farbpalette für den Rest der Illustration verwendet wird. Erfahren Sie mehr über die Darstellung von Menschen.

Wählen Sie für jede dargestellte Person 1 Hautfarbtonfamilie. Hautfarbtonfamilien werden anders als traditionelle Farben beschrieben. Kühle Hautfarben tendieren zu Rosatönen, während warme Hautfarben zu Gelb- und Brauntönen tendieren.

Verwenden Sie die Farben der Personenpalette nur für die Hauttöne der in Illustrationen dargestellten Menschen.

Verwenden Sie die Farben der Personenpalette nie für andere Zwecke.

Wählen Sie für eine illustrierte Person entweder kühle oder warme Farbtöne.

Verwenden Sie für eine illustrierte Person nie kühle und warme Farbtöne gleichzeitig.

Statuspalette

Wenn wir in unserem Bildmaterial auf eine Gefahr oder einen Erfolg aufmerksam machen wollen, verwenden wir Statusfarben. Diese Farben werden meist in Schnittstellen verwendet, können aber bei Bedarf auch für andere Anwendungen eingesetzt werden. Danger-Farbtöne sollten nur verwendet werden, um auf einen Fehler oder ein Problem aufmerksam zu machen. Success-Farbtöne sollten verwendet werden, um darzustellen, dass etwas erfolgreich abgeschlossen wurde.

Hinweis: Wenn Grün absolut notwendig für das Design ist, etwa für eine DEI-Community (Diversity, Equity and Inclusion) oder in Bildmaterial zu Nachhaltigkeit, können Success-Farbtöne auch für diese Fälle verwendet werden.

Verwenden Sie Farben der Statuspalette nur, um auf wichtige Informationen hinzuweisen, etwa Fehler oder Erfolge.

Verwenden Sie Farben der Statuspalette nie für andere Elemente des Bildmaterials.

Verwenden Sie Statusfarben als Akzent, um die Aufmerksamkeit auf etwas Bestimmtes zu lenken.

Verwenden Sie Statusfarben nie als Hauptfarbe oder als Hintergrundfarbe Ihres Bildmaterials.

Wir sind davon überzeugt, dass Umgebungen und IT-Erlebnisse inklusiv gestaltet werden müssen. Unser Fokus auf Inklusion bedeutet, dass wir die Zugänglichkeit aller Red Hat Assets – Präsentationsfolien, Dokumente, Webseiten, Produktschnittstellen, Social-Media-Posts und mehr – für alle Nutzenden sicherstellen.

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 zum Einsatz von Farbe im Bildmaterial zu treffen.

Kontrast wird als Verhältnis gemessen und beschreibt den Unterschied in der wahrgenommenen Helligkeit zwischen Vordergrund- und Hintergrundfarbe. 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 Material, dessen Information für das Verständnis der Inhalte entscheidend ist, muss den Kontrastverhältnissen der Stufe AA des WCAG-Standards (Web Content Accessibility Guidelines) entsprechen.

Für Red Hat Assets bedeutet das, dass Text in kleiner Schriftgröße (17pt oder kleiner) ein Kontrastverhältnis von mindestens 4,5:1 haben muss. 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.

Menschen mit Farbenblindheit nehmen Farbunterschiede anders als die meisten Menschen wahr. Dadurch können sie Grafiken, die sich nur durch Farben unterscheiden, schwer voneinander unterscheiden, insbesondere in Diagrammen oder Oberflächen.

Die häufigsten Formen von Farbenblindheit sind 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 Objekte zu differenzieren. Mit Tools wie Color Oracle können Sie Farbenblindheit simulieren und ein besseres Gefühl dafür bekommen, wie Ihr Bildmaterial für jemanden aussieht, der farbenblind ist.

red-50 erfüllt die Farbkontraststandards auf black.

white erfüllt die Farbkontraststandards auf teal-60.

red-50 erfüllt die Farbkontraststandards auf blue-10.

white erfüllt die Farbkontraststandards auf purple-60.

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

white auf teal-40 erfüllt die Farbkontraststandards nicht.

red-50 auf blue-70 erfüllt die Farbkontraststandards nicht.

white auf purple-30 erfüllt die Farbkontraststandards nicht.

Die Assets und Designsysteme bei Red Hat verwenden zwar alle dieselbe Farbpalette, einige wenden aber die Farben für bestimmte Anforderungen auf unterschiedliche Weise an.

Farbe in Präsentationen

Eine Präsentation kann der erste Kontakt eines Kunden oder Partners mit der Marke Red Hat sein. Präsentationen sollten immer dem Look-and-Feel von Red Hat entsprechen und die Best Practices für Barrierefreiheit erfüllen. Unsere Präsentationsvorlage enthält Vorschläge für Farbkollektionen.

Red Hat Präsentationsvorlage (Red Hat Zugangsdaten erforderlich)

Farbe in Illustrationen

Wir verwenden Illustrationen, um komplexe Technologien zu visualisieren oder detaillierte Ideen zu beschreiben. Mithilfe einer Palette von Grundfarben mit Rot als Akzent stellen Sie sicher, dass Illustrationen weiterhin mit Red Hat assoziiert werden. Der Einsatz von sekundären Farben kann Ihnen aber helfen, den richtigen Farbton für Ihre Story zu schaffen.

Red Hat Illustrationsstandards

Farbe in UX-Elementen

Red Hat Webinhalte wenden unsere Farbpalette über Designtoken an und folgen den Standards für ein barrierefreies Internet durch ein bildschirmoptimiertes Bilderlebnis.

Zur Seite ux.redhat.com