Grau steht für Gleichgewicht, Neutralität und Raffinesse. Zwischen Weiß und Schwarz ist es eine der vielseitigsten Farben im Design.
Grau ist ein Neutralton zwischen Weiß und Schwarz. Es steht für Gleichgewicht, Neutralität und Raffinesse und ist zentral für Struktur, Typografie und Flächen in der UI.
In Webdesign, Branding und digitalen Interfaces wird es genutzt, um Eleganz einzubringen, Lesbarkeit zu verbessern und klare Kompositionen zu schaffen, in denen der Hauptinhalt ohne Ablenkung hervortritt.
Grau wird häufig mit Konzepten wie diesen assoziiert:
Die Bedeutung kann je nach Kontext variieren, doch meist vermittelt Grau Gelassenheit, Objektivität und Raffinesse.
In der Farbpsychologie vermittelt Grau Ruhe, Stabilität und Rationalität. Als nicht dominante Farbe reduziert es visuelle Unruhe und unterstützt Konzentration – deshalb gehört es zu den am häufigsten genutzten Farben in digitalen Interfaces und Technologieprodukten.
Die Emotionen, die es oft vermittelt, sind:
Bei Übernutzung kann es kalt wirken; daher wird es oft mit lebendigeren Farben kombiniert, um Dynamik zu bringen.
Grau ist in praktisch jeder designbezogenen Disziplin präsent. Man findet es besonders in:
Seine Neutralität macht es zu einer ausgezeichneten unterstützenden Farbe für praktisch jedes Projekt.
Zu den bekanntesten HTML- und CSS-Farben gehören:
| Name | Muster | Hex | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Gainsboro | |||||
| LightGray | |||||
| Silver | |||||
| DarkGray | |||||
| Gray | |||||
| DimGray | |||||
| SlateGray | |||||
| LightSlateGray | |||||
| DarkSlateGray |
Von den hellsten Grau- bis zu Anthrazittönen bringt jede Variante eine andere Persönlichkeit in die Oberfläche.
HTML-FarbenNicht alle Grautöne wirken gleich. Ihre chromatische Temperatur verändert die Atmosphäre einer Oberfläche vollständig und ist ein Schlüsselkonzept bei der Arbeit mit neutralen Paletten.
Sie haben einen leichten Braun-, Rot- oder Gelbstich und schaffen einladendere Umgebungen. Sie passen gut zu handwerklichem Branding, physischem E-Commerce und Interfaces mit menschlichem Ton.
Sie enthalten Blau- oder Grünnuancen und wirken technologischer und minimalistischer. Sie sind in Software, Dashboards und digitalen Produkten üblich.
Sie werden stark in Designsystemen wie Material Design, Tailwind CSS oder Bootstrap genutzt. Skalen wie gray, slate, zinc oder cool gray helfen, Typografie, Rahmen und Flächen konsistent zu bauen.
Viele Designer suchen nach Begriffen wie gray color palette, neutral gray, slate gray oder cool gray. Diese Unterschiede zu verstehen hilft, die richtige Skala zu wählen und Grau effektiver in der UI einzusetzen.
Grau lässt sich dank seiner Neutralität mit praktisch jeder Farbe kombinieren. Häufig genutzte Kombinationen sind:
#FFFFFF#111111#2563EB#16A34A#FFA500#FFD700#EF4444#7C3AED#EC4899#DAA520Damit lassen sich elegante, moderne und leicht lesbare Interfaces gestalten.
Grau hat keine Komplementärfarbe, weil es zu den achromatischen Farben gehört – zusammen mit Weiß und Schwarz. Sein Hauptvorteil: Es kann praktisch jede chromatische Kombination ausbalancieren, ohne die Harmonie des Designs zu stören.
Grau wirkt als Neutralton innerhalb jeder chromatischen Harmonie. Die Harmonien auf dieser Seite nutzen dieselbe Logik wie der Farbkreis und der Palettengenerator von Matizly.
Weicht Übergänge zwischen benachbarten Farben und reduziert visuelle Sättigung.
Die Variationen werden mit denselben Funktionen des Matizly-Studios erzeugt. Bei Grautönen sind Helligkeitsskalen sowie warme oder kalte Nuancen besonders nützlich:
Helle Grautöne
Diese Skalen helfen, sekundäre Typografie, Rahmen, Disabled-Zustände und Flächen konsistent zu gestalten.
Paletten mit Grau vermitteln Eleganz, Professionalität und Minimalismus. Beliebte Kombinationen sind:
3 Farben
3 Farben
3 Farben
3 Farben
3 Farben
3 Farben
Diese Kombinationen sind in Webdesign, mobilen Apps und Corporate Branding üblich.
FarbpalettenGrau spielt eine sehr wichtige Rolle für die Barrierefreiheit von Interfaces.
Helle Grautöne können auf weißen Hintergründen schwer lesbar sein, während dunkle Grautöne meist ausgezeichneten Kontrast bieten – ohne die visuelle Härte von reinem Schwarz.
Die Kontrastprüfung nach WCAG hilft, barrierefreiere Erlebnisse zu schaffen.
Dunkelgrauer Text / weißer Hintergrund
10.31:1AA ✓
Weißer Text / dunkelgrauer Hintergrund
10.31:1AA ✓
Mittelgrauer Text / weißer Hintergrund
4.83:1AA ✓
Weißer Text / Slate-Hintergrund
7.58:1AA ✓
Grau ermöglicht elegante, dezente Verläufe. Häufige Kombinationen sind:
#6B7280 → #FFFFFF#6B7280 → #111111#6B7280 → #2563EB#6B7280 → #C0C0C0#6B7280 → #16A34A#6B7280 → #7C3AEDDiese Verläufe erscheinen häufig in Dashboards, mobilen Apps, Technologieprodukten und minimalistischen Interfaces.
VerlaufsgeneratorGrau ist eine der wichtigsten Farben im Interface-Design. Seine Fähigkeit, Informationen visuell zu ordnen, macht es in praktisch jedem modernen Designsystem unverzichtbar.
Grau steht für Gleichgewicht, Neutralität, Professionalität und Stabilität. Es vermittelt Gelassenheit und Raffinesse.
Grau harmoniert sehr gut mit Weiß, Schwarz, Blau, Grün, Orange, Gelb, Rot, Violett und Gold.
Grau hat keine Komplementärfarbe, weil es zu den achromatischen Farben gehört – zusammen mit Weiß und Schwarz.
Sie wird häufig in Webdesign, Benutzeroberflächen, mobilen Apps, Corporate Branding, Technologie, Architektur und Industriedesign genutzt.
Warme Grautöne haben einen leichten Braun-, Rot- oder Gelbstich und wirken einladender. Kalte Grautöne enthalten Blau- oder Grünnuancen und wirken technologischer und minimalistischer. Neutrale Grautöne sind die Basis vieler Designsysteme.
Wähle eine Farbe und kopiere Hex, RGB, HSL oder OKLCH mit Schattierungen.
Jetzt ausprobierenEntdecke fertige Paletten und speichere Favoriten auf diesem Gerät.
Jetzt ausprobierenEntdecke Harmonien auf einem interaktiven Rad und baue ausgewogene Paletten.
Jetzt ausprobieren