Grauer Farbverlauf: neutrale Codes, die nicht langweilen

Ein grauer Farbverlauf wirkt nicht mehr langweilig, sobald seine Grautöne getönt sind. Reine Neutralgrautöne, mit gleichen Anteilen Rot, Grün und Blau, wirken flach und digital. Schiebst du sie leicht ins Kühle, Richtung Blau, bekommst du Nebel, Schiefer und Stahl; schiebst du sie ins Warme, Richtung Braun, bekommst du Stein, Beton und Zinn. Füge Licht hinzu, das irgendwoher kommt, und eine Akzentfarbe, und Grau wird ruhig, modern und leise selbstbewusst. Codes für jedes folgen.

Warmes Grau oder kühles Grau: wähle eins

Kühle Grautöne wirken technisch, sauber und präzise. Warme Grautöne wirken architektonisch, natürlich und weich. Beide funktionieren allein wunderbar. Zusammen in einem Verlauf streiten sie, und das Ergebnis sieht aus wie ein Schmierfleck. Sieh dir die Farbfelder unten paarweise an: Die obere Reihe neigt zu Blau, die untere zu Braun, und der Unterschied ist klein, aber offensichtlich, sobald du ihn gesehen hast.

Kühle und warme graue Farbverlauf Codes

Nebel und Schiefer sind das kühle Paar: Nebel für helle, luftige Layouts und Schiefer für ernste dunkle. Sturm fügt eine beleuchtete Wolke hinzu, die einem dunklen Grau echte Tiefe gibt. Stein und Beton sind das warme Paar, näher an Baumaterialien, und Graphit ist das fast Schwarz, das du statt einfachem Schwarz nutzen kannst.

Gehst du noch dunkler, setzen die Codes für den schwarzen Farbverlauf bei Graphit an. Für Designs aus einem Farbton in vielen Helligkeitsstufen sieh dir den monochromen Farbverlauf an.

Silber, Stahl und andere metallische graue Verläufe

Metall ist keine Farbe, es ist eine Spiegelung. Ein Silber Farbverlauf funktioniert durch ein scharfes, helles Band zwischen dunkleren Stopps, so wie Licht eine gewölbte Fläche trifft. Gunmetal nutzt denselben Trick eine Stufe dunkler, und gebürsteter Stahl fügt feine parallele Linien hinzu. Sie sind kräftig, nutze sie also für ein Abzeichen, eine Überschriftenplatte oder ein einzelnes Feld statt für eine ganze Seite.

Gebürsteter Stahl wirkt am besten, wenn die Linien über einem weichen beleuchteten Verlauf liegen statt allein. Zwei Ebenen reichen:

.steel {
  background-color: #b9bec4;
  background-image:
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.07) 0 1px, transparent 1px 3px),
    linear-gradient(135deg, #9ea4ab 0%, #e8eaed 45%, #b9bec4 55%, #7f868e 100%);
}

Grau plus eine Farbe

Wenige Hintergründe setzen eine einzelne kräftige Farbe so gut in Szene wie Grau. Der Akzent wirkt vor Neutral heller als vor jeder anderen Farbe, ein wenig geht also weit: ein Wort, ein Button, eine Zeile. Wähle den Akzent nach Branche und Stimmung.

Komplette Schemata nach diesem Prinzip findest du unter Tech-Farbpaletten und neutrale Farbpaletten.

Grau, das bewusst wirkt

Banding verdient eine eigene Warnung. Grautöne haben keinen Farbton, der das Auge ablenkt, deshalb ist jede Stufe in einem glatten Verlauf sichtbar, besonders auf großen Bildschirmen und nach Kompression. Eine leichte Rauschschicht verbirgt es; CSS-Rauschtextur hat ein Snippet, und Verlaufs-Banding erklärt, warum es passiert.

Graue Verläufe auf Websites und im Dark Mode

Im Web leisten graue Verläufe ihre beste Arbeit leise. Ein Nebel-Verlauf hinter einem Funktionsabschnitt trennt ihn ohne harte Kante von einer weißen Seite. Im Dark Mode gibt ein Graphit-Verlauf, der zur Oberkante einer Karte leicht aufhellt, ihr Tiefe, wo ein flaches Grau wie ein Loch wirken würde. Halte den Unterschied zwischen den Stopps klein, wenige Prozent Helligkeit, damit der Verlauf als Licht gelesen wird statt als Dekoration. Dark Mode Design behandelt die weiteren Regeln für dunkle Oberflächen, von Flächenfarben bis Kontrast.

Graue Farbverlauf Hintergründe in der Praxis

Architekten, Ingenieurbüros und Softwarefirmen nutzen Grau, weil es die Arbeit sprechen lässt. Ein Schiefer-Verlauf mit weißer Schrift und einem blauen Akzent lässt eine Projektankündigung präzise wirken; ein warmer Stein-Verlauf mit Graphit-Schrift lässt ein Portfolio-Cover haptisch wirken. Branding für Architekturbüros zeigt, wie weit eine zurückhaltende Palette tragen kann.

Bei dezenten Hintergründen zahlt sich ein Designsystem aus. In Gradiently trägt ein grauer Mark seine eigene Körnung, die Banding fernhält, und Automatische Farbe wählt Zeile für Zeile helle oder dunkle Schrift, während sich das Grau über das Bild verschiebt.