20 Mittelblaue Farbpaletten & Farbkombinationen mit Hex-Codes

Medium Blue liegt im perfekten Bereich zwischen beruhigend und selbstbewusst und ist dadurch extrem einfach einsetzbar für UI, Branding und Druck. Es wirkt vertrauenswürdig wie klassisches Blau, aber frischer und moderner als tiefes Navy.

Unten findest du mehr als 20 Ideen für mittelblaue Farbschemata mit HEX-Codes, sowie direkt verwendbare KI-Prompts, mit denen du passende Visuals für Mockups, Poster und Brandboards generieren kannst.

Warum funktionieren mittelblaue Paletten so gut?

Medium Blue ist vielseitig, weil es emotionale Stimmung und Lesbarkeit ausbalanciert. Es wirkt zuverlässig und „tech-freundlich“, hat aber genug Helligkeit, um auf modernen Interfaces und Marketingseiten zugänglich zu bleiben.

Außerdem harmoniert es sowohl mit kühlen Neutralen (Weiß, Schiefer, Blau-Grau) als auch mit warmen Akzenten (Bernstein, Koralle, Terrakotta). Das bedeutet, du kannst Kontrast für CTAs oder Highlights schaffen, ohne gegen die Basisfarbe zu kämpfen.

Im Druck behält Medium Blue meist seinen Charakter auf verschiedenen Papieren und bei unterschiedlichen Lichtverhältnissen. Mit den richtigen unterstützenden Neutralen wirken Layouts klar und professionell, ohne die Schwere dunkler Blautöne.

20+ Ideen für mittelblaue Farbschemata (mit HEX-Codes)

1) Küsten-Dashboard

HEX: #2f6fed #1b2a41 #eaf2ff #2bd4c7 #f6b73c

Stimmung: sauber, luftig, modern

Ideal für: 2D SaaS UI Dashboard

Frische Meeresluft und von der Sonne beleuchtete Screens kommt in den Sinn, mit selbstbewusstem Blau, das durch luftiges Off-White ausbalanciert wird. Es funktioniert hervorragend für Analyse-Dashboards, Fintech-Tools und Produktseiten, die Vertrauen schaffen sollen, ohne kühl zu wirken. Setze das Türkis für aktive Zustände und das Bernstein als gezieltes Highlight für Schlüsselzahlen ein. Tipp: Die dunkelste Navy für Text und Seitenleisten verwenden, um starken und zugänglichen Kontrast zu gewährleisten.

Bildbeispiel eines Küsten-Dashboards 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) Neon-Marina

HEX: #3a7bd5 #0b1020 #ff4fd8 #00e6ff #f5f7ff

Stimmung: elektrisch, Nachtleben, hoher Kontrast

Ideal für: Musik-Event-Poster Design

Elektrische Hafenlichter leuchten gegen die tiefe Nacht und kombinieren klares Blau mit Neon-Akzenten. Diese Palette ist perfekt für Poster, Albumcover oder Social Graphics, bei denen der Kontrast entscheidend ist. Cyan und Magenta als Headline-Akzente nutzen und das Off-White für typografische Freiräume. Tipp: Ein dezenter Körnung-Overlay hinzufügen, um die Neonränder zu soften, ohne die Energie zu mindern.

Bildbeispiel eines Neon-Marina mit media.io erstellt

3) Denim und Düne

HEX: #2d6cdf #6b7a90 #f2e6d8 #c97c5d #2a2a2a

Stimmung: bodenständig, lässig, warm-kalt-Balance

Ideal für: Lifestyle-Marken-Landingpage

Abgetragenes Denim und von der Sonne gebleichter Sand erzeugen eine entspannt-verlässliche Atmosphäre. Diese Medium Blue Farbkombination eignet sich bestens für Lifestyle-Websites, Lookbooks und Editorial Landing Pages, die Wärme und Klarheit vereinen wollen. Dune Cream für Hintergrundbereiche verwenden und Terrakotta für Buttons oder Badges. Tipp: Überschriften fast schwarz und Fließtext in Schiefer, um einen hochwertigen, lesbaren Rhythmus zu schaffen.

Bildbeispiel Denim und Düne mit media.io erstellt

4) Saphir-Obstgarten

HEX: #356ae6 #15304a #a8e6a3 #ffffff #ff6b6b

Stimmung: frisch, optimistisch, verspielt

Ideal für: Wellness-App Onboarding Screens

Frisches Obst und klarer Himmel vermitteln eine helle, ermutigende Stimmung. Ideal für Onboarding, Habit-Tracker oder freundliche SaaS-Flows, bei denen Positivität wichtig ist. Grün für Erfolgsmeldungen einsetzen, Koralle für primäre Aktionen. Tipp: Große Hintergründe weiß halten und Blau für Header und Illustrationen einsetzen, um visuelle Ermüdung zu vermeiden.

Bildbeispiel Saphir-Obstgarten mit media.io erstellt

5) Wolkige Kornblume

HEX: #4a86e8 #d9e6ff #f7f8fb #9aa4b2 #7b5cff

Stimmung: weich, luftig, sanfte Technik

Ideal für: Startup Pitch Deck Slides

Sanfte Wolkendecke und Kornblumen-Akzente wirken ruhig, fokussiert und leicht futuristisch. Eine gute Wahl für Pitch Decks, Berichte und Erklärfolien, die sauber auf Projektoren ablesbar sein müssen. Lavendel als Sekundärhighlight für Hervorhebungen und Abschnittstrennung verwenden. Tipp: Diagramme in zwei Blautönen halten und Violett für das eine Daten-Set reservieren, das im Gedächtnis bleiben soll.

Bildbeispiel Wolkige Kornblume mit media.io erstellt

6) Mitternachtspool

HEX: #2a66d9 #071a2b #1f9bd1 #e6eef7 #c8a2ff

Stimmung: stimmungsvoll, elegant, nachtaktiv

Ideal für: Gaming Channel Banner

Dunkles Wasser und reflektierende Lichter geben dieser Palette ein elegantes, spätes Nachtgefühl. Ideal für Gaming-Banner, Stream-Overlays und heroische Header, die Tiefe brauchen. Cyan für interaktive Elemente einsetzen und das blassblaue Grau für lesbare Textblöcke. Tipp: Einen leichten Verlauf von Navy zu Blau hinter dem Logo für Dimension ohne Unordnung hinzufügen.

Bildbeispiel Mitternachtspool mit media.io erstellt

7) Elektrischer Bauplan

HEX: #2f76ff #0b1f3b #15d3ff #f4f8ff #ffcc33

Stimmung: technisch, energisch, präzise

Ideal für: Entwickler-Dokumentationsseite

Bauplanlinien und leuchtende LEDs vermitteln eine technische, selbstbewusste Stimmung. Sehr gut geeignet für Doku-Seiten, API-Portale und Knowledge Bases, wo Navigation sofort klar sein muss. Cyan für Links und Gelb für Warnungen oder wichtige Hinweise. Tipp: Codeblöcke auf tiefem Navy, hellen Hintergrund für angenehmes Lesen langer Texte.

Bildbeispiel Elektrischer Bauplan mit media.io erstellt

8) Blauvogel-Pastell

HEX: #5b8dff #ffe6f1 #fff8e1 #7de2d1 #2e3a59

Stimmung: süß, freundlich, zugänglich

Ideal für: Kinder-Lern-App UI

Watteweiche Pastelltöne mit einem hellen Blauvogel-Touch wirken freundlich und ermutigend. Ideal für Kinder-Apps, verspielte Micro-Sites oder fröhliche E-Mail-Designs. Mint für Fortschritt, Navy für Labels, damit Text nicht verblasst. Tipp: Große Farbflächen und abgerundete Formen verwenden, wenig detailreiche Icons, damit die Palette ruhig bleibt.

Bildbeispiel Blauvogel-Pastell mit media.io erstellt

9) Städtischer Transit

HEX: #2e6be0 #101820 #9fb3c8 #f2f4f7 #ff5a1f

Stimmung: strukturiert, städtisch, kräftige Akzente

Ideal für:Leitsystem für Wegweiser

Stadtlinien, Streckenkarten und klare Typografie prägen hier die Stimmung. Diese mittlere Blautonpalette eignet sich perfekt für Leitsysteme, öffentlich sichtbare Beschilderungen und informationslastige Layouts, die auch aus der Ferne gut lesbar bleiben müssen. Kombinieren Sie das Orange als akzentuierenden Richtungshinweis und nutzen Sie Grau für sekundäre Informationen. Tipp: Den Kontrast auf gedruckten Materialien unter grellem Licht testen, damit Marine und Blau deutlich unterscheidbar bleiben.

Bildbeispiel eines urbanen Nahverkehrs generiert mit media.io

10) Keramikfliese

HEX:#3b74d8 #f9f4ee #2f3d4a #7aa6b2 #d98c6a

Stimmung:handgefertigt, mediterran, einladend

Ideal für:Restaurant-Menügestaltung

Handbemalte Fliesen und warmer Ton schaffen eine kunstvolle, gastfreundliche Atmosphäre. Das eignet sich für Menüs, Café-Branding und Verpackungen, die Tradition mit modernem Flair verbinden möchten. Nutzen Sie Creme für große Flächen und bringen Sie Blau bei Bereichsüberschriften und dekorativen Rändern ein. Tipp: Terrakotta nur dezent als Akzent für kleine Elemente wie Preispunkte oder Icons einsetzen, damit die Palette edel bleibt.

Bildbeispiel einer Keramikfliese generiert mit media.io

11) Tech-Konferenz

HEX:#2f6fe6 #0f172a #e2e8f0 #22c55e #a78bfa

Stimmung:selbstbewusst, modern, intelligent

Ideal für:Header einer Konferenz-Website

Bühnenlicht und prägnante Typografie schaffen einen selbstbewussten, modernen Ton. Perfekt für Konferenz-Websites, Speaker-Seiten und Anmeldestrecken, die Klarheit und Schwung brauchen. Grün für CTA, Violett für sekundäre Highlights wie Labels oder Strecken markieren. Tipp: Header-Hintergrund dunkel halten und Hellgrau für Inhaltsbereiche nutzen, um einen schweren Eindruck zu vermeiden.

Bildbeispiel einer Tech-Konferenz generiert mit media.io

12) Skyline-Poster

HEX:#2d6ae3 #f8fafc #111827 #94a3b8 #f97316

Stimmung:kraftvoll, grafisch, zeitgenössisch

Ideal für:modernes Reiseplakat

Eine scharfe Skyline-Silhouette vor hellem Himmel wirkt kraftvoll und grafisch. Geeignet für Reiseplakate, Stadtführer und Printanzeigen, die einen klaren, modernen Akzent benötigen. Orange für ein zentrales Fokuselement wie Sonne, Label oder Routenlinie nutzen. Tipp: Schatten minimal halten und auf flache Formen setzen, damit das Blau im Mittelpunkt steht.

Bildbeispiel eines Skyline-Posters generiert mit media.io

13) Oceanic Minimal

HEX:#3a80e6 #ffffff #e6eef8 #2b3a55 #00b3c6

Stimmung:minimalistisch, ruhig, gepflegt

Ideal für:Brand-Identity-System

Klares Wasser und Weißraum sorgen für einen gepflegten, vertrauenswürdigen Eindruck. Ideal für Markensysteme, Geschäftspapeterie und Websites, bei denen Zurückhaltung Teil des Markenauftritts ist. Setzen Sie Türkis für feine Akzente wie Icons, Aufzählungszeichen oder Hover-Effekte ein. Tipp: Begrenzen Sie Blau auf einen Primärton im gesamten Auftritt für Konsistenz von Web bis Print.

Bildbeispiel von Oceanic Minimal generiert mit media.io

14) Retro Arcade

HEX:#2f6de0 #1a1033 #ff3d81 #20e3b2 #fef08a

Stimmung:retro, verspielt, plakativ

Ideal für:Mobile-Game-Promo-Anzeige

Arcade-Glanz und Pixelnostalgie machen diese Palette lebendig und temporeich. Perfekt für Mobile-Game-Anzeigen, Social-Promos und auffällige Banner, wo Farbe überzeugen soll. Pink für Power-ups nutzen, Mintgrün für sekundäre Buttons oder Badges. Tipp: Hintergründe in dunklem Violett halten, damit Blautöne und Highlights leuchten, ohne unruhig zu wirken.

Bildbeispiel einer Retro Arcade generiert mit media.io

15) Wintersport

HEX:#2e6fe8 #0b1d39 #dbeafe #ffffff #ff2d55

Stimmung:frisch, sportlich, energiegeladen

Ideal für:Werbung für Sportbekleidung

Kalte Luft und schnelle Bewegung zeigen sich in klaren Blautönen und strahlendem Weiß. Geeignet für Anzeigen für Sportbekleidung, leistungsstarke Landingpages und Produkt-Highlights. Heißes Pink als auffällige CTA-Farbe kombinieren, das helle Blau für luftige Abstände verwenden. Tipp: Beleuchtung neutral halten, damit das Blau authentisch wirkt und nicht ins Türkis abdriftet.

Bildbeispiel von Wintersport generiert mit media.io

16) Bibliotheks-Editorial

HEX:#3b78e0 #0f2a44 #f3f4f6 #c7d2fe #b45309

Stimmung:nachdenklich, akademisch, edel

Ideal für:Magazin-Editorial-Layout

Ruhige Lesesäle und Tinte auf Papier verleihen diesem Set einen nachdenklichen, redaktionellen Charakter. Gut geeignet für Magazinspreads, umfangreiche Berichte und Portfolio-Fallstudien mit viel Text. Warmes Braun für Zitate oder Abschnittsmarken verwenden, um Monotonie zu vermeiden. Tipp: Fließtext in tiefem Marineblau setzen und helle Grauränder nutzen, um Inhalte sauber einzurahmen.

Bildbeispiel von Bibliotheks-Editorial generiert mit media.io

17) Botanical Breeze

HEX:#2f6ee6 #e7f7ef #2f855a #fef3c7 #1f2937

Stimmung:frisch, natürlich, belebend

Ideal für:Aquarell-Botanische Illustration

Eine frische Brise durch Gartenblätter wirkt leicht, natürlich und erholsam. Diese mittleren Blautöne eignen sich optimal für Wellness-Illustrationen, ökologische Verpackungen und Frühlingskampagnen. Zartes Creme für Negativraum kombinieren, Anthrazit für Bildunterschriften und Labels verwenden. Tipp: Beim Aquarell Blau sanft ins Mint überlaufen lassen für weiche Verläufe statt harter Konturen.

Bildbeispiel einer Botanical Breeze generiert mit media.io

18) Luxusuhren-Studio

HEX:#2f6fe0 #0a0f1a #d1d5db #ffffff #cfa34a

Stimmung:luxuriös, dramatisch, kontrastreich

Ideal für:Produktaufnahme einer Luxusuhr

Tiefe Schatten und poliertes Metall erzeugen eine hochwertige, cineastische Stimmung. Ideal für hochwertige Produktseiten, Schmuckwerbung und exklusive Verpackungen, bei denen Kontraste Qualität vermitteln. Gold sparsam als Highlight einsetzen, die meisten Flächen in Schwarz, Weiß und Stahlgrau belassen. Tipp: Blau als Kantenlicht oder Hintergrundverlauf nutzen, um einen edlen statt sportlichen Look zu erzielen.

Bildbeispiel eines Luxusuhrenstudios generiert mit media.io

19) Inbox Clarity

HEX:#3a7ee6 #f8fafc #e2e8f0 #334155 #f59e0b

Stimmung:klar, effizient, freundlich

Ideal für:E-Mail-Newsletter-Vorlage

Klar strukturierte Überschriften und saubere Bereiche wirken wie ein gut organisiertes Postfach. Diese Palette ist ideal für Newsletter, Produktupdates oder Ankündigungen, die auf jedem Bildschirm gut erfassbar sein sollen. Amber für kleine Hervorhebungen wie Labels, Tags oder einen Button nutzen. Tipp: Längere Texte auf Weiß setzen und das mittlere Blau nur zur Hierarchiebildung verwenden, nicht für große Flächen.

Bildbeispiel von Inbox Clarity generiert mit media.io

20) Museumskatalog

HEX:#2d6de6 #0f172a #f1f5f9 #64748b #ef4444

Stimmung:kuratierte, ruhige, autoritative

Ideal für:Ausstellungskatalog-Cover

Kuratiere Galerien und präzise Beschriftungen vermitteln eine ruhige, seröse Atmosphäre. Eine starke Wahl für Katalog-Cover, Museumsprogramme und Kulturveranstaltungs-Materialien. Rot als Spot-Akzent z. B. für Datumsstempel oder Ausstellungstitel nutzen. Tipp: Die Palette überwiegend neutral halten, dann Blau verwenden, um Bilder einzurahmen und die Leserichtung zu steuern.

Bildbeispiel eines Museumskatalogs generiert mit media.io

21) Night Market

HEX:#2f6be6 #111827 #f472b6 #fbbf24 #e5e7eb

Stimmung:lebendig, urban, einladend

Ideal für:Streetfood-Flyer

Straßenlaternen, Schilder und Mitternachtssnacks sorgen für Lebendigkeit und eine einladende Atmosphäre. Diese Blautöne eignen sich für Flyer, Eventgrafiken und Social Posts, die Energie vermitteln sollen, ohne chaotisch zu wirken. Gelb für Preise und Highlights verwenden, Pink für verspielte Icons oder Überschriften. Tipp: Hintergrund dunkel halten, helle Akzente nur auf zwei Schlüsselbereiche beschränken, damit die Lesbarkeit bleibt.

Bildbeispiel vom Night Market generiert mit media.io

22) Soft Gradient Web

HEX:#3a7ae6 #b9d3ff #ffffff #2b3448 #ff7a59

Stimmung:warm, modern, einladend

Ideal für:Hero-Bereich einer Marketingseite

Sanfte Farbverläufe und einladende Kontraste verleihen der Seite Wärme und Modernität. Ideal für Marketing-Hero-Bereiche, Feature-Sections und Signup-Seiten, bei denen ein freundlicher erster Eindruck zählt. Koralle für Hauptbuttons nutzen, dunkles Schiefergrau für Navigation und Überschriften verwenden. Tipp: Hellblau als großzügigen Hintergrundverlauf einsetzen und das Hauptblau für wichtige UI-Elemente reservieren.

Bildbeispiel von Soft Gradient Web generiert mit media.io

Welche Farben passen zu Medium Blue?

Mittelblau kombiniert sich mühelos mit klaren Neutralen wie Weiß, Off-White und Hellblaugrau, was für eine luftige und gut lesbare Anmutung sorgt. Für Text und Struktur hält Marineblau oder Anthrazit den Kontrast stark, ohne zu hart zu wirken.

Für Akzente sorgen warme Farben wie Bernstein, Koralle und Orange für sofortige Fokusstellen bei Buttons, Preisen und Badges. Wer es kühler mag, setzt auf Türkis/Cyan für aktive Energie – bleibt dabei in der gleichen maritimen Familie.

Für einen besonders individuellen Akzent probieren Sie Violett oder Lavendel als sekundäres Highlight. Das sorgt für einen modernen, leicht futuristischen Touch, harmoniert aber weiterhin mit Mittelblau.

Wie verwendet man ein mittelblaues Farbschema in echten Designs?

Starten Sie mit der Entscheidung, welche Rolle das Mittelblau in Ihrem System spielt: Hauptmarkenfarbe, wichtigste UI-Aktion oder als Rahmen im Hintergrund. Nutzen Sie dann Neutralen für den Großteil der Flächen, sodass das Blau bewusst und nicht überwältigend wirkt.

Reservieren Sie einen warmen Akzent für „Aufmerksamkeitsmomente“ wie CTA-Buttons, wichtige Kennzahlen oder Labels. Wenige Akzente helfen, die Hierarchie klar zu halten und verhindern, dass die Palette unruhig wird.

Testen Sie den Kontrast möglichst früh, besonders bei kleinem Text und UI-Zuständen (Hover, Aktiv, Deaktiviert). Mittelblau kann auf verschiedenen Bildschirmen und im Druck unterschiedlich wirken, daher sorgt ein schneller Check für Konsistenz im Design.

Erstelle Medium Blue Visuals mit KI

Wenn Sie diese Paletten im Einsatz sehen möchten, können Sie passende Mockups und Grafiken mit KI generieren. Unter jeder Palette finden Sie Prompts, mit denen Sie schnell einheitliche Visuals für Präsentationen, Landingpages und Poster erstellen können.

Für optimale Ergebnisse verwenden Sie in jedem Prompt die gleichen fünf HEX-Codes, geben Sie den Layoutstil an (2D-UI, Poster, Katalogcover) und fixieren Sie das Seitenverhältnis mit der bereitgestellten --ar Einstellung.

Wenn Ihnen ein Look gefällt, erstellen Sie eine kleine Auswahl an Variationen (unterschiedliche Kompositionen, gleiche Palette), um schneller ein stimmiges Marken- oder Kampagnenset aufzubauen.

Weiter: Dschungelgrün-Farbpalette