20 inspirierende Blau-Grau-Farbpaletten mit Hex-Codes für dein Design

Blaugrau ist das leise Arbeitstier des modernen Farbdesigns: kühl, edel und einfach mit sowohl warmen Akzenten als auch klaren Neutralen zu kombinieren.

Hier sind 20 sorgfältig ausgewählte Blaugrau-Farbpaletten (mit HEX-Codes), die Sie für UI, Innenräume, Branding und mehr verwenden können – plus schnelle Tipps und KI-Prompts zur Erstellung passender Visuals.

Warum Blaugraue Paletten so gut funktionieren

Blaugrau liegt zwischen „vertrauenswürdigem Blau“ und „neutralem Grau“, sodass es ruhig, professionell und elegant wirkt, ohne kalt oder steril zu erscheinen. Es ist eine verlässliche Basis, wenn Sie ein Design modern, aber nicht modisch wirken lassen möchten.

Da Blaugrau von Natur aus Kontrast unterstützt, können Sie klare Hierarchien mit dunkler Navigation/Kopfleisten und hellen Flächen aufbauen – besonders nützlich für UI, Präsentationen und Editorial-Layouts, wo Lesbarkeit zählt.

Es ist auch eine starke Brückenfarbe: Es harmoniert leicht mit warmen Akzenten (Sand, Bronze, Rosé) und mit kühlen Tönen (Salbei, Teal, eisige Weißtöne), wodurch es flexibel für Innenräume, Verpackungen und Branding-Systeme ist.

20+ Ideen für Blaugrau-Farbpaletten (mit HEX-Codes)

1) Küstennebel

HEX: #2E3E4E #5E7282 #A7B5C0 #E7EDF1 #D7C3A5

Stimmung: luftig, küstennah, ruhig

Am besten geeignet für: Wohnzimmer im Strandhaus und entspannte Hotellerie-Innenräume

Luftig und salzig, erinnert es an Morgennebel, der über Kieselstrände zieht. Verwenden Sie das dunkle Blaugrau als Anker an Wänden oder großen Textilien und schichten Sie die helleren Nuancen für Weichheit. Der sandige Akzent wärmt das Set und verhindert, dass es zu kühl wirkt. Tipp: Wiederholen Sie die Sandfarbe an zwei kleinen Stellen (Kissen und ein Teppichstreifen), damit der Raum durchdacht wirkt.

Bildbeispiel für „Küstennebel“ erstellt mit media.io

Media.io

Media.io ist ein Online-KI-Studio zum Erstellen und Bearbeiten von Videos, Bildern und Audio direkt im Browser.

Jetzt kostenlos ausprobieren

2) Schiefer und Salbei

HEX: #344552 #6E8594 #B9C6CE #E9EEF2 #7E9B8B

Stimmung: geerdet, frisch, modern

Am besten geeignet für: Verpackungen für Eco-Skincare und Wellness-Markenetiketten

Geerdete Schiefertöne treffen auf einen klaren Salbei-Ton, wie ein ruhiges Spa mit Eukalyptus in der Luft. Diese Blaugrau-Kombinationen wirken besonders gut auf matten Materialien, wo subtile Nuancen als hochwertig wahrgenommen werden. Bleiben Sie bei typografisch Anthrazit oder Altweiß und verwenden Sie Salbei für Siegel, Verschlüsse oder Callouts. Tipp: Die dunkelste Nuance für Kleingedrucktes nutzen, damit das Etikett lesbar bleibt, ohne streng zu wirken.

Bildbeispiel für „Schiefer und Salbei“ erstellt mit media.io

3) Mitternachtshafen

HEX: #0F1C2B #2C3E55 #5B6F86 #A8B6C4 #F2B6A0

Stimmung: stimmungsvoll, edel, nächtlich

Am besten geeignet für: Branding für Cocktailbars und Abendveranstaltungs-Promos

Stimmungsvoll und filmisch, erinnert es an Hafenlichter, die sich im dunklen Wasser spiegeln. Nutzen Sie das Tintenblau als Hintergrund und bringen Sie die mittleren Töne für Icons, Muster oder sekundäre Panels ein. Ein sanfter Korallenakzent verleiht Wärme für CTAs, Stempel oder Hervorhebungen, ohne die Nachtstimmung zu stören. Tipp: Bleiben Sie beim Korallenakzent unter 10% Flächenanteil, damit die Palette edel bleibt.

Bildbeispiel für „Mitternachtshafen“ erstellt mit media.io

4) Regnerisches Fenster

HEX: #1F2A35 #455766 #7F93A1 #C9D4DC #F3F6F8

Stimmung: ruhig, minimalistisch, fokussiert

Am besten geeignet für: Analytics-Dashboards und SaaS-UI-Themen

Ruhig und konzentriert, wirkt es wie Regentropfen, die an einem Stadtfenster entlang laufen. Diese Blaugrau-Palette hält Interfaces ruhig und schafft trotzdem klare Hierarchie von dunkler Navigation bis zu blassen Flächen. Kombinieren Sie mit einem einzelnen, leuchtenden Akzent (Bernstein oder Teal) für aktive States und Warnungen. Tipp: Verwenden Sie den hellsten Ton als Hauptfläche, um Augenmüdigkeit bei langen Sitzungen zu verringern.

Bildbeispiel für „Regnerisches Fenster“ erstellt mit media.io

5) Nordischer Stahl

HEX: #2A3A46 #516574 #8EA0AD #D6DEE5 #FFFFFF

Stimmung: sauber, strukturiert, skandinavisch

Am besten geeignet für: Unternehmens-Präsentationen und Jahresberichte

Sauber und strukturiert, erinnert es an gebürstetes Metall und verschneites Licht. Verwenden Sie die dunkleren Töne für Überschriften und Abschnittstrenner und lassen Sie die hellen Grautöne den Großteil der Seite übernehmen. Es ergänzt sich natürlich mit klaren Weißräumen und einfachen geometrischen Formen. Tipp: Bleiben Sie bei Diagrammen bei zwei Reihen plus einer Hervorhebungsfarbe, damit die Präsentation angenehm zu lesen bleibt.

Bildbeispiel für „Nordischer Stahl“ erstellt mit media.io

6) Denim Drift

HEX: #243445 #3F5B74 #6F8FA8 #B8CAD8 #E9EDF0

Stimmung: lässig, jung, outdoor

Am besten geeignet für: Denim-Modenanzeigen und Lookbook-Seiten

Lässig und windgegerbt, erinnert es an ausgebleichten Denim an einem kühlen Nachmittag. Bauen Sie Ihre Basis mit den dunkleren Farbtönen für Überschriften und Rahmen und nutzen Sie die helleren Blautöne für Hintergründe und Negativraum. Passt gut zu Off-White-Papiertexturen und minimalistischer schwarzer Typografie. Tipp: Fügen Sie eine subtile Körnung hinzu, um die Farben fühlbarer und modischer wirken zu lassen.

Bildbeispiel für „Denim Drift“ erstellt mit media.io

7) Silbersturm

HEX: #1D2B36 #3C515E #708693 #B7C4CC #D9A15F

Stimmung: dramatisch, edel, kontrastreich

Am besten geeignet für: moderne Küchenoberflächen und Gerätestyling

Dramatisch und edel, erinnert an Gewitterwolken mit einem Blitz warmen Lichts. Diese Blaugrau-Kombinationen glänzen in Küchen, wo Metall, Stein und Glas einen einheitlichen Hintergrund brauchen. Setzen Sie den Bronzeakzent an Hardware, Beleuchtung oder einem einzelnen Statement-Hocker, damit der Raum nicht steril wirkt. Tipp: Bleiben Sie bei einem warmen Metallfinish, damit der Kontrast bewusst und nicht chaotisch wirkt.

Bildbeispiel für „Silbersturm“ erstellt mit media.io

8) Tinte und Nebel

HEX: #101820 #33404B #667786 #C8D1D8 #F7F9FA

Stimmung: editorial, klar, modern

Am besten geeignet für: Buchcover und minimalistische Poster-Typografie

Klar und editorial, fühlt sich an wie frische Tinte auf glattem Papier. Lassen Sie das fast Schwarz die Titel und Schlüsseltypografie übernehmen, während neblige Grautöne für viel Raum sorgen. Passt wunderbar zu fettem Serif oder kondensierter Sans für einen modernen-literarischen Look. Tipp: Halten Sie einen großen Bereich als Negativraum, damit das Cover hochwertig wirkt.

Bildbeispiel für „Tinte und Nebel“ erstellt mit media.io

9) Gletschersee

HEX: #2B3A4A #4F6B7D #7FA7B9 #CFE3EC #F7FBFD

Stimmung: frisch, luftig, naturverbunden

Am besten geeignet für: Aquarell-Landschaftsdrucke und Natur-Blog-Header

Frisch und luftig, erinnert an einen gläsernen alpinen See unter blassem Himmel. Verwenden Sie mittlere Blautöne für Wasser und Schattenformen und die hellsten Töne für Highlights und Nebel. Passt gut zu Pinngrün oder Anthrazitlinien für Kontur. Tipp: Begrenzen Sie harte Kanten und lassen Sie Nass-in-Nass-Mischungen für ein ruhiges, natürliches Finish arbeiten.

Bildbeispiel eines Gletschersees, generiert mit media.io

10) Stürmischer Obstgarten

HEX: #2A3844 #586B78 #9AA9B2 #E1E7EA #8B6B4E

Stimmung: rustikal, gedämpft, gemütlich

Am besten geeignet für: Bauernhausküchen und handwerkliche Food-Markenauftritte

Rustikal und gedeckt – wie ein Obstgarten direkt nach dem Regen. Die kühlen Neutralfarben schaffen eine klare Basis, während das warme Braun eine handgemachte, vorratskammerfreundliche Note hinzufügt. Kombiniere es mit Kraftpapier, Serifenschriften und einfachen Linien-Icons für einen authentischen Look. Tipp: Braun für Stempel und Zutatenhinweise verwenden, um das Auge zu leiten, ohne zu überladen.

Bildbeispiel eines stürmischen Obstgartens, generiert mit media.io

11) Blueprint Studio

HEX: #1B2D45 #2F4E6B #5F7F9B #AFC2D1 #F2F4F6

Stimmung: technisch, selbstbewusst, kreativ

Am besten geeignet für: Architekturportfolios und Studio-Lookbooks

Technisch und selbstbewusst – es erinnert an Blaupapier und Zeichenlinien. Verwende die dunkleren Blau­töne für Raster, Bildunterschriften und Abschnittsüberschriften, mit hellen Flächen für gute Lesbarkeit. Passt gut zu feinen Linien-Icons und großzügigen Rändern für Galerie-Atmosphäre. Tipp: Fließtext in warmem Grau setzen, um den technischen Eindruck zu mildern.

Bildbeispiel Blueprint Studio, generiert mit media.io

12) Dusty Periwinkle

HEX: #2E3A4C #56647C #8793B0 #C9CDE0 #F6F5FA

Stimmung: sanft, verträumt, zart

Am besten geeignet für: Babyparty-Einladungen und zauberhafte Papeterie-Sets

Sanft und verträumt – wie Abendlicht mit einem Hauch von Flieder. Die dunklen Töne fürs Namensfeld und Details, helle Nuancen schaffen eine luftige, papierartige Basis. Kombinierbar mit zarten Blumenmotiven, feinen Rahmen und Roségold-Akzenten. Tipp: Nur eine einzige Script-Schrift einsetzen und die Farbe die romantische Wirkung entfalten lassen.

Bildbeispiel Dusty Periwinkle, generiert mit media.io

13) Urban Graphite

HEX: #161C22 #303A43 #56636E #9EABB4 #E7EBEE

Stimmung: industriell, elegant, modern

Am besten geeignet für: Social-Posts für Streetwear und Launch-Ankündigungen

Elegant und industriell – erinnert an Grafitskizzen und Betonwege. Verwende die dunkelsten Töne für fette Typo und Rahmen, hellere Grautöne für Flächen und Abstand. Lässt sich perfekt mit kontrastreicher Fotografie und einem Neonakzent für Energie verbinden. Tipp: Schatten und Overlays einheitlich halten, damit Beiträge wie eine Serie wirken.

Bildbeispiel Urban Graphite, generiert mit media.io

14) Quiet Library

HEX: #2B343C #4E5D69 #7D8D9A #C9D2D8 #E6D8C7

Stimmung: gemütlich, bedacht, zeitlos

Am besten geeignet für: Homeoffice und Leseecken-Makeover

Gemütlich und überlegt – wie abgenutztes Buchleinen und Stille im Lesesaal. Graublaue Töne sorgen für eine beruhigende Kulisse für Holzmöbel, während der warme Pergamentton zum Wohlfühlen einlädt. Kombiniere mit Messingdetails, Lederstrukturen und weichem Lampenlicht für einen bewohnten Look. Tipp: Einbauten im mittleren Ton streichen und die dunkelste Nuance nur für Leisten für Tiefe verwenden.

Bildbeispiel Quiet Library, generiert mit media.io

15) Arctic Concrete

HEX: #202B33 #45535E #788792 #BFC8CF #F3F5F6

Stimmung: minimalistisch, kühl, architektonisch

Am besten geeignet für: Mobile App Onboarding und Fintech-UIs

Minimalistisch und kühl – erinnert an Betonflächen im Winterlicht. Eine blau-graue Farbpalette wie diese eignet sich hervorragend für Onboarding-Screens, bei denen Klarheit und Vertrauen besonders wichtig sind. Kombiniere mit einem knackigen Akzent (Elektroblau oder Limette) für Fortschrittszustände und wichtige Schaltflächen. Tipp: Die zweithellste Nuance für Kartenhintergründe nutzen, sodass Inhalte getrennt wirken, ohne starke Kanten.

Bildbeispiel Arctic Concrete, generiert mit media.io

16) Seaside Pebble

HEX: #283744 #516575 #92A3AF #D9E1E6 #B7A190

Stimmung: natürlich, ausgewogen, dezent

Am besten geeignet für: Kerzenverpackungen aus Keramik und Lifestyle-Produkt-Anzeigen

Natürlich und zurückhaltend – wie glatte Kiesel und verwittertes Treibholz. Die kühlen Töne für Etiketten und Flächen nutzen, das Taupe für einen weichen erdigen Kontrast einsetzen. Harmoniert mit schlichter Serifentypografie und unbeschichtetem Papier. Tipp: Lieber einen warmweißen als einen reinweißen Untergrund wählen, um den organischen Charakter zu erhalten.

Bildbeispiel Seaside Pebble, generiert mit media.io

17) Modern Heritage

HEX: #223141 #3E5568 #6D859C #B9C8D3 #C7A574

Stimmung: klassisch, selbstbewusst, warm akzentuiert

Am besten geeignet für: Premium-Herrenmode-Branding und Boutique-Beschilderung

Klassisch und selbstbewusst – erinnert an maßgeschneiderte Anzüge mit warmen Messingdetails. Die dunklen Nuancen geben starken Wortmarken und Monogrammen Rückhalt, die hellen Blautöne verhindern Schwere. Kombiniere den gold-tan Akzent mit Strukturpapier, Prägung oder einem dezenten Muster für Heritage-Charakter. Tipp: Den Akzent nur für Linien und Icons verwenden, um die Balance zu halten.

Bildbeispiel Modern Heritage, generiert mit media.io

18) Winter Blossom

HEX: #2C3846 #5A6A7A #9AA8B5 #DCE3EA #E7B7C6

Stimmung: sanft, romantisch, für kühles Wetter

Am besten geeignet für: Aquarell-Papeterie und saisonale Karten

Sanft und romantisch – wie blasse Blüten vor kühlem Himmel. Der Blush-Akzent sorgt für eine feine Aufhellung, ohne das Set zu süß zu machen. Gut kombinierbar mit feinen Linien, hellen Farbverläufen und viel Weißraum für ein elegantes Kartendesign. Tipp: Das Rosa nur für kleine Blüten und Siegel verwenden, damit kühle Neutralfarben überwiegen.

Bildbeispiel Winter Blossom, generiert mit media.io

19) Deep Teal Shadow

HEX: #14212B #2B3E4A #4E6A73 #9DB2B8 #E9EFF0

Stimmung: geheimnisvoll, kühl, modern

Am besten geeignet für: Tech-Landingpages und Feature-Sektionen

Geheimnisvoll und cool – wie tiefes Wasser bei wenig Licht. Die dunkelste Nuance für Hero-Bereiche und Navigation verwenden, dann zu verwaschenen Tönen für Feature-Blöcke und Diagramme wechseln. Kombiniert gut mit weißen Icons und einem kräftigen Akzent wie Electric Cyan für Links. Tipp: Zeilenhöhe und Abstände auf dunklem Grund erhöhen, damit alles luftig bleibt.

Bildbeispiel Deep Teal Shadow, generiert mit media.io

20) Clouded Navy

HEX: #182535 #2F4157 #5D748C #A7B6C3 #EEF2F5

Stimmung: selbstbewusst, klar, professionell

Am besten geeignet für: Geschäftsberichte, Angebote und Webheader

Selbstbewusst und klar – wie Marineuniformen, abgemildert durch Wolken. Die dunkelblauen Grautöne für Überschriften und Abschnittsbalken nutzen, für Fliesstexte helle Neutraltöne. Kombiniert natürlich mit strahlendem Weiß, dünnen Teilern und subtilen Datenvisualisierungen. Tipp: Hyperlinks in einem mittleren Blaugrau gestalten, damit sie auffallen, ohne zu saturiert zu wirken.

Bildbeispiel Clouded Navy, generiert mit media.io

Welche Farben passen gut zu Blaugrau?

Warme Akzente sind der schnellste Weg, damit Blau-Grau einladend wirkt. Sand, Kamel, Bronze, Gold-Beige, Terrakotta und zartes Korallenrot sorgen für Kontraste, ohne das Farbschema laut zu machen.

Für einen frischen, organischen Look kombiniere Blau-Grau mit zurückhaltenden Grüntönen wie Salbei, Eukalyptus oder tiefem Petrol. Diese kühlen Nachbarn bewahren eine ruhige, moderne Stimmung.

Für scharfe, hochlesbare Designs (besonders bei UI) kombiniere Blau-Grau mit reinem Weiß und nahezu Schwarz. Die neutrale Spanne hält Typografie klar und sorgt für Platz für einen kräftigen Akzent für States und CTAs.

Wie man eine Blaugrau-Farbpalette in echten Designs verwendet

Starte mit der Rollenverteilung: Wähle ein dunkles Blau-Grau für Überschriften/Nav, eine mittlere Nuance für sekundäre UI-Elemente oder Möbel, und einen sehr hellen Ton für Hintergründe. Das gibt Hierarchie, bevor du Akzente einsetzt.

Halte Akzente gezielt und sparsam – unter 10% Fläche. Eine einzige warme Note (wie Sand, Bronze, Blush) für Highlights, Icons, Abzeichen oder Beschläge genügt, damit das System einheitlich bleibt.

Im Print und Branding wirkt Blau-Grau edel auf mattem Papier und ungestrichenem Karton. Struktur (Korn, Leinen, Aquarellpapier) beugt Flachheit vor und macht feine Nuancen sichtbar.

Blaugrau-Palette-Visuals mit KI erstellen

Beim Präsentieren von Konzepten oder Moodboards helfen schnelle Visualisierungen, das Blau-Grau-Farbschema im Kontext sichtbar zu machen – Räume, Verpackungen, UI-Mockups oder Poster.

Verwende Prompts, die Licht, Material und Stil beschreiben (matt, gebürstetes Metall, weiches Tageslicht, minimalistisches Layout). Passe dann im Design deine HEX-Farben exakt an die gewünschte Wirkung an.

Weiter: Schwarz-Grün Farbpalette