Gray vs. Grey: Schreibweise, Farbtöne und Farbcodes

Heißt es „gray" oder „grey"? Die Antwort hängt vollständig davon ab, auf welcher Seite des Atlantiks Sie sich befinden – und welche Schreibweise Sie im Code verwenden, abhängig davon, welcher Konvention Sie folgen, kann unterschiedliche Ergebnisse liefern. Dies ist eine jener Farbfragen, bei denen die Schreibweise in technischen Kontexten tatsächlich eine Rolle spielt, obwohl beide Wörter dasselbe visuelle Phänomen beschreiben: das achromatische Neutral zwischen Schwarz und Weiß sowie alle nahezu neutralen warmen und kühlen Varianten, die sich darum gruppieren.

Dieser Artikel behandelt die Schreibweisfrage, die CSS-Regeln, die technische Realität dessen, was eine Farbe zu „Grau" macht, einen praktischen Leitfaden zur Wahl zwischen warmen und kühlen Grautönen sowie eine Referenztabelle wichtiger Grau-Hex-Codes über das gesamte Helligkeitsspektrum.

Amerikanische vs. britische Schreibweise: Gray vs. Grey

Der Unterschied in der Schreibweise ist eines der deutlichsten Beispiele für die Divergenz zwischen amerikanischem und britischem Englisch:

Beide Schreibweisen sind alt. Das Wort geht auf altenglisches grǣg zurück, und sowohl „gray" als auch „grey" erscheinen in englischen Texten aus dem Mittelalter. Die Divergenz, welche Schreibweise dominierend wurde, folgte dem allgemeinen Muster, dass das amerikanische Englisch sich auf eine Variante standardisierte, während das britische Englisch eine andere beibehielt.

Eine hilfreiche Eselsbrücke: grAy ist amerikanisch, grEy ist europäisch. Die Vokale A und E entsprechen den Kontinenten.

Im alltäglichen Gebrauch ist keine Schreibweise falsch – beide beziehen sich auf dieselbe Farbe. Stilrichtlinien und Markenrichtlinien legen in der Regel eine Schreibweise für Konsistenz fest. Wenn Sie für ein internationales Publikum ohne klare regionale Präferenz schreiben, hat „gray" in Web-Kontexten einen leichten Vorteil, da es die bevorzugte Schreibweise der CSS-Spezifikation ist (dazu unten mehr).

CSS-Benannte Farben: Gray ist der Standard

Als die HTML- und CSS-Farbstandards festgelegt wurden, musste entschieden werden, welche Schreibweise kodiert wird. Beide Schreibweisen werden in CSS akzeptiert, beziehen sich aber nicht immer auf dieselbe Farbe – was ein subtiles technisches Risiko schafft.

Die CSS-Grau-Familie

CSS enthält mehrere benannte Graufarben. Hier ist der vollständige Satz, mit beiden Schreibweisen, wo anwendbar:

Ein wichtiger Hinweis: Bei den meisten Verbindungen (lightgray, darkgray, dimgray, slategray) existieren beide Schreibweisen und beziehen sich auf identische Hex-Werte. Für das Basis-gray / grey werden beide auch auf #808080 abgebildet. Der Unterschied ist vor allem für Entwickler relevant, die sich auf Browser-Standardwerte verlassen – in der Praxis verarbeitet CSS beide Schreibweisen korrekt.

Die wichtigere technische Regel: Bei Hex-Codes und RGB-Werten ist die Schreibweise „gray" vs. „grey" irrelevant – nur die Zahlen zählen. #808080 ist #808080, egal wie Sie es nennen.

Was macht Grau zu „Grau"? Die technische Realität

Ein reines Grau – technisch als achromatische Farbe bezeichnet – hat gleiche Werte in allen drei RGB-Kanälen. Wenn Rot, Grün und Blau identisch sind, ergibt sich ein neutrales Ergebnis ohne Farbton:

In HSL-Begriffen hat jedes wirklich achromatische Grau 0 % Sättigung und einen undefinierten Farbton. Der Helligkeitsprozentsatz bestimmt, wie hell oder dunkel es ist.

Die meisten „grauen" Farben im realen Design sind jedoch nicht vollkommen achromatisch – sie tragen leichte Farbtöne, die sie „warm" oder „kühl" machen.

50 Grautöne: Wichtige Hex-Codes über das Spektrum

Eine praktische Referenz, die den gesamten Bereich von nahezu Weiß bis nahezu Schwarz abdeckt:

Das wichtige Barrierefreiheitsgrau: #767676

Dieses spezifische Grau hat im Webdesign eine überproportionale Bedeutung: Es ist das hellste Grau, das ein Kontrastverhältnis von 4,5:1 gegenüber Weiß #FFFFFF erreicht – was dem WCAG-AA-Minimum für normalen Text entspricht. Jedes Grau, das heller als #767676 ist, besteht WCAG AA als Text auf weißem Hintergrund nicht.

Das bedeutet, dass das CSS-gray (#808080) technisch gesehen WCAG AA nicht besteht – es erreicht nur etwa 3,95:1 Kontrastverhältnis gegenüber Weiß. Obwohl es „grau" heißt und relativ dunkel wirkt, ist es nicht dunkel genug für barrierefreien Fließtext. Verwenden Sie #767676 oder dunkler für jeden Text, der barrierefrei sein soll.

Kühles vs. warmes Grau: Die eigentliche Designerfrage

In der Praxis ist der wichtigere Unterschied für Designer nicht „gray vs. grey" – sondern warmes Grau vs. kühles Grau.

Kühle Grautöne neigen zu Blau, Grün oder Lila. Sie wirken schlank, modern und klinisch. Sie passen gut zu anderen kühlen Farben und erzeugen eine tech-orientierte Ästhetik.

Warme Grautöne neigen zu Rot, Orange oder Gelb. Sie wirken natürlich, zugänglich und erdverbunden. Sie passen gut zu Holztönen, Terrakotta und anderen warmen natürlichen Materialien.

Neutrale Grautöne – perfekt achromatisch ohne Farbton – liegen zwischen beiden. In der Praxis werden wirklich neutrale Grautöne je nach Umgebungsfarben unterschiedlich wahrgenommen (ein Kontexteffekt, der als Simultankontrast bekannt ist).

Warm vs. kühl: Graubeispiele

Warme vs. kühle Grautöne am Hex-Code erkennen

Schauen Sie sich die RGB-Werte an: - Wenn Blau am höchsten unter den drei Kanälen ist → kühles Grau - Wenn Rot oder Grün am höchsten ist → warmes Grau - Wenn alle drei gleich sind → neutrales Grau

Zum Beispiel: - #708090 = rgb(112, 128, 144) → Blau (144) am höchsten → kühles Grau - #9B9B8A = rgb(155, 155, 138) → Blau (138) am niedrigsten → warmes Grau - #808080 = rgb(128, 128, 128) → alle gleich → neutrales Grau

Grau im modernen Webdesign

Grau ist wohl die wichtigste Farbe im Webdesign. Es erscheint in: - Seitenhintergründen – Hellgrau statt Weiß reduziert die Augenbelastung und erzeugt visuelle Hierarchie - UI-Komponenten – Rahmen, Trennlinien, Eingabefeldhintergründe und Kartenhintergründe sind fast universell grau - Typografie – Fließtext im Web ist oft dunkelgrau statt reines Schwarz, was die Härte reduziert - Deaktivierten Zuständen – Ausgegraute interaktive Elemente signalisieren universell Nicht-Verfügbarkeit

Praktische Grautöne für Web-Design-Systeme

Die Tailwind-CSS-Graupalette (#F9FAFB bis #030712) hat sich als weit verbreitete Referenz für Web-Design-Systeme etabliert. Nutzen Sie den Shade-Generator, um eine Tailwind-ähnliche 50–950-Graupalette aus einem beliebigen Basisgrau zu erstellen.

Dunkelmodus-Grau-Strategie

Das Dunkelmodus-Design erfordert sorgfältige Grauauswahl. Der Versuchung, reines Schwarz #000000 als Dunkelmodus-Hintergrund zu verwenden, sollte in den meisten Fällen widerstanden werden – reines Schwarz erzeugt unangenehm hartes Kontrastverhältnis mit weißem Text. Stattdessen:

• Dunkelmodus-Hintergründe funktionieren am besten im Bereich #121212 bis #1E1E1E – dunkel, aber nicht schwarz
• Dunkelmodus-Oberflächen (Karten, Dialoge) sollten ein oder zwei Stufen heller als der Hintergrund sein: #2C2C2C bis #3A3A3A
• Text auf dunklen Hintergründen funktioniert am besten in warmen Off-Whites (#E8E8E8 bis #F5F5F5) statt reinem Weiß

Grautöne zwischen Farbmodellen konvertieren

Für jedes Grau ist die Konvertierung unkompliziert, da die achromatische Eigenschaft dafür sorgt, dass sich CMYK und andere Modelle vorhersehbar verhalten:

Für wirklich achromatische Grautöne (gleiche R-, G-, B-Werte) ist der CMYK-Wert immer C:0 M:0 Y:0 K:{X}, wobei K gleich 100 minus dem Helligkeitsprozentsatz ist. Verwenden Sie den Farbkonverter, um warme und kühle Grautöne mit Nicht-Null-Farbton zu verarbeiten, bei denen CMYK-Werte komplexer werden.

Wichtigste Erkenntnisse

• Schreibweise: „Gray" ist amerikanisches Englisch; „grey" ist britisches Englisch. In CSS sind beide Schreibweisen für benannte Farben gültig; die meisten verweisen auf identische Hex-Werte. Das Basis-gray und grey entsprechen beide #808080
• Technische Definition: Ein echtes achromatisches Grau hat gleiche RGB-Kanäle (R=G=B) und 0 % HSL-Sättigung. Jedes Ungleichgewicht in den Kanälen erzeugt warme (Rot/Grün höher) oder kühle (Blau höher) Grautöne
• Kritischer Barrierefreiheits-Schwellenwert: #767676 ist das hellste Grau, das WCAG AA (4,5:1) als Text auf Weiß besteht. CSS-gray #808080 besteht nicht – es erreicht nur ~3,95:1 Kontrast
• Warm vs. kühl erkennen: Wenn der Blaukanal am höchsten ist → kühles Grau. Wenn Rot/Grün am höchsten ist → warmes Grau. Gleiche Kanäle → neutral
• Webdesign: Grau-Hintergründe, Rahmen und Textvarianten bilden die strukturelle Grundlage fast jeder Web-Benutzeroberfläche. Verwenden Sie Hellmodus-Hintergründe um #F5F5F5 und Dunkelmodus-Hintergründe zwischen #121212 und #1E1E1E
• Nutzen Sie den Shade-Generator, um eine vollständige Graupalette zu erstellen, und den Konverter, um beliebige Grautöne in CMYK, HSL, RGB oder OKLCH zu übersetzen