Gelb und Dunkelblau Farbkombinationen: Hex Codes & Design Tipps

Gelb und Dunkelblau ist eine der klarsten und kontrastreichsten Farbkombinationen, die Sie verwenden können – auffällig genug, um Aufmerksamkeit zu erregen, aber strukturiert genug, um professionell zu wirken.

Im Branding, UI und Druck sorgt Tiefblau für Vertrauen und Lesbarkeit, während Gelb für Energie bei Highlights, Handlungsaufrufen und wichtigen Informationen sorgt.

Warum funktionieren Kombinationen aus Dunkelblau und Gelb so gut?

Kombinationen aus Dunkelblau und Gelb funktionieren, weil sie Temperatur und Kontrast ausbalancieren: Blau wirkt stabil und tief, während Gelb hell und präsent ist. Zusammen entsteht so eine natürliche visuelle Hierarchie – ohne viele zusätzliche Farben zu benötigen.

Dunkelblau ist zudem eine zuverlässige Basis für Typografie und UI-Elemente, besonders wenn Lesbarkeit und ein „vertrauenswürdiger“ Ton gefragt sind. Gelb ist dann die perfekte Akzentfarbe für Highlights, Hinweise und Handlungsaufrufe.

Mit Zurückhaltung eingesetzt, sieht die Kombination aus Dunkelblau und Gelb hochwertig statt laut aus – besonders wenn Sie ein sanftes Neutral (Creme, Off-White oder Grau) ergänzen, damit das Auge zur Ruhe kommt.

20+ Ideen für Farbpaletten mit Dunkelblau und Gelb (inklusive HEX-Codes)

1) Sonniger Hafen

HEX: #0b1f3b #123a63 #f6c445 #fff2c6 #2f5f8f

Stimmung: frisch, maritim, optimistisch

Ideal für: Reise-Branding und Hero-Banner

Frisch und maritim – es fühlt sich an wie früher Sonnenschein am stillen Steg mit klarer Luft und klarem Wasser. Nutzen Sie Marineblau für Überschriften und Navigation, während das warme Gelb CTAs und wichtige Zeichen hervorhebt. Mit viel Weißraum kombiniert entsteht ein sauberer, maritimer Look. Tipp: Das kräftigste Gelb nur für kleine, prägnante Elemente verwenden, damit es hochwertig und nicht aufdringlich wirkt.

Beispielbild „Sonniger Hafen“ erstellt mit media.io

Media.io

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

Jetzt kostenlos ausprobieren

2) Mitternachts-Senf

HEX: #071a2e #0f2d4a #d4a017 #f1e7c7 #3b6a93

Stimmung: stimmungsvoll, edel, kontrastreich

Ideal für: hochwertige Verpackung und Produktanzeigen

Stimmungsvoll und edel – erinnert an Kerzenschein und poliertes Messing vor mitternachtsblauen Wänden. Als Dunkelblau-Gelb-Kombination funktioniert es hervorragend, wenn das dunkelste Blau den Hintergrund trägt und Senf als gezielter Akzent dient. Das warme Creme sorgt für Luft in Labels und Zutatenbereichen. Tipp: Eine matte dunkelblaue Fläche und ein einziger glänzender Senf-Akzent verleihen dem Design eine haptische Note.

Beispielbild „Mitternachts-Senf“ erstellt mit media.io

3) Nautisches Signal

HEX: #0a2440 #1b4f72 #ffd24a #f7f9fc #2d2a32

Stimmung: klar, selbstsicher, energetisch

Ideal für: Sportgrafik und Teamausrüstung

Klar und selbstbewusst – wie ein Leuchtfeuer, das durch See-Nebel scheint. Helle Gelbtöne für Nummern, Streifen und Calls-to-Action, während die dunklen Blautöne die Basiselemente stützen. Fast-Weiß sorgt für Lesbarkeit kleiner Texte und Details. Tipp: Das Anthrazitgrau als Konturfarbe einsetzen, um Kanten zu schärfen ohne eine weitere Farbe einzuführen.

Beispielbild „Nautisches Signal“ erstellt mit media.io

4) Museums-Spotlight

HEX: #0d1b2a #1b263b #f2b705 #e0e1dd #415a77

Stimmung: dramatisch, kuratiert, elegant

Ideal für: Ausstellungsplakate und Editorial-Cover

Dramatisch und kuratiert – erinnert an Ausstellungshallen, in denen ein warmer Scheinwerfer ein einziges Kunstwerk erleuchtet. Diese Gelb-Dunkelblau-Palette funktioniert am besten, wenn Dunkelblau ruhige große Flächen bildet und Gold für Titel oder Daten eingesetzt wird. Sanftes Grau als papierartiger Negativraum für Bildunterschriften und Credits. Tipp: Gelb als schmalen vertikalen Balken platzieren, um sofort einen visuellen Fokuspunkt zu schaffen.

Beispielbild „Museums-Spotlight“ erstellt mit media.io

5) Küstenrollbahn

HEX: #082032 #2c394b #ffcc29 #f4f4f4 #334756

Stimmung: modern, strukturiert, durchsetzungsstark

Ideal für: Dashboard-UIs und datenintensive Apps

Modern und strukturiert – erinnert an Rollbahnmarkierungen und klare Leitsysteme. Dunkelste Blautöne für Seitenleisten und Tabellen nutzen, das helle Gelb für aktive Zustände und Warnungen. Off-White macht Diagramme gut lesbar und vermeidet schwer wirkende Interfaces. Tipp: Gelb nur für eine UI-Funktion – z.B. Primärbuttons – einsetzen, sodass Nutzer das Muster sofort erkennen.

Beispielbild „Küstenrollbahn“ erstellt mit media.io

6) Jeans-Narzisse

HEX: #102a43 #243b53 #fbd34d #fff8db #486581

Stimmung: freundlich, lässig, sonnig

Ideal für: Social-Media-Vorlagen und Lifestyle-Blogs

Freundlich und lässig – wie Jeans mit einer Narzisse im Hosensack. Mittlere Blautöne für Fließtext und Rahmen nutzen, während sanftes Gelb Highlights und Sticker betont. Hellcreme sorgt für luftigen Gesamteindruck bei langen Texten und Karussell-Posts. Tipp: In der hellsten Farbe dezente runde Formen einfügen, um harte Kanten in belebten Layouts aufzulockern.

Beispielbild „Jeans-Narzisse“ erstellt mit media.io

7) Industrielle Sicherheit

HEX: #001d3d #003566 #ffc300 #e5e5e5 #000814

Stimmung: kräftig, funktional, warnbereit

Ideal für: Bau-Branding und Sicherheitsbeschilderung

Kräftig und funktional – erinnert an Warnbänder und Arbeitslicht auf nächtlichem Stahl. Dass fast Schwarz und Dunkelblau sorgen für maximalen Kontrast auf Schildern, das helle Gelb für Symbole und wichtige Hinweise. Neutrales Grau hält sekundäre Infos lesbar, ohne zu konkurrieren. Tipp: Buchstabenabstand bei gelbem Text auf Dunkelblau leicht erhöhen, um Flimmern zu mindern und Fernlesbarkeit zu verbessern.

Beispielbild „Industrielle Sicherheit“ erstellt mit media.io

8) Eclipse-Limonade

HEX: #0b1320 #1c2541 #ffdd57 #f6f3ea #3a506b

Stimmung: filmisch, sanft, leicht verspielt

Ideal für: Event-Flyer und Musik-Promotions

Filmisch und sanft – erinnert an das Glühen einer Sonnenfinsternis mit spritziger Zitronennote. Die Grundfläche aus dunklem Blau wie ein Nachthimmel aufbauen, das Zitronengelb hebt Lineup und Ticketlink hervor. Cremiges Off-White hält Kleingedrucktes klar, ohne zu hart zu wirken. Tipp: Sanften Farbverlauf zwischen den beiden Blautönen nutzen, um Tiefe zu geben und der Marke treu zu bleiben.

Beispielbild „Eclipse-Limonade“ erstellt mit media.io

9) Königliche Werkstatt

HEX: #0a1f44 #1f3c88 #f7c948 #f0f4ff #2a6f97

Stimmung: clever, erfinderisch, optimistisch

Ideal für: Startup-Landingpages und Funktionsbereiche

Clever und erfinderisch – wie eine helle Werkstatt, in der Ideen einrasten. Diese Gelb-Dunkelblau-Kombinationen glänzen auf Landingpages: Dunkelblau schafft Struktur und Glaubwürdigkeit, sparsam eingesetztes Gelb lenkt den Blick auf Produktvorteile. Blasses Blassblauweiß sorgt für leichte, scannbare Content-Blöcke. Tipp: Icons immer im selben Blau, Gelb nur für Interaktionen verwenden.

Beispielbild einer königlichen Werkstatt, generiert mit media.io

10) Sturmige Ringelblume

HEX: #0b2545 #13315c #f9a826 #eef2f3 #1f7a8c

Stimmung: abenteuerlustig, küstenartig, vom Wind gepeitscht

Ideal für: Werbeanzeigen und Lookbooks für Outdoor-Ausrüstung

Abenteuerlich und windgepeitscht, erinnert es an Gewitterwolken, die über einen warmen Ringelblumenhorizont rollen. Verwenden Sie die dunkleren Blautöne für Jacken, Typografie und kontrastreiche Überschriften und setzen Sie das Orangengelb für Tags und Preispunkte ein. Das kühle Elfenbein unterstützt Produktdetails und technische Spezifikationen. Tipp: Behalten Sie das Türkis nur als kleinen Akzent für Nähte oder kleine UI-Elemente, damit die Farbpalette kohärent bleibt.

Beispielbild einer stürmischen Ringelblume, generiert mit media.io

11) Stadtbahn-Glühen

HEX: #0f172a #1e3a8a #fbbf24 #f8fafc #334155

Stimmung: urban, klar, energiegeladen

Ideal für: Leitsysteme und öffentliche Infografiken

Urban und klar – es fühlt sich an, als würden Straßenbahnlichter nachts auf nassem Asphalt reflektieren. Das tiefe Blau und Schiefergrau erzeugen eine starke Informationshierarchie, während das Bernstein-Gelb Haltestellen und Hinweise sofort auffällig macht. Das fast Weiße eignet sich für Karten und Beschriftungen, um Details scharf zu halten. Tipp: Setzen Sie Gelb nur für eine Symbollinie ein, z. B. Icons, um visuelle Überfrachtung in komplexen Diagrammen zu vermeiden.

Beispielbild eines Stadtbahn-Glühens, generiert mit media.io

12) Blaue Stunde Picknick

HEX: #101935 #23395d #f2d95c #f7f3e3 #406e8e

Stimmung: ruhig, nostalgisch, sanft

Ideal für: Hochzeitseinladungen und Papeterie

Ruhig und nostalgisch – es erinnert an Abenddämmerungspicknicks mit Lampions und sanftem Lachen. Verwenden Sie das tiefe Blau für Namen und formelle Details und lassen Sie das buttergelbe Gelb in Rahmen, Siegelmotiven oder kleinen Blumen erscheinen. Das warme, papierähnliche Creme hält es romantisch und druckfähig. Tipp: Verwenden Sie ein strukturiertes Papier und halten Sie das Gelb mit geringer Deckkraft für elegante Druckergebnisse.

Beispielbild des Blaue-Stunde-Picknicks, generiert mit media.io

13) Vintage-Papeterie

HEX: #0b2239 #2b4c7e #e8b339 #f3e9dc #6b7c93

Stimmung: traditionell, akademisch, warm

Ideal für: Buchcover und Papeterie-Sets

Traditionell und akademisch – es erinnert an gealterte Notizbücher, Tintenstempel und Messing-Schreibtischutensilien. Die tiefen Blautöne eignen sich für Titel und Buchrücken, das gedämpfte Gelb wirkt wie antike Folie, ohne laut zu sein. Verwenden Sie das Pergamentcreme für große Hintergründe und das graublaue für sekundäre Texte. Tipp: Setzen Sie für Layout-Rahmen einen dünnen Mittelblau-Rahmen, um das Vintagedesign zu unterstreichen.

Beispielbild der Vintage-Papeterie, generiert mit media.io

14) Goldenes Observatorium

HEX: #06121f #0b3c5d #f9c74f #f1faee #1d6a96

Stimmung: neugierig, kosmisch, elegant

Ideal für: Wissenschaftsposter und Konferenzfolien

Neugierig und kosmisch – es erinnert an Sternenkarten mit warmem Goldmarker, der Sternbilder nachzeichnet. Verwenden Sie das dunkelste Blau für Hintergründe und Diagramme und Gelb für wichtige Erkenntnisse und Hervorhebungen. Das kühle Off-White unterstützt dichte Informationen ohne Blendung. Tipp: Halten Sie die Diagramm-Gitterlinien im Mittelblau, damit gelbe Datenpunkte im Fokus bleiben.

Beispielbild des Goldenen Observatoriums, generiert mit media.io

15) Campuswappen

HEX: #0a1931 #185adb #ffc947 #f6f6f6 #2e3a59

Stimmung: kraftvoll, akademisch, lebhaft

Ideal für: Club-Branding und Campusposter

Kraftvoll und akademisch – es erinnert an Wappen, Banner und strahlende Stadionlichter. Diese Gelb-Dunkelblau-Farbpalette ist eine starke Wahl für Studentenorganisationen, die aus der Ferne sofort sichtbar sein sollen. Halten Sie das Königsblau für große Flächen und das Gelb für kraftvolle Überschriften, das helle Grau ist Ihre Posterbasis. Tipp: Drucken Sie zuerst einen Proof, da das Königsblau auf ungestrichenem Papier variieren kann.

Beispielbild des Campuswappens, generiert mit media.io

16) Nachtmarktschilder

HEX: #0b132b #1c2541 #f8c630 #eaeaea #5bc0be

Stimmung: lebhaft, neonartig, straßenerprobt

Ideal für: Restaurantmenüs und Aktionskarten

Lebhaft und straßenerprobt – es erinnert an leuchtende Schilder über einem belebten Nachtmarkt. Verwenden Sie die tiefen Blautöne für Menü-Hintergründe und Bilderrahmen, setzen Sie das Gelb für Preise und Highlights ein, damit sie schnell auffallen. Das helle Grau hält den Text auch in dichten Abschnitten lesbar. Tipp: Nutzen Sie Türkis nur für kleine Markierungen wie Schärfegrade, um nicht mit der Haupt-Highlightfarbe zu konkurrieren.

Beispielbild der Nachtmarktschilder, generiert mit media.io

17) Herbstliches Segeltuch

HEX: #0b2d39 #1d4e89 #f0b429 #fff3d6 #1a936f

Stimmung: erdig, naturverbunden, selbstbewusst

Ideal für: Campingmarken und saisonale Aktionen

Erdig und selbstbewusst – es erinnert an Segeltuch, Kiefernnadeln und Spätsommersonne. Die dunklen Blautöne bilden stabile Grundlagen für Logos und Banner, das goldene Gelb verleiht Badges und Aktionen Wärme. Verwenden Sie das Creme für angenehme Hintergründe und das Grün als subtile Naturassoziation. Tipp: Halten Sie das Grün unter zehn Prozent des Layouts, damit Blau-Gelb bleibt dominierend.

Beispielbild von herbstlichem Segeltuch, generiert mit media.io

18) Galerie-Abenddämmerung

HEX: #050a30 #1b2cc1 #fcbf49 #f5f5f5 #2d2d2a

Stimmung: künstlerisch, energiegeladen, modern

Ideal für: Branding für Kreativagenturen und Titelbilder für Reels

Künstlerisch und voller Energie – es erinnert an eine Galerieeröffnung mit kräftigen Lichtern und scharfen Schatten. Das elektrische Blau sorgt für moderne Akzente, das warme Gelb hält die Komposition einladend. Weiß bietet Luft zum Atmen, das Anthrazit für kleine typografische Details. Tipp: Wenden Sie das hellste Blau pro Bild nur für ein Element, z.B. ein Logozeichen, an, damit das Gelb nicht überstimmt wird.

Beispielbild der Galerie-Abenddämmerung, generiert mit media.io

19) Athletik-Klassiker

HEX: #0a2342 #2ca6a4 #f6bd60 #ffffff #1d3557

Stimmung: sauber, sportlich, positiv

Ideal für: Fitness-App-UI und Onboarding

Sauber und sportlich – es weckt Assoziationen an frische Trikots und auffällige Trainingskegel. Verwenden Sie das dunkelste Blau für Überschriften und Navigation, das warme Gelb markiert Fortschritt, Streifen oder Belohnungen. Weiß hält das Interface luftig und fördert schnelles Überfliegen. Tipp: Ordnen Sie Türkis nur für sekundäre Aktionen zu, damit die Hauptziele auf dem Gelb-Akzent bleiben.

Beispielbild des Athletik-Klassikers, generiert mit media.io

20) Ruhige Bibliothekslampe

HEX: #0b1d39 #1c3f60 #ffd166 #f6f1e9 #4f6d7a

Stimmung: ruhig, konzentriert, warm

Ideal für: Bildungsblogs und Kursfolien

Ruhig und konzentriert – es erinnert an eine warme Schreibtischlampe in einer stillen Bibliothek nach Feierabend. Diese Gelb-Dunkelblau-Kombinationen sind perfekt für Unterricht und Tutorials, da der Kontrast stets lesbar bleibt, ohne zu hart zu wirken. Verwenden Sie die dunklen Blautöne für Struktur und Überschriften, Gelb sparsam für wichtige Begriffe und Checkpoints. Tipp: Belassen Sie Fließtext im weichen Blau-Grau, um Augenbelastung auf langen Seiten zu vermindern.

Beispielbild der ruhigen Bibliothekslampe, generiert mit media.io

Welche Farben passen zu Gelb und Dunkelblau?

Neutrale Töne sind das einfachste Mittel: Weiß, Creme und Hellgrau halten das Farbschema luftig und machen sowohl Gelb als auch Dunkelblau gut lesbar. Für Druck sorgt ein warmes Off-White dafür, dass Gelb satter und weniger grell wirkt.

Wenn Sie einen dritten Farbakzent brauchen, verbinden Türkis und Seegrün Gelb und Blau auf eine maritime, sportliche Art. Anthrazit oder ein fast Schwarz eignet sich gut für Konturen, Schatten und kleine Typografie, ohne eine neue Farbe einzuführen.

Für eine edlere Richtung probieren Sie metallisch inspirierte Töne wie mattes Gold oder Messing (als Gelbvariante) und dazu ein kühles Schieferblau für UI-Flächen und Charts.

Wie man eine Gelb-Dunkelblau-Farbpalette in realen Designs einsetzt

Beginnen Sie mit Dunkelblau als Grundlage: für Hintergründe, Überschriften, Navigation oder große Flächen. So entsteht Struktur und das Design wirkt durchdacht statt unruhig.

Setzen Sie Gelb wie einen Scheinwerfer ein: primäre Buttons, Schlüsselzahlen, Abzeichen und wichtige Labels. Wenn Gelb nur eine Hauptrolle hat (z.B. CTA, Hinweis oder Highlight), ist die UI leichter erfassbar und das Layout schneller zu scannen.

Fügen Sie für Inhaltsbereiche, Formulare und längere Textblöcke eine neutrale Panel-Farbe (Creme/Offwhite) hinzu. Das verringert visuelle Ermüdung und sorgt für bessere Zugänglichkeit auf verschiedenen Geräten und bei wechselndem Licht.

Erstellen Sie Farbschemata in Gelb und Dunkelblau mit KI

Wenn Sie sehen möchten, wie eine Gelb-Dunkelblau-Palette auf einem Poster, einer Landingpage, Verpackung oder UI-Bildschirm wirkt, sind schnelle Mockups der schnellste Weg, Kontrast und Stimmung zu prüfen.

Mit Media.io’s Text-zu-Bild-Tool können Sie ein Prompt einfügen, das Layout beschreiben und die Farbwirkung in Sekunden variieren – so entscheiden Sie schnell, ob Ihr Gelb zitronenhell, senfig oder golden sein soll.

Als Nächstes: Champagner-Gold-Farbpalette