Gelb-Grau Farbkombination: 20 Farbpaletten mit Hex-Codes zum Ausprobieren

Gelb und Grau gehören zu den einfachsten modernen Farbkombinationen: Gelb bringt Energie und Freundlichkeit, während Grau für Struktur, Ausgewogenheit und ein hochwertiges „Tech-Neutral“-Gefühl sorgt.

Unten findest du 20 gelb-graue Farbpaletten mit HEX-Codes sowie praktische Tipps für UI, Branding, Print und Innenräume – so kannst du direkt einen Stil auswählen und umsetzen.

Darum funktionieren gelb-graue Paletten so gut

Gelb fällt von Natur aus ins Auge und eignet sich deshalb perfekt für Highlights – Buttons, Badges, Icons oder kleine wohndekorative Akzente. Grau hingegen bietet eine ruhige Grundlage, die sich nicht mit deinen Inhalten anlegt.

Zusammen erzeugen sie eine klare Hierarchie: Grau sorgt für Lesbarkeit und Struktur im Layout, während Gelb den Blick gezielt auf das Wesentliche lenkt. Das ist besonders nützlich im UI-Design, auf Plakaten und Dashboards, wo Klarheit ausschlaggebend ist.

Gelb-graue Paletten funktionieren ebenfalls von minimalistisch bis ausdrucksstark. Du kannst alles luftig halten mit hellen Grautönen und sanftem Gelb, oder mit Anthrazit, fast Schwarz und intensivem Gelb hohe Kontraste erzeugen – für maximalen Effekt.

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

1) Sonnenbeschienener Beton

HEX: #F6C945 #D9D9D6 #8A8D8F #2E2F33 #FFF6E0

Stimmung: hell, modern, geerdet

Am besten geeignet für: SaaS-Dashboard-UI

Helles und luftiges Gefühl wie Morgenlicht auf städtischen Gehwegen – diese Töne wirken selbstbewusst, ohne laut zu sein. Verwende das sanfte Off-White als Hauptfläche und setze Gelb gezielt für wichtige Aktionen und Highlights ein. Mittlere Grautöne sorgen für bestens lesbare Tabellen und Diagramme, während das Fast-Schwarz für scharfe Hierarchie sorgt. Tipp: Beschränke Gelb auf kleine UI-Elemente, damit es frisch und zugänglich bleibt.

Beispielbild zu sonnenbeschienener Beton, generiert mit media.io

Media.io

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

Jetzt kostenlos ausprobieren

2) Senffarbener Schiefer

HEX: #C9A227 #6E7074 #2C2D30 #E7E2D3 #F3EFE6

Stimmung: satt, gemütlich, edel

Am besten geeignet für: Markenidentität für ein Boutique-Café

Warm und leicht vintage – erinnert an geröstetes Getreide, dunkle Röstungen und Schiefertafeln. Diese gelb-graue Farbkombination eignet sich hervorragend für Logos, Etiketten und Menü-Überschriften, wenn du handwerkliche Energie mit einem hochwertigen Look verbindest. Kombiniere sie mit strukturiertem Papier und einer schlichten Serifenschrift für das gewisse Etwas. Tipp: Drucke das Senfgelb als Akzent, während der Schiefer für Lesbarkeit sorgt.

Beispielbild zu senffarbenem Schiefer, generiert mit media.io

3) Zitronennebel

HEX: #FFE36E #F2F2F0 #B9BCC1 #5A5D63 #1F2024

Stimmung: sanft, frisch, ruhig

Am besten geeignet für: Onboarding-Screens für mobile Apps

Sanft und optimistisch – fühlt sich an wie Zitronentee an einem nebligen Morgen. Die hellen Neutraltöne halten den Screen leicht, während die dunkleren Grautöne für guten Kontrast beim Text sorgen. Gelb kommt bei Fortschrittsanzeigen, freundlichen Icons und Mikro-Animationen zum Einsatz. Tipp: Der Look wird besonders weich mit abgerundeten Komponenten und großzügigem Weißraum.

Beispielbild zu Zitronennebel, generiert mit media.io

4) Taxi auf Asphalt

HEX: #FFD100 #A8AAAD #3B3D42 #121316 #F5F5F5

Stimmung: kräftig, urban, energiegeladen

Am besten geeignet für: Tech-Meetup-Poster

Durchschlagsstark und straßentauglich – erinnert an Neon-Reflexe und nächtliche Stadttouren. Diese gelb-graue Palette glänzt im starken Kontrast: Schwarz für den Text, knalliges Gelb für die Headlines, Grau für Sekundärinfos. Halte das Layout minimalistisch, damit die Farbkombination ihre Wirkung entfaltet. Tipp: Setze graue Blöcke hinter kleinere Texte für bessere Lesbarkeit auf hellen Hintergründen.

Beispielbild zu Taxi auf Asphalt, generiert mit media.io

5) Goldene Düne

HEX: #E7B93C #CFC8B8 #9A9C9F #4A4D52 #FFF1D1

Stimmung: warm, entspannt, natürlich

Am besten geeignet für: Farbguide für gemütliche Schlafzimmer-Innenräume

Sonnig und erdig – erinnert an Dünen, Leinen und weiches Nachmittagslicht. Verwende das cremige Off-White für Wände und Bettwäsche. Lagen aus Grautönen via Textilien und Möbeln bringen Ausgleich. Der Goldton eignet sich perfekt für eine Decke, Lampenschirm oder einen Kunst-Akzent, der Wärme bringt, ohne zu dominant zu sein. Tipp: Setze auf matte Oberflächen, damit die Neutraltöne ruhig und einladend wirken.

Beispielbild zu goldener Düne, generiert mit media.io

6) Sanfter Glimmer

HEX: #F2D06B #E5E6E8 #B3B6BB #70737A #2B2D31

Stimmung: sauber, sanft, hochwertig

Am besten geeignet für: Skincare Packaging Design

Seidig und unaufdringlich – erinnert an Mineralglanz und Spa-Handtücher. Helle Grautöne sorgen für eine klinisch-reine Basis, Gelb bringt einen subtilen Schimmer für Highlights und Siegel. Kombiniere das Ganze mit schlichter Sans-Serif-Typo und viel Weißraum für einen modernen, dermatologisch inspirierten Look. Tipp: Die dunkelste Nuance nur für Kleingedrucktes wie Inhaltsstoffe oder Anweisungen einsetzen.

Beispielbild zu sanftem Glimmer, generiert mit media.io

7) Industrieller Honig

HEX: #F5B800 #D0D2D4 #8E9196 #3A3C40 #0F1012

Stimmung: schlank, strukturiert, selbstbewusst

Am besten geeignet für: E-Commerce Homepage-UI

Klar und technisch – wie poliertes Metall mit einem Hauch Honiglich. Dieses gelb-graue Farbschema ist ideal für E-Commerce, wo Vertrauen und Schnelligkeit entscheidend sind: Neutrale Grautöne für Produkt-Raster, fast Schwarz für Schrift, Gelb für Calls-to-Action. Dazu passen saubere Produktfotos und gleichmäßiger Abstand, um Unruhe zu vermeiden. Tipp: Teste Hover-Zustände mit einem helleren Gelb, damit die Bedienoberfläche konsistent bleibt.

Beispielbild zu industriellem Honig, generiert mit media.io

8) Retro-Schulbus

HEX: #FFCC00 #7A7D81 #4B4E53 #1C1D20 #FFF8D8

Stimmung: verspielt, kräftig, nostalgisch

Am besten geeignet für: Flyer für Sportmannschaft

Energiegeladen und retro – inspiriert von Turnhallen, Schulbussen und klassischen Uniformen. Das leuchtende Gelb ist perfekt für Teamnamen und wichtige Termine, während Kohle-Töne das Layout stark und lesbar machen. Kombiniere mit blockiger Typo und einfachen Icons für den vintage Look. Tipp: Verwende das blasse Creme als ruhiges Gegengewicht, damit der Flyer nicht zu schwer wirkt.

Beispielbild zu Retro-Schulbus, generiert mit media.io

9) Frühlingsdunst

HEX: #F9D77A #E9E7E1 #BFC2C7 #6B6E75 #2E3035

Stimmung: romantisch, luftig, sanft

Am besten geeignet für: Botanische Hochzeitseinladungs-Set

Leicht und verträumt – erinnert an Frühlingsblüten unter einem dunstigen Himmel. Setze das warme Gelb als zarten Akzent für Monogramme oder feine Rahmen, während die soften Neutraltöne den Hintergrund formen. Kombiniere mit Aquarellblumen und einer geschwungenen Schreibschrift für zeitlose Eleganz. Tipp: Drucke den Grauton einen Tick dunkler als gedacht, damit er bei strukturiertem Papier lesbar bleibt.

Beispielbild von Frühlingsnebel, erzeugt mit media.io

10) Citrine Graphite

HEX: #F4C83A #C9CBD0 #9EA1A8 #3C3E45 #15161A

Stimmung: markant, editorial, zeitgenössisch

Am besten geeignet für: Magazin Feature-Layout

Poliert und modern, wirkt wie glänzender Druck, Graphitstift und Citrin-Highlight. Schwarz und dunkelgrau für Überschriften und Zitate verwenden, Gelb leitet den Blick zu Abschnittsmarkierungen oder Datenpunkten. Kombiniere mit starker Fotografie und rasterbasiertem Layout für einen edlen Look. Tipp: Gelb nur auf 5–10 % der Seite verwenden, um den Redaktionsstil nicht zu dominieren.

Beispielbild von Citrine Graphite, erzeugt mit media.io

11) Harvest Steel

HEX: #DFAF2B #D8D4CA #A2A4A7 #5D6066 #2A2B2F

Stimmung: beständig, warm, professionell

Am besten geeignet für: Präsentations-Deck-Vorlage

Ausgewogen und business-tauglich, erinnert an Erntegold und gebürsteten Stahl. Das warme Gelb für Abschnittsunterteilungen und wichtige Zahlen nutzen, Grautöne für Diagramme, Bildunterschriften und Fußnoten. Kombiniere mit einfachen Icons und konstanten Abständen für einen selbstbewussten Executive-Look. Tipp: Slide-Hintergrund hell halten und dunkelstes Grau nur für Titel verwenden.

Beispielbild von Harvest Steel, erzeugt mit media.io

12) Urban Marigold

HEX: #FFC93C #BFC1C4 #7C7F86 #34363B #FAFAF7

Stimmung: lebendig, modern, zugänglich

Am besten geeignet für: Restaurant-Menüdesign

Lebendig wie Ringelblumen auf Beton, wirkt freundlich, zeitgemäß und gut lesbar. Für Gelbgrau-Paletten auf Speisekarten: Fast-Schwarz für Gerichte, Mittelgrau für Beschreibungen, Gelb für Highlights und Schärfe-Markierungen. Mit klaren Abschnittslinien und viel Weißraum für einen gehobenen, zwanglosen Stil. Tipp: Keine gelbe Grundschrift, nur für Labels und Icons für bessere Klarheit.

Beispielbild von Urban Marigold, erzeugt mit media.io

13) Butterstone

HEX: #F7DA7C #F4F1E8 #C6C7C9 #8A8C90 #3E4045

Stimmung: weich, beruhigend, familienfreundlich

Am besten geeignet für: Moodboard fürs Kinderzimmer

Beruhigend und sanft, erinnert an Butterkekse, weiche Decken und stille Schläfchen. Cremefarben für Wände und große Möbel nutzen, Grau ergänzend durch Teppiche, Aufbewahrung und Vorhänge für Struktur. Gelb funktioniert gut in kleinen Dekoartikeln wie Kunst oder Plüschtieren. Tipp: Warme Glühbirnen wählen, damit die Palette gemütlich bleibt.

Beispielbild von Butterstone, erzeugt mit media.io

14) Brass Pebble

HEX: #D8B34B #D4D5D7 #9A9DA3 #585B61 #1B1C20

Stimmung: elegant, technisch, hochwertig

Am besten geeignet für: Smartwatch-Werbeanzeige

Elegant und zurückhaltend, erinnert an gebürstetes Messing auf glatte Steine. Die Grautöne als Hintergrund dominieren lassen für Premium-Look, warmes Gelb als Markenakzent für Callouts oder Feature-Abzeichen verwenden. Mit präziser Beleuchtung und minimalem Text für einen modernen Look. Tipp: Gelb nicht zu stark sättigen, als gezielten Akzent einsetzen.

Beispielbild von Brass Pebble, erzeugt mit media.io

15) Neon Safety

HEX: #FFEA00 #B7B9BC #6C6F75 #2D2F34 #0B0C0E

Stimmung: aufmerksam, kontrastreich, funktional

Am besten geeignet für: Baustellen-Sicherheitsbeschilderung

Direkt und aufmerksamkeitsstark, erinnert an Warnwesten und frisch gemalte Gefahrenstreifen. Gelbgrau-Kombinationen wie diese eignen sich, wenn Kontrast oberste Priorität hat: Schwarz für Icons, Gelb für Warnungen, neutrale Grautöne für Zusatzinfos. Mit fetter serifenloser Schrift und einfachen Formen für Klarheit auf Abstand. Tipp: Großzügigen Rand lassen, damit die Schilder auch in belebter Umgebung lesbar bleiben.

Beispielbild von Neon Safety, erzeugt mit media.io

16) Cozy Wool

HEX: #E6C15A #E2E0DA #B0B1B4 #6A6C71 #2F3034

Stimmung: warm, ruhig, taktil

Am besten geeignet für: Strickwaren-Lookbook-Cover

Taktil und einladend, erinnert an Wollpullover und warmes Café-Licht. Sanfte neutrale Töne rücken die Fotos in den Mittelpunkt, Gelb als saisonalen Akzent in Titeln oder kleinen grafischen Linien. Mit Editorial-Typografie und großzügigem Rand für einen hochwertigen Lookbook-Look. Tipp: Kontrast auf Covertext hoch halten, damit es auch als Thumbnail gut lesbar ist.

Beispielbild von Cozy Wool, erzeugt mit media.io

17) Modern Bauhaus

HEX: #F3C300 #E6E6E6 #9C9FA6 #2E3036 #111214

Stimmung: grafisch, klar, modernistisch

Am besten geeignet für: geometrischer Wandkunst-Druck

Grafisch und diszipliniert, erinnert an modernistische Poster und klare Geometrie. Gelb für kräftige Formen verwenden, die Komposition mit Kohle und ausgewogenem Mittelgrau verankern. Mit einfachen Kreisen, Linien und asymmetrischen Layouts für Galeriestil. Tipp: Großzügigen Rand lassen, damit der Druck im Rahmen präsent wirkt.

Beispielbild von Modern Bauhaus, erzeugt mit media.io

18) Desert Road

HEX: #EAC24A #D6D2C7 #9B9DA1 #4E5056 #1E1F23

Stimmung: filmisch, sonnenverbrannt, abenteuerlich

Am besten geeignet für: Reiseblog Hero-Banner

Filmisch und sonnenverbrannt, wie eine lange Straße im Hitzeflimmern. Sandiges Weiß und helle Grautöne als Hintergrund, Gelb als Highlight für Buttons oder Kategorietags. Weite Landschaftsbilder und minimaler Text für einen modernen Reise-Stil. Tipp: Dezentes graues Overlay auf Fotos, damit weiße Überschriften lesbar bleiben.

Beispielbild von Desert Road, erzeugt mit media.io

19) Saffron Smoke

HEX: #F1B12C #D3D4D6 #A1A3A8 #61646B #202227

Stimmung: stimmungsvoll, dramatisch, stilvoll

Am besten geeignet für: Noir-Thriller-Filmposter

Stimmungsvoll und stilvoll, erinnert an nebliges Licht, Straßenlaternen und Safran-Glanz im Dunkeln. Fast-Schwarz für Basis und Schrift verwenden, Gelb gezielt für Titel oder einen grafischen Fokuspunkt. Kombiniere mit grober Textur und kontrastreicher Fotografie für filmisches Finish. Tipp: Begleittext in hellem Grau, damit er lesbar bleibt, aber nicht die Aufmerksamkeit stiehlt.

Beispielbild von Saffron Smoke, erzeugt mit media.io

20) Yellowed Newspaper

HEX: #F0D46A #E8E3D6 #B5B7BB #6E7177 #26282D

Stimmung: nachdenklich, vintage, vertrauenswürdig

Am besten geeignet für: Nachhaltigkeitsbericht-Infografik

Nachdenklich und leicht vintage, erinnert an archiviertes Papier und Tinte. Helles Beige als Seitenbasis, die Abschnitte mit kühlen Grautönen strukturieren und Diagramme gestalten. Gelb als Akzent für wichtige Kennzahlen, Highlights und Fortschrittsbalken, ohne zu sehr an Corporate zu erinnern. Tipp: Maximal zwei Diagrammfarben und Grau für den Hauptteil der Diagramme verwenden.

Beispielbild von Yellowed Newspaper, erzeugt mit media.io

Welche Farben passen gut zu Gelb-Grau?

Gelb und Grau harmonieren mit klaren Neutralfarben wie Weiß und Fast-Schwarz, weil sie den Kontrast stärken und Layouts gut lesbar halten. Im UI unterstützt das die Begrenzung von Gelb auf CTAs, während Grau Flächen, Abgrenzungen und sekundären Text übernimmt.

Für eine wärmere Richtung Beige, Creme oder Sand hinzufügen – so wirkt die Palette wohnlicher. Für modern und kühl Blau- oder Stahltöne dazu – für einen Tech-Look mit klarer Linie.

Für einen auffälligen Akzent neben Gelb ein kontrolliertes Highlight wie Türkis, Kobalt oder Blush nutzen – nur in kleinen Dosen, z. B. für Icons, Tags oder Diagramm-Highlights, damit Gelb Hauptblickfang bleibt.

Wie man eine gelb-graue Farbpalette im realen Design einsetzt

Mit Rollen starten, nicht nur Farben: Helles Neutral für den Hintergrund, mittleres Grau für Flächen, dunkles Grau/Fast-Schwarz für Schrift, Gelb als „Action“-Farbe. Dieses Mapping sorgt für Konsistenz über Seiten und Komponenten.

Für bessere Zugänglichkeit Gelb für längeren Fließtext vermeiden und genügend Kontrast für Buttons und Labels sicherstellen. Üblich: dunkler Text auf hellem Untergrund, Gelb für Icons, Highlights und Buttons mit gefüllter Fläche, damit Kontrast mit dunkler Schrift erfüllt wird.

Im Druck und Interior Grau als „stille Basis“ nutzen (Wände, Flächen, Leerraum), Gelb dort platzieren, wo Wärme und Fokus gewünscht sind (Überschriften, Beschilderung, Kissen, Lichtakzente).

Erstelle gelb-graue Paletten-Visuals mit KI

Sobald die Palette steht, lässt sie sich am schnellsten im Kontext validieren – z. B. auf einem Dashboard, Poster, Verpackung oder Raum-Szene. Dabei helfen AI-Mockups: Layouts und Licht lassen sich iterieren, ohne alles neu zu bauen.

HEX-Codes als Richtlinie nutzen, dann Typ, Stimmung und Komposition beschreiben (z. B. „minimal Onboarding-Screens“, „editorial Raster“ oder „warmes Schlafzimmer-Interior“). Mehrere Varianten generieren, dann die mit der klarsten Hierarchie und Kontrast behalten.

Media.io macht es einfach, Palette-Ideen in visuelle Beispiele zu verwandeln, die sich mit Kunden oder Kollegen teilen lassen.

Weiter: Black Pink Farbpalette