20 coole Grautöne Farbpaletten & Hex-Codes – Inspiration für modernes Design

Cool grey liegt in diesem süßen Punkt zwischen frisch und gemütlich: modern genug für die Benutzeroberfläche, neutral genug für den Druck und ruhig genug für den Innenraum. Es ist ein go-to, wenn Sie Klarheit ohne die Härte von reinem Schwarz-Weiß wollen.

Im Folgenden finden Sie 20 kuratierte Ideen für eine kühle graue Farbpalette mit hexagonalen codes, sowie kurze Tipps zum Paaren von Akzenten und zur Verwendung dieser Töne in echten Designarbeiten.

Warum coole graue Farbschemata So gut funktionieren

Kühle graue Farbschemata sind zuverlässig, weil sie Struktur ohne anspruchsvolle Aufmerksamkeit bringen. Sie schaffen eine saubere Hierarchie für Typografie, Benutzeroberflächenkomponenten und layouts, während der Gesamtton unterschiedlich bleibt.

Im Gegensatz zu warmen Grauen, die beige treiben können, bleiben kühle Grauen frisch und zeitgenössisch. Das macht sie besonders stark für Tech-Branding, datenstarke dashboards und minimalistisches redaktionelles design.

Sie sind auch flexibel: Sie können sie rein neutral für ein Premium-Gefühl halten oder einen einzigen Akzent (blau, blau, kupfer, blush) einführen, um die Stimmung zu steuern, ohne das gesamte system neu zu gestalten.

20+ Cool Grau Farbpalette Ideen (mit HEX Codes)

1) Arktischer Beton

Sechskant:#f2f4f7#d7dde4#aab3bf#6b7480#2f343b

Stimmung:sauber, ruhig, professionell

Am besten für:SaaS-Dashboard-Benutzeroberfläche

Sauber und luftig wie Morgenlicht auf Beton, diese kühlen Grautöne fühlen sich ruhig und selbstbewusst an. Der mix liest sich auf Bildschirmen klar, mit genügend Tiefe für Diagramme, Navigation und Zustände. Für einen polierten look, kombinieren Sie es mit einem einzigen kühlen Akzent (blau oder eisblau) und behalten Sie die Typographie Holzkohle statt reines Schwarz. Benutzungstipp: Reservieren Sie#2f343b für Überschriften und Schlüsselnummern, damit die Schnittstelle leicht bleibt. Es passt sich auch gut an, ebenso wie ein kühles graues Farbschema für datenstarke layouts.

Bildbeispiel von Arktischen Beton erzeugt mit media.io

Media.io

Media.io ist ein Online-KI-Studio zum Erstellen und Bearbeiten von Videos, Bildern und Audios in Ihrem browser.

Jetzt kostenlos ausprobieren

2) Stahlnebel

Sechskant:#eef1f4#cbd2da#9aa3ad#59616b#1f2328

Stimmung:Elegant, industriell, modern

Am besten für:Technische Markenidentität

Elegant und leicht industriell, diese kühle graue Farbpalette erinnert an gebürsteten Stahl und regnerische Bürgersteige. Es liefert einen starken Kontrast, ohne sich rau anzufühlen, was dazu beiträgt, dass logos und Wortzeichen raffiniert bleiben. Fügen Sie einen einzigen elektrischen Akzent für calls-to-action hinzu oder halten Sie es rein neutral für einen Premium-Look. Benutzungstipp: Lassen Sie#1f2328 das logo verankern, während#eef1f4 als großzügiger negativer Raum bleibt.

Bildbeispiel von Stahlnebel erzeugt mit media.io

3) Gletscher Büro

Sechskant:#f6f8fb#dfe6ee#b8c2ce#7a8796#3b4450

Stimmung:Hell, organisiert, minimal

Am besten für:Präsentationsvorlagen

Hell und geordnet fühlen sich diese kühlen grauen Farben wie ein glasiger Gletscher mit scharfen Kanten an. Sie sorgen dafür, dass Folien geräumig aussehen und Ihnen trotzdem eine klare Hierarchie für Überschriften, Diagramme und callouts geben. Kombinieren Sie es mit einem gedämpften navy oder Schiefer für Betonung und vermeiden Sie warme Orangen, die den kühlen Unterton bekämpfen können. Benutzungstipp: Verwenden Sie#dfe6ee für Abschnittsbrüche, damit das deck ohne schwere Trennwände zusammenhängend bleibt.

Bildbeispiel von glacier office generiert mit media.io

4) Silbersalbei

Sechskant:#f3f5f6#d2d9d8#a9b5b0#6f817a#2e3a35

Stimmung:Natürlich, beruhigend, raffiniert

Am besten für:Spa-und Wellnessverpackungen

Weich und botanisch, diese kühle graue Mischung deutet auf silberbestäubte Salbieblätter hin. Die sanften grün-grauen Noten machen die Verpackung ruhig, sauber und vertrauenswürdig. Kombinieren Sie es mit mattweißem und subtilem Prägen oder fügen Sie eine gedämpfte Goldfolie hinzu, wenn Sie ein Premium-Finish wünschen. Gebrauchstipp: Behalten Sie den text der Zutaten in#2e3a35 für Lesbarkeit, ohne die ruhige Atmosphäre zu verlieren.

Bildbeispiel von silver sage generiert mit media.io

5) Hafenmorgen

Sechskant:#f0f3f7#c8d2e0#8ea2bb#4e647a#26313b

Stimmung:küstlich, stetig, frisch

Am besten für:Webseite Hero-Abschnitt

Kühl und küstlich, diese Blau-und Grautöne fühlen sich wie Nebel über einem Hafen an. Die Mitteltöne geben Ihnen genug Farbe, um einladend auszusehen und gleichzeitig professionell zu bleiben. Wenn Sie auf der Suche nach kühlen grau Farbkombinationen sind, die sich immer noch freundlich anfühlen, verwenden Sie#8ea2bb für Schaltflächen und behalten Sie den Hintergrund in#f0f3f7. Benutzungstipp: Fügen Sie subtile Verläufe von#c8d2e0 zu#f0f3f7 hinzu, um einen flachen Heldenbereich zu vermeiden.

Bild Beispiel von harbor morning generiert mit media.io

6) Graphit und Wolke

Sechskant:#f7f7f8#d9dadd#b1b3b8#575a61#222327

Stimmung:minimal, kühn, zeitlos

Am besten für:Redaktionszeitschrift layout

Mut und zeitlos, diese Neutralen erinnern an Graphitskizzen auf hellem Papier. Die Reichweite von wolkenweiß bis nahezu schwarz sorgt dafür, dass sich Typographie und Gittersysteme bewusst anfühlen. Wenn Sie eine kühle graue Farbpalette benötigen, die im Druck erstklassig aussieht, lehnen Sie sich an#222327 für Schlagzeilen und#d9dadd für großzügige Ränder. Gebrauchstipp: Verwenden Sie ein Gewicht, das schwerer ist als üblich, da Grau auf beschichtetem Material weicher lesen kann.

Bildbeispiel von Graphit und cloud generiert mit media.io

7) Mattierte Denim

Sechskant:#f4f7fb#d3dbe6#9fb0c6#5a6f8a#2b3644

Stimmung:Lässig, frisch, zugänglich

Am besten für:App-Onboarding-Bildschirme

Knackig und lässig fühlt sich dieses kühle graue Farbschema unter einem Winterhimmel wie hellgewaschener denim an. Die weicheren blues eignen sich gut für Onboarding-Ströme, wo Sie Führung ohne visuellen Druck wünschen. Kombinieren Sie mit Leerzeichen und abgerundeten Karten und verwenden Sie dann#2b3644 für klare Schritttitel. Benutzungstipp: Halten Sie die Abbildungen in zwei Tönen (#9fb0c6 und#5a6f8a), damit die Bildschirme von Schritt zu Schritt konsistent bleiben.

Bildbeispiel von frosted denim generiert mit media.io

8) Ruhig Lavendel

Sechskant:#f5f3f8#d9d3e3#b2a9c5#6f6588#2e2a3a

Stimmung:Weich, verträumt, elegant

Am besten für:Hochzeitseinladung suite

Weich und verträumt, diese kühlen Grautöne erinnern an lavender dusk und satin ribbon. Die violett-graue Mischung ist romantisch, ohne übermäßig süß zu werden, was sie hervorragend für moderne Schreibwaren macht. Kombinieren Sie es mit warmem weißem Papier und einem zarten serif und halten Sie die Verzierungen minimal, damit die Farbe atmen kann. Verwendungstipp: Drucken Sie große Blöcke in#f5f3f8 und reservieren Sie#2e2a3a für Namen und wichtige details, um den Kontrast scharf zu halten.

Bild Beispiel von quiet lavender generiert mit media.io

9) Polarpfirsich

Sechskant:#f7f4f3#dad6d6#a9a3a6#5c5960#f2b7a6

Stimmung:Warm-kühle balance, sanft, modern

Am besten für:social media Zitat-Vorlagen

Sanft und modern fühlen sich diese kühlen Grautöne wie weiche Strickwaren mit einem Rouge-Highlight an. Der Pfirsichakzent verhindert, dass die Grauen kalt aussehen, was perfekt für sympathische Inhalte ist. Kombinieren Sie sie mit einfachen geometrischen Formen und lassen Sie#5c5960 den Typ für Lesbarkeit handhaben. Verwendungstipp: Verwenden Sie den Pfirsich nur für Betonungswörter oder Symbole, damit das feed zusammenhängend bleibt.

Beispielbild eines Polar Peach, generiert mit media.io

10) Slate Teal

Sechskant: #f1f4f5 #cfd7db #95a7ad #4b666f #1f3c42

Stimmung: selbstbewusst, erfrischend, strukturiert

Am besten für: B2B-Landingpage

Selbstbewusst und erfrischend erinnern diese kühlen Grautöne an Schieferstein und tiefes Wasser. Die türkisfarbenen Grautöne verleihen Persönlichkeit, bleiben aber absolut businesstauglich. Kombiniere mit klaren Linien-Icons und viel Freiraum und nutze #1f3c42 für CTAs und Sticky Header. Tipp: Halte Formularfelder in #cfd7db, damit sie klar lesbar bleiben, ohne starke Umrisse zu benötigen.

Beispielbild von Slate Teal, generiert mit media.io

11) Winter Moss

Sechskant: #f3f6f4 #d7dfdb #aabbb1 #667a70 #2f3d37

Stimmung: erdig, ruhig, geerdet

Am besten für: Öko-Produktetikett-Design

Erdig und ruhig erinnert diese kühle Graupalette an Moos unter Frost und schattige Kiefern. Perfekt für nachhaltiges Branding, wenn natürliche Signale ohne laute Grüntöne gefragt sind. Kombiniere mit Recyclingpapier-Texturen und minimalistischen Icons, setze den Fließtext in #2f3d37 für ein geerdetes Endergebnis. Tipp: Verzichte auf reinen schwarzen Outlines und nutze #667a70 für Konturen, um die Sanftheit zu erhalten.

Beispielbild von Winter Moss, generiert mit media.io

12) Moonlit Copper

Sechskant: #f6f5f4 #d8d6d4 #a5a2a0 #555352 #b46a52

Stimmung: hochwertig, gemütlich, anspruchsvoll

Am besten für: Produktwerbung (Kreativ)

Hochwertig und gemütlich vermitteln diese kühlen Grautöne Mondlicht auf Metall mit einem warmen Kupferreflex. Das warme Akzent setzt Tiefe, während die Grundfarben modern und elegant bleiben. Für luxuriös wirkende Graukombinationen sollte #b46a52 in kleinen Highlights wie Abzeichen oder Preisschildern erscheinen. Tipp: Halte Schatten neutral (#555352), damit das Kupfer auf verschiedenen Bildschirmen nicht ins Orange kippt.

Beispielbild von Moonlit Copper, generiert mit media.io

13) Stormy Minimal

Sechskant: #fafafa #e1e2e5 #b9bbc1 #70737c #2b2d33

Stimmung: scharf, minimalistisch, kontrastreich

Am besten für: Portfolio-Website

Scharf und minimalistisch wirkt diese Grauskala wie aufbrechende Gewitterwolken im klaren Tageslicht. Der Kontrast eignet sich für Galerien und Fallstudien, bleibt aber weicher als reines Schwarzweiß. Kombiniere mit einem markanten Akzentton für Links und halte Bilder möglichst naturgetreu, damit sich die Neutraltöne nicht gegenseitig überlagern. Tipp: Verwende #e1e2e5 für Abschnittsbalken, um den Scrollfluss zu leiten, ohne starke Abgrenzung.

Beispielbild von Stormy Minimal, generiert mit media.io

14) Ink and Ice

Sechskant: #f2f6f8 #cbd7dd #8da0aa #41545e #0f1a22

Stimmung: klar, seriös, redaktionell

Am besten für: Geschäftsbericht-Design

Klar und seriös erinnern diese kühlen Grautöne an Tinte auf eisigem Papier und saubere Infografiken. Das tiefe Navy-Schwarz sorgt für Struktur in umfangreichen Dokumenten mit Tabellen, Diagrammen und Key-Quotes. Kombiniere mit zurückhaltender Fotografie und feinen Linien in #8da0aa für luftige Seiten. Tipp: Für weniger Blendung den Fließtext in #41545e setzen statt reinem Schwarz.

Beispielbild von Ink and Ice, generiert mit media.io

15) Urban Blush

Sechskant: #f6f2f4 #ded5da #b7a4ac #6e5b63 #c07b8f

Stimmung: schick, sanft, urban

Am besten für: Fashion-Lookbook

Schick und urban fühlt sich diese kühle Grau-Palette wie rosa eingefärbter Beton und Satinfutter an. Das staubige Rosa setzt Akzente, ohne die neutralen Grundtöne zu verdrängen. Kombiniere mit minimalistischen Fotoblöcken und feinen Serifen für einen Editorial-Look. Tipp: Nutze #c07b8f nur für kleine Überschriften oder Abschnittsreiter, damit das Layout edel bleibt.

Beispielbild von Urban Blush, generiert mit media.io

16) Modern Monochrome

Sechskant: #ffffff #e5e6e8 #b9bbbf #6c6f76 #101114

Stimmung: klassisch, selbstbewusst, extrem klar

Am besten für: Logo- und Icon-System

Klassisch und extrem klar wirken diese kühlen Graukombinationen wie eine Galeriewand mit perfekter Beleuchtung. Die Abstufungen von Weiß bis fast Schwarz erleichtern Standardisierung von Icons, Marken und UI-Bausteinen. Wenn die Graupalette über viele Größen skalieren soll, nutze #b9bbbf für sekundäre Linien und #101114 für Hauptelemente. Tipp: Definiere ein Grauton für deaktivierte Zustände (#6c6f76), damit das System vorhersehbar bleibt.

Beispielbild von Modern Monochrome, generiert mit media.io

17) Nordic Sand

Sechskant: #f6f3ef #ded9d2 #b4aea6 #7a746d #3a3835

Stimmung: warm-neutral, ruhig, wohnlich

Am besten für: Interior-Design Moodboard

Ruhig und wohnlich erinnern diese Neutraltöne an hellen Sand, Stein und weiche Wolle. Die leichte Wärme sorgt für einladende Räume, wirkt aber trotzdem modern und aufgeräumt. Kombiniere mit hellem Eichenholz, gebürstetem Nickel und strukturiertem Leinen. Tipp: Balanciere die Palette mit einem tiefen Akzent (#3a3835) im Rahmen oder bei Beschlägen, damit der Raum nicht zu beige wirkt.

Beispielbild von Nordic Sand, generiert mit media.io

18) Blue Hour Slate

Sechskant: #eef2f7 #c3cedd #7d91ab #3a4f67 #141b26

Stimmung: stimmungsvoll, modern, cineastisch

Am besten für: Musikposter-Design

Stimmungsvoll und cineastisch wirken diese kühlen Grautöne wie die blaue Stunde über einer Skyline. Das dunkle Navy sorgt für starke Lesbarkeit auf Plakaten, während die helleren Töne sanfte Verläufe ermöglichen. Kombiniere mit fetter serifenloser Schrift und minimalen Formen und vermeide warme Gelbtöne, außer gewollter Kontrast ist gefragt. Tipp: Setze den Hintergrund als Verlauf von #141b26 zu #3a4f67 für Tiefe ohne Unordnung.

Beispielbild von Blue Hour Slate, generiert mit media.io

19) Lilac Chrome

Sechskant: #f4f2f7 #d6d2df #a59db6 #5d556f #26222f

Stimmung: futuristisch, sanft, poliert

Am besten für: Beauty-App UI

Futuristisch und doch sanft suggerieren diese kühlen Grautöne lila-getöntes Chrom und Samtschatten. Die violett-graue Richtung eignet sich perfekt für Beauty- und Lifestyle-Interfaces mit elegantem Touch. Kombiniere mit minimalistischer Produktfotografie und subtilen Verläufen, und verwende #26222f für klare Labels. Tipp: Buttons in #5d556f mit Text in #f4f2f7 für guten Kontrast ohne Härte.

Beispielbild von Lilac Chrome, generiert mit media.io

20) Crisp Mint Gray

Sechskant: #f1f6f5 #d0dfdb #9fbdb4 #5b7f77 #2a3c38

Stimmung: frisch, sauber, leise energetisch

Am besten für: Coffee-Shop-Menü-Design

Frisch und leise energiegeladen wirken diese kühlen Grautöne wie Minzblätter auf kühlem Stein. Die grünlichen Nuancen halten die Menüs sauber und verleihen dennoch eine charakteristische Note. Für moderne Drucklayouts nutze #2a3c38 für Überschriften und #9fbdb4 für Kategorie-Highlights. Tipp: Hintergrund auf #f1f6f5 belassen und Akzentblöcke begrenzen, damit alles übersichtlich bleibt.

Beispielbild von Crisp Mint Gray, generiert mit media.io

Welche Farben passen gut zu kühlem Grau?

Kühles Grau lässt sich perfekt mit kühlen Akzenten wie Teal, Schieferblau, Eisblau und tiefem Navy kombinieren. Das hält die Temperatur gleichmäßig und sorgt bei Interfaces oder Layouts für ein gewolltes statt "zufälliges" Design.

Für Kontrast und Wärme helfen gezielte Highlights wie Kupfer, Blush oder zarter Pfirsich. Eine kleine Dosis reicht meist, um Buttons, Badges, Überschriften oder wichtige Datenpunkte hervorzuheben.

Wenn alles neutral bleiben soll, nutze mehrere Grautöne in Schichten und verankere mit Fastschwarz oder Blau-Schwarz statt echtem Schwarz. So bleibt der Look ruhig und modern und die Lesbarkeit steigt.

So verwenden Sie eine kühle graue Farbpalette in echten Designs

Beginne mit Rollen, nicht mit Farbfeldern: Wähle einen hellen Hintergrund, ein Oberflächen-Grau für Karten/Abschnitte, ein mittleres Grau für Umrandungen und Sekundärtext sowie einen dunklen Akzent für Überschriften und UI-Elemente. So entsteht ein skalierbares System.

Im Druck und Branding wirken kühle Grautöne am besten mit viel Weißraum und klarer typografischer Hierarchie. Da Grautöne auf Papier oft weicher erscheinen, muss der Kontrast bewusst gesetzt werden – besonders bei Fließtexten und feinen Linien.

Für Innenräume sollten kühle Grautöne mit Texturen (Leinen, Wolle, Stein) kombiniert werden, damit der Raum nicht flach wirkt. Ergänze ein Akzentmaterial wie gebürstetes Metall, dunkles Holz oder eine gedeckte Farbe, um Sterilität zu verhindern.

Erstellen Sie mit KI coole Graupalette-Bilder

Wer testen möchte, wie eine kühle Grauskala in Dashboard, Poster, Verpackungsmockup oder Interior-Moodboard wirkt, kann sich mit KI-Visualisierungen vorab von Kontrast und Stimmung überzeugen.

Mit dem Text-zu-Bild-Tool von Media.io lassen sich Prompts samt Seitenverhältnis einfügen und konsistente Beispiele für Markensysteme oder UI-Flows generieren – mit exakt den gewünschten HEX-Farben als Vorlage.

So kannst du schnell verschiedene kühle Graukombinationen testen und die passende für Zielgruppe und Medium wählen.

Weiter: Verzauberte Garten-Farbpalette