20 Farbpaletten in Blau, Grün und Grau mit Hex-Codes – Inspirationen

Eine blau-grün-graue Farbpalette ist eine bewährte Wahl, wenn Designs ruhig, modern und gut lesbar wirken sollen. Sie vereint das Vertrauen von Blau, die Frische von Grün-Türkis und die Ausgewogenheit moderner, kühler Grautöne.

Nachfolgend findest du 20 gebrauchsfertige Blau-Grün-Grau-Paletten mit HEX-Codes sowie Tipps zur Farb-Kombination und für die Anwendung im UI-Design, Branding, Druck und in Innenräumen.

Warum funktionieren Blau-Grün-Grau-Paletten so gut?

Blau-Grün-Grau-Farbschemata bewegen sich in einer „ruhigen“ Zone des Farbspektrums und wirken modern, ohne aufdringlich zu sein. Dadurch sind sie ideal für Benutzeroberflächen, Unternehmensseiten und Layouts, bei denen Klarheit im Vordergrund steht.

Blau schafft Vertrauen, Türkis sorgt für frische Energie und Grau gibt Typografie und Abständen eine strukturierende Basis. Zusammen unterstützen sie die Hierarchie (Überschriften, Buttons, Hintergründe), ohne auf starke Kontraste angewiesen zu sein.

Diese Paletten funktionieren sowohl auf Bildschirmen als auch im Druck sehr gut. Mit dem richtigen Gleichgewicht beim Grauton bleiben Designs im hellen UI-Kontext klar oder werden für Interiors und Papierwaren weicher.

20+ Blau-Grün-Grau Farbpaletten-Ideen (mit HEX-Codes)

1) Seaside Graphite

HEX: #0b3a53 #1f7a75 #7aa6a6 #c7d1d6 #2b2f33

Stimmung: ruhig und modern

Ideal für: Analyse-Dashboard UI

Ruhig und modern wie ein windiger Pier mit tiefem Wasser und Graphitgeländer. Das dunkle Blau gibt der Navigation Halt, während Türkis- und Seeminne-Töne Diagramme blendfrei lesbar machen. Kombiniere mit viel Weißraum und einem warmen Akzent (wie Bernstein) für Hinweise. Tipp: Nutze das beinahe schwarze Graphit für Überschriften und wichtige Zahlen, um die Lesegeschwindigkeit zu steigern.

Bildbeispiel für seaside graphite generiert mit media.io

Media.io

Media.io ist ein Online-KI-Studio zur Erstellung und Bearbeitung von Videos, Bildern und Audio direkt im Browser.

Jetzt kostenlos ausprobieren

2) Mint Harbor

HEX: #0f4c6e #2aa198 #bfe8de #d9dee2 #4a545c

Stimmung: frisch und einladend

Ideal für: Wellness-Brand-Identity

Frisch und einladend wie Minzblätter am kühlen Hafenwasser an einem bedeckten Tag. Diese Blau-Grün-Grau-Palette mischt ein selbstbewusstes Ozeanblau mit einem freundlichen Minzton, abgerundet durch sanfte Grautöne für die Typografie. Kombiniere mit natürlichen Texturen und ungestrichenem Papier für ein sanftes, hochwertiges Gefühl. Tipp: Nutze Mint nur als Akzent (10 bis 15 Prozent), um einen ausgewaschenen Look zu vermeiden.

Bildbeispiel für mint harbor generiert mit media.io

3) Slate Lagoon

HEX: #123b5a #2f6f73 #5f8f9a #b8c2c9 #3b4248

Stimmung: ruhig und edel

Ideal für: Unternehmenswebsite

Ruhig und edel wie eine stille Lagune, eingefasst von Schieferklippen. Mittel-Türkis und Blau ermöglichen eine starke Hierarchie für Überschriften, Buttons und Links, während die kühlen Grautöne für einen professionellen Look sorgen. Kombiniere mit schlichter Fotografie und feinen Linien-Icons für einen ausgewogenen Rhythmus. Tipp: Nutze das helle Grau für Abschnittshintergründe, sodass Inhaltsblöcke strukturiert erscheinen, ohne schwere Rahmen.

Bildbeispiel für slate lagoon generiert mit media.io

4) Arctic Sage

HEX: #0e5675 #3aa6a1 #a8d5c8 #e3e8eb #6a747d

Stimmung: luftig und beruhigend

Ideal für: Spa-Interieur-Paletten-Guide

Luftig und beruhigend wie Salbeidampf am arktisch-blauen Morgen. Weiches Mint und blasses Grau schaffen eine saubere Grundlage für Wände und Textilien, während das dunklere Blau Schilder und Wegweiser gut lesbar hält. Kombiniere mit hellem Eichenholz, gebürstetem Nickel und mattem Weißkeramik. Tipp: Wiederhole den Salbeiton in kleinen Textilien, um Räume zu vereinheitlichen, ohne neu zu streichen.

Bildbeispiel für arctic sage generiert mit media.io

5) Copper Kelp

HEX: #0b2f4a #1f7f7a #8fb9b1 #cfd6da #8a5a3c

Stimmung: maritim und geerdet

Ideal für: Produktverpackung für Hautpflege

Maritim und geerdet wie Tangwälder an Felsen mit einem Hauch von sonnengewärmtem Kupfer. Das Türkis und Blau wirkt sauber und aquatisch, während das Kupferbraun eine warme Note für den Bereich Körperpflege beisteuert. Kombiniere mit minimalistischer Groteskschrift und viel Weißraum für einen modernen Regal-Look. Tipp: Drucke Kupfer als Spot-Folie oder -Tinte für einen hochwertigen Auftritt.

Bildbeispiel für copper kelp generiert mit media.io

6) Rainy Boardwalk

HEX: #0d4860 #2b8a84 #6fa8a8 #d7dde0 #40464c

Stimmung: stimmungsvoll und klar

Ideal für: Eventplakat-Design

Stimmungsvoll und klar wie nasses Holz, das nach Regen die Lichter am Hafen spiegelt. Diese Blau-Grün-Grau-Kombinationen sind ideal für Plakate, die Atmosphäre benötigen, ohne dabei die Lesbarkeit zu opfern. Kombiniere mit kräftigen, schmalen Schriftarten und einfachen geometrischen Formen für schnelle Übersicht. Tipp: Setze Fließtext in Mittelgrau, und verwende dunklen Schiefer für Titel und Daten.

Bildbeispiel für rainy boardwalk generiert mit media.io

7) Foggy Fjord

HEX: #12324b #2e6e8a #3c8f87 #b9c7cf #eef2f4

Stimmung: neblig und großzügig

Ideal für: Editorial-Magazin-Layout

Neblig und großzügig wie ein Fjord, der im Nebel verschwindet. Das helle Grauweiß öffnet das Layout, während Blau und Türkis einen ruhigen Rhythmus für Überschriften und Zitate bilden. Kombiniere mit Serifenschriften und zurückhaltender Fotografie für einen hochwertigen Editorial-Look. Tipp: Nutze Türkis für Abschnittsmarkierungen, damit die Navigation auf allen Seiten intuitiv bleibt.

Bildbeispiel für foggy fjord generiert mit media.io

8) Eucalyptus Steel

HEX: #0f3d52 #2f7f77 #9bc2b6 #aab3bb #2f353a

Stimmung: praktisch und gelassen

Ideal für: SaaS-Onboarding-Screens

Praktisch und gelassen wie Eukalyptusblätter auf gebürstetem Stahl. Das tiefe Blau und Türkis sorgt für klare Call-to-Actions, die kühlen Grautöne halten Formulare luftig-leicht. Kombiniere mit abgerundeten Elementen und großzügigen Abständen für eine freundliche Produktstimmung. Tipp: Nutze das Stahlgrau für Eingabefelder und das Dunkelblau für Hauptbuttons, um Türkis nicht zu überstrapazieren.

Bildbeispiel für eucalyptus steel generiert mit media.io

9) Nautical Concrete

HEX: #0a2f45 #1c6d7c #3aa39b #c9cfd4 #5a646c

Stimmung: urban und nautisch

Ideal für: Architektur-Portfolio-Website

Urban und nautisch wie blaues Wasser neben Betondocks. Die kühlen Neutralfarben setzen Fotografien in Szene, während Türkis einen modernen Akzent für Hover-Zustände und Bereichslabels hinzufügt. Kombiniere mit Schwarz-Weiß-Projektbildern und einem minimalistischen Grid. Tipp: Halte das Betongrau als dominanten Hintergrund, damit das Türkis gezielt und nicht dekorativ eingesetzt wirkt.

Bildbeispiel für nautischen Beton, generiert mit media.io

10) Gletschermoos

HEX: #103e5b #2a7c8a #5aa78d #d5dde1 #6d7b82

Stimmung: klar und natürlich

Ideal für: Outdoor-Marken Lookbook

Klar und natürlich, wie Gletscherschmelze, die an moosigem Stein vorbeiläuft. Dieses Set wirkt abenteuerlich, ohne Neon zu sein, und ist daher ideal für saubere Lookbook-Layouts und Produkt-Hervorhebungen. Als blau-grün-graues Farbschema passt es besonders gut zu recycelten Texturen, Kraftpapier-Notizen und kontrastreicher Outdoor-Fotografie. Tipp: Setze Moosgrün auf Abzeichen und Icons, um die Aufmerksamkeit zu lenken, ohne mit Bildern zu konkurrieren.

Bildbeispiel für Gletschermoos, generiert mit media.io

11) Blue Spruce Office

HEX: #0c3b57 #1f6f86 #2f8f7e #b7c0c6 #2a2f34

Stimmung: fokussiert und vertrauenswürdig

Ideal für: B2B Pitch Deck

Fokussiert und vertrauenswürdig, wie die Nadeln der blauen Fichte in einem ordentlichen Büro. Die dunklen Töne wirken autoritär für Titel und Diagramme, während das weiche Grau die Folien luftig hält. Kombiniere mit einfacher Datenvisualisierung und viel Rand, sodass der Inhalt selbstbewusst wirkt. Tipp: Setze Teal durchgehend für eine Datenreihe ein, um Wiedererkennung im Deck zu schaffen.

Bildbeispiel für Blue Spruce Office, generiert mit media.io

12) Soft Tidepaper

HEX: #1a4862 #2f8b8b #a7cfc8 #f1f4f6 #7b8790

Stimmung: sanft und luftig

Ideal für: Hochzeitseinladungs-Set

Sanft und luftig, wie vom Meer gespültes Papier mit eingeschlossenem Meerglas. Der blasse Hintergrund hält das Set elegant, während Teal und Blau genügend Farbe für Monogramme und Rahmen liefern. Kombiniere mit Büttenrand-Texturen oder subtilen Aquarell-Überlagerungen für ein romantisches Finish. Tipp: Drucke den dunkelsten Ton nur für Namen und wichtige Details, um die Sanftheit zu bewahren.

Bildbeispiel für Soft Tidepaper, generiert mit media.io

13) Industrial Seafoam

HEX: #0d3c54 #1d7a82 #7fc6c1 #c0c8ce #3d4349

Stimmung: markant und zugänglich

Ideal für: Tech-Startup Landing Page

Markant und zugänglich, wie Meerschaumfarbe auf einer Industrietür. Das leuchtende Aqua hebt CTAs und Mikrointeraktionen hervor, während Schiefer und Anthrazit die Seite seriös wirken lassen. Kombiniere mit kräftigen geometrischen Illustrationen und leichten Farbverläufen für einen modernen Tech-Look. Tipp: Begrenze Aqua auf Buttons und Links und lasse Grau den Fließtext tragen.

Bildbeispiel für Industrial Seafoam, generiert mit media.io

14) Pebble Bay

HEX: #11435f #2d7f86 #4aa59a #d2d8dc #8b969e

Stimmung: ausgewogen und freundlich

Ideal für: Blog-Header und Thumbnails

Ausgewogen und freundlich, wie glatte Kiesel unter klarem bay-Wasser. Die mittleren Töne erleichtern konsistente Thumbnail-Rahmen, Tags und Kategorienfarben ohne harten Kontrast. Kombiniere mit warmer Fotografie und einfachen Overlays für gut lesbare Titel. Tipp: Nutze das helle Grau als subtilen Gradient-Untergrund, um gemischte Bilder zu vereinheitlichen.

Bildbeispiel für Pebble Bay, generiert mit media.io

15) Deep Teal Charcoal

HEX: #062a3a #0f5d6a #1f8a8a #9fb0b8 #1f2327

Stimmung: kräftig und cineastisch

Ideal für: Musikalbum-Cover Artwork

Kräftig und cineastisch, wie tiefes Teal-Licht, das durch Anthrazit-Nebel schneidet. Diese blau-grün-grauen Farbkombis strahlen auf Cover-Art, wo Stimmung vor Details steht. Kombiniere mit kontrastreicher Fotografie und minimaler Typografie für einen eindrucksvollen, modernen Abschluss. Tipp: Lasse die Texte in dem blassen Stahltone, um vibrierende Kanten gegen das dunkle Basis zu vermeiden.

Bildbeispiel für Deep Teal Charcoal, generiert mit media.io

16) Winter Poolside

HEX: #154d6b #2f8f9d #86c7c2 #e6ecef #56626a

Stimmung: kühl und optimistisch

Ideal für: Reisebroschüre Layout

Kühl und optimistisch, wie ein beheizter Pool am Wintermorgen. Das helle Grau hält Seiten schön hell, während das Teal ein einladendes Urlaubsgefühl vermittelt, ohne tropisch zu wirken. Kombiniere mit klarer serifenloser Schrift und breiten Rändern für einen hochwertigen Broschürenstil. Tipp: Nutze das mittlere Teal für Abschnittstrenner, damit Leser schnell überfliegen können.

Bildbeispiel für Winter Poolside, generiert mit media.io

17) Coastal Clinic

HEX: #0f4a68 #1f7f85 #9ad9cf #f5f7f8 #9aa5ad

Stimmung: sauber und beruhigend

Ideal für: Healthcare App UI

Sauber und beruhigend, wie eine helle Klinik mit Blick auf ruhiges Wasser. Das sanfte Aqua wirkt fürsorglich für Statusmeldungen und unterstützende UI, während das Blau Vertrauen für Primäraktionen ausstrahlt. Kombiniere mit abgerundeten UI-Komponenten und kontrastreicher Ikonografie für bessere Zugänglichkeit. Tipp: Halte Erfolgsmeldungen in Aqua und reserviere Teal für interaktive Elemente, damit die Status klar unterschieden werden.

Bildbeispiel für Coastal Clinic, generiert mit media.io

18) Riverstone Minimal

HEX: #0e3f59 #2c7c78 #6fb1a7 #dfe4e7 #707b83

Stimmung: ruhig und minimalistisch

Ideal für: Lebenslauf- und Anschreiben-Vorlage

Ruhig und minimalistisch, wie Flusssteine auf einem kühlen Ufer. Die zurückhaltenden Farben überlassen der Typografie die Führung und Teal setzt dezenten Akzent für Abschnittsüberschriften. Kombiniere mit einer einzelnen modernen Schriftfamilie und dünnen Linien für Struktur. Tipp: Verwende Teal nur für Überschriften und kleine Icons, damit die Seite auch in Graustufen sauber ausgedruckt werden kann.

Bildbeispiel für Riverstone Minimal, generiert mit media.io

19) Stormlight Botanical

HEX: #0b3b52 #2b7e84 #5ab3a4 #cfd7dc #f3f6f7

Stimmung: frisch und künstlerisch

Ideal für: Botanisches Illustrationsset

Frisch und künstlerisch, wie Sturmlicht über einem Gewächshaus. Das Teal-Grün wirkt lebendig für Blätter und Stängel, während das kühle Grau die Komposition luftig und modern hält. Kombiniere mit feiner Linienführung und sanften Aquarellverläufen für einen natürlichen, zeitgemäßen Stil. Tipp: Begrenze das dunkelste Blau auf Schatten, damit die Botanicals hell und transparent bleiben.

Bildbeispiel für Stormlight Botanical, generiert mit media.io

20) Night Pier Neon

HEX: #061f2f #0b4f6c #00a6a6 #a9b6be #20262b

Stimmung: elektrisch und elegant

Ideal für: Gaming-Stream Overlay

Elektrisch und elegant, wie Neon-Schilder die nachts über einem Steg leuchten. Der starke Kontrast zwischen fast Schwarz und leuchtendem Teal lässt Benachrichtigungen, Labels und Timer hervorstechen, ohne zu überladen. Kombiniere mit subtilen Verläufen und scharfer serifenloser Schrift für eine kompetitive Atmosphäre. Tipp: Halte das Neon-Teal nur für wichtige UI-Elemente, damit es in langen Streams wirksam bleibt.

Bildbeispiel für Night Pier Neon, generiert mit media.io

Welche Farben passen zu Blau-Grün-Grau?

Warme Akzente sind der einfachste Weg, um einem blau-grün-grauen Farbschema Kontrast zu verleihen. Versuche Bernstein, Terrakotta, Kupfer oder gedämpftes Korallenrot für Buttons, Highlights, Abzeichen oder Druckelemente.

Für eine klare, moderne Richtung kombiniere diese Töne mit reinem Weiß, sanftem Off-White oder einem blassen kühlen Grau. Das hält Layouts luftig und sorgt dafür, dass Teal-Details gezielt und nicht zu dominant wirken.

Für einen dunklen, cineastischen Look ergänze Anthrazit und fast Schwarz plus einen hellen Teal zur Betonung. Diese Kombi funktioniert besonders gut für Overlays, Hero-Bereiche und albumartige Grafiken.

Wie setzt man eine Blau-Grün-Grau-Palette im echten Design ein?

Beginne mit der Rollenzuweisung: Wähle ein tiefes Blau/Anthrazit als Anker (Navigation, Überschriften), ein Teal als interaktiven Akzent (Links, CTAs) und lasse helle Grautöne Hintergründe und Abstände tragen. So bleibt die Hierarchie über Bildschirme und Seiten hinweg konsistent.

Im UI sichere Lesbarkeit, indem du gesättigtes Teal für kleine Bereiche reservierst und Grautöne für Fließtext nutzt. Im Druck erwäge etwas wärmere Papierweiß-Töne, damit die Palette nicht zu kühl wirkt.

Im Branding und Interior wiederhole ein charakteristisches Teal über alle Touchpoints (Labels, Beschilderung, Textilien) und halte den Rest neutral. Die Wiederholung schafft Zusammenhalt, auch wenn Fotos und Materialien wechseln.

Blau-Grün-Grau-Paletten mit KI visualisieren

Wenn du bereits HEX-Codes hast, kannst du sie schnell in Layouts wie Dashboards, Poster, Brandboards oder Einladungssets visualisieren. Ein paar Variationen generieren hilft, Kontrast und Stimmung zu testen, bevor du dich festlegst.

Mit den Text-zu-Bild Tools von Media.io kannst du dein Design (Format, Stil und Palette) beschreiben und erhältst innerhalb weniger Minuten fertige Konzeptvisuals. Das ist ein schneller Weg, ein blau-grün-graues Farbschema für UI, Druck oder Marketing zu validieren.

Nutze den Button unten, um kostenlos Visuals für Blau-Grün-Grau-Paletten zu erstellen.

Weiter: Farbpalette Grau Dunkelblau