# Marineblau-Verlauf: dunkle, vertrauenswürdige Codes

[Canonical HTML page](https://gradiently.design/de/guide/navy-gradient)

Marineblau ist die Farbe von Uniformen, Banken und guten Anzügen, genau deshalb kann es wie jede andere Bank aussehen. Diese Codes behalten sein Vertrauen und verlieren die Langeweile.

## The short version

- Ein Marineblau-Verlauf mischt sehr dunkle Blautöne, meist von einem fast schwarzen Marine zu einem helleren Royal- oder Indigoblau.
- Marineblau wirkt seriös, verlässlich und etabliert, weshalb Finanzen, Recht und Bildung es so oft nutzen.
- Damit Marineblau nicht beliebig wirkt, füge eine Lichtquelle hinzu, neige es leicht zu Violett oder Petrol oder kombiniere es mit einem warmen metallischen Akzent wie Gold oder Kupfer.
- Weiße und hellgraue Schrift ist auf Marineblau leicht lesbar, goldene Schrift funktioniert auch, wenn sie hell genug ist.
- Dunkle Marineverläufe zeigen in komprimierten Bildern leicht Banding, füge also leichtes Korn hinzu und exportiere in voller Größe.

Ein **Marineblau-Verlauf** mischt tiefe Blautöne, typischerweise von einem fast schwarzen Marine wie `#0b1630` hinauf zu einem helleren Royalblau oder Indigo. Er wirkt ruhig, seriös und verlässlich und lässt weiße Schrift klar aussehen. Das Problem: Marineblau ist in Finanzen, Recht und Corporate Design überall, deshalb sieht ein flacher Marine-Übergang oft nach Standard aus. Die Codes unten geben Marineblau Licht, Temperatur und einen Akzent, sodass es sein Vertrauen behält und eine Persönlichkeit gewinnt.

## Klassische Marineblau-Verlauf-Codes

Das sind die verlässlichen, nah am reinen Marineblau, mit gerade genug Bewegung, damit sie nicht wie eine einfarbige Füllung aussehen. Sie sind ideal für Präsentationsfolien, Jahresberichte, E-Mail-Header und Website-Footer.

- Klassisches Marine: `linear-gradient(180deg, #1e3a8a 0%, #0b1630 100%)`
- Tintenmarine: `linear-gradient(135deg, #172554 0%, #0a0f24 100%)`
- Uniform: `linear-gradient(160deg, #1e40af 0%, #172554 60%, #0b1022 100%)`
- Nadelstreifen: `linear-gradient(90deg, #0f1d3a 0%, #1d3461 100%)`
- Beleuchtetes Band: `linear-gradient(180deg, #0b1630 0%, #13254d 50%, #0b1630 100%)`

Fünf Mischungen nah am Marineblau. Absichtlich dezent: Sie tragen Text, Logos und Diagramme, ohne zu konkurrieren.

| Name | Hex | Einsatz als |
| --- | --- | --- |
| Marine (CSS-Name) | `#000080` | Nur als Referenz, wirkt auf Bildschirmen hart |
| Mitternacht | `#0b1630` | Der dunkelste Stopp, fast schwarz |
| Tiefes Marine | `#172554` | Ein Grund für weiße Schrift |
| Königsmarine | `#1e3a8a` | Das helle Ende einer klassischen Mischung |
| Royalblau | `#1e40af` | Eine Aufhellung oder ein Glanzlicht |

Marineblau-Hex-Codes, die gut mischen. Das benannte CSS-Marine ist sehr gesättigt, weichere Versionen wirken edler.

## Marineblau-Verläufe mit einem Farbakzent

Neige Marineblau ein paar Grad zu Violett, und es wird zu Abend und Luxus, neige es zu Petrol, und es wird zu Meer und Technologie. Beide Verschiebungen lassen es gewählt wirken. Das hellere Ende sollte trotzdem tief genug bleiben, dass weiße Schrift über den größten Teil der Fläche lesbar ist.

- Marine zu Indigo: `linear-gradient(135deg, #312e81 0%, #172554 50%, #0b1630 100%)`
- Königsviolett: `linear-gradient(135deg, #4c1d95 0%, #1e3a8a 100%)`
- Marine und Petrol: `linear-gradient(160deg, #0f766e 0%, #172554 60%, #0b1022 100%)`
- Elektrisch zu Marine: `linear-gradient(135deg, #2563eb 0%, #1e3a8a 45%, #0b1630 100%)`

Marineblau mit Neigung. Indigo und Violett wirken hochwertig, Petrol frisch, eine leuchtend blaue Ecke technisch.

## Marineblau und Gold, Kupfer oder Silber

Wenige Gründe passen besser zu einem metallischen Akzent als Marineblau. Gold auf Marine ist traditionell und festlich, Kupfer wärmer und moderner, Silber kühl und leise. Halte das Metall klein, als Licht in einer Ecke oder dünne Linie, damit das Marineblau die meiste Arbeit macht. [Goldverläufe](https://gradiently.design/de/guide/gold-gradient-design) und [Silberverläufe](https://gradiently.design/de/guide/silver-gradient) zeigen die metallische Seite im Detail.

- Goldlicht auf Marine: `radial-gradient(circle at 85% 15%, #f2d27a 0%, #b8862b 15%, #172554 45%, #0b1630 100%)`
- Kupferecke: `radial-gradient(circle at 15% 85%, #e8a87c 0%, #b4532a 18%, #1e293b 50%, #0b1630 100%)`
- Silberkante: `linear-gradient(135deg, #e5e7eb 0%, #94a3b8 20%, #1e3a8a 55%, #0b1630 100%)`

Metall, klein gehalten und an einer Stelle. Das Auge geht zuerst dorthin, dann zu deinen Worten.

- Mitternacht: #0b1630
- Tiefes Marine: #172554
- Königsmarine: #1e3a8a
- Altgold: #d4a64a
- Elfenbein: #f8f6f1
- Schiefer: #94a3b8

Ein Marine-Gold-System: drei Marinetöne, ein Goldakzent, Elfenbein für Text und Schiefer für Nebendetails.

## Mitternachtsmarine-Verläufe für Nacht und Luxus

Radiale Mischungen wirken wie ein Himmel nach Sonnenuntergang oder ein schwach beleuchteter Raum. Sie passen zu Galaeinladungen, Hotelbars, Schmuck, Uhren und spätem Radio. Für die Sternenversion siehe [Nachthimmel-Verläufe](https://gradiently.design/de/guide/night-sky-gradient).

- Nach Sonnenuntergang: `radial-gradient(ellipse at 50% 0%, #1e40af 0%, #172554 40%, #070b18 100%)`
- Samtraum: `radial-gradient(circle at 30% 70%, #312e81 0%, #0b1630 55%, #05070f 100%)`
- Stadtglühen: `radial-gradient(ellipse at 50% 110%, #3b82f6 0%, #1e3a8a 25%, #0b1630 60%, #05070f 100%)`

Marineblau mit einem weichen Licht. Der dunkelste Stopp liegt nahe Schwarz, aber das Blau verhindert, dass er leer wirkt.

## Wo Marineblau-Verläufe ihren Platz verdienen

Marineblau ist am besten dort, wo die Worte mehr zählen als das Bild, weil es Schrift einen ruhigen, kontrastreichen Grund gibt. Einige Einsätze, die man sich abschauen sollte:

- **Folien im Format 1920×1080:** „Klassisches Marine“ für Kapiteltrenner, mit einer Goldlinie unter jedem Titel.
- **LinkedIn-Profilbanner im Format 1584×396:** „Marine und Petrol“ von links nach rechts, am dunkelsten hinter deinem Foto.
- **E-Mail-Header im Format 1200×600:** „Tintenmarine“ mit elfenbeinfarbener Überschrift, sodass der Header in Dunkelmodus-Postfächern schon zu Hause wirkt.
- **Einladungen zu Abschlussfeiern und Preisverleihungen:** „Goldlicht auf Marine“, gedruckt als A5-Flyer.
- **Diagramme und Dashboards:** Ein tiefer Marinegrund lässt leuchtende Datenfarben leicht unterscheiden.

## So wirkt Marineblau weniger bieder

### Wirkt wie jede Bank

- Flaches `#000080` mit weißem Logo
- Ein gerader Übergang von oben nach unten
- Leuchtend mittelblaue Buttons
- Stockfoto eines Händedrucks

### Wirkt durchdacht

- Ein weicheres Marine mit Neigung zu Violett oder Petrol
- Licht, das von einer Stelle kommt
- Ein warmer Akzent: Gold, Kupfer oder Koralle
- Ein feines Korn, das es gedruckt wirken lässt

Nichts davon kostet Vertrauen. Es macht die Marke nur auf einen Blick erkennbar, was zählt, wenn jeder Wettbewerber dasselbe Blau nutzt. [Unverwechselbare Markenelemente](https://gradiently.design/de/guide/distinctive-brand-assets) erklärt, warum Wiedererkennung daraus entsteht, etwas zu besitzen, das niemand sonst nutzt. Ein nützlicher Test: Decke dein Logo ab und frage, ob jemand das Design trotzdem als deins erkennen könnte. Bei einem flachen Marine-Übergang lautet die Antwort fast immer nein.

Ein LinkedIn-Linkbild einer Finanzplanungsfirma mit weißem Text auf einem Marineblau-Verlauf, von einer Ecke beleuchtet

Ein LinkedIn-Linkbild auf tiefem Marine mit einem warmen Licht. Seriös, nicht anonym.

Dasselbe Finanzplanungsdesign als Post im Hochformat auf dem Marineblau-Verlauf

Dasselbe Design als Post im Hochformat, mit dem Licht passend zum höheren Format verschoben.

## Marineblau-Verlauf in CSS ohne Banding

Dunkle, feine Mischungen sind der Ort, an dem Banding am stärksten auffällt: Du siehst sichtbare Stufen statt eines glatten Übergangs, besonders nachdem eine Plattform dein Bild neu komprimiert. Im Web verstecken ein paar zusätzliche Stopps und eine Kornebene es. [Gradient Banding](https://gradiently.design/de/guide/gradient-banding) erklärt die Ursache.

```css
.hero-navy {
  position: relative;
  background-color: #0b1630; /* fallback */
  background-image:
    radial-gradient(circle at 85% 15%, rgb(212 166 74 / 0.35) 0%, transparent 35%),
    linear-gradient(160deg, #1e3a8a 0%, #172554 45%, #0f1d3a 75%, #0b1630 100%);
  color: #f8f6f1;
}

/* fine grain on top to break up banding */
.hero-navy::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("/grain.png"); /* a small tiling noise image */
}
```

Zusätzliche mittlere Stopps glätten den Übergang, ein schwaches Goldlicht bringt Wärme, und eine Kornebene versteckt verbleibende Stufen.

Text ist bei Marineblau der leichte Teil. Weiß und Elfenbein bestehen den Kontrast bei jedem Marineton oben bequem, und Altgold `#d4a64a` liest sich mit etwa 8 zu 1 auf Mitternacht, funktioniert also für Überschriften. Achte auf leuchtendes Blau: Ein mittleres Blau wie `#3b82f6` hinter weißem Text fällt auf etwa 3,7 zu 1. In Gradiently übernimmt Automatische Farbe das pro Zeile und wählt die Schrift aus der Palette des Mark, und der [Designer](https://gradiently.design/de/guide/what-is-gradiently) kann eine ganze Marine-Kampagne in der Stimme deines Markenkits anlegen.

## FAQ

### Wie lautet der Hex-Code für Marineblau?

Die benannte CSS-Farbe `navy` ist `#000080`. Weichere Versionen wie `#172554` oder `#0b1630` wirken auf Bildschirmen meist besser.

### Welche Farben passen zu einem Marineblau-Verlauf?

Gold, Kupfer, Elfenbein, Schiefer und Koralle. Ein einzelner warmer Akzent verhindert, dass Marineblau kalt oder bieder wirkt.

### Ist Marineblau gut für eine Unternehmensmarke?

Es wirkt seriös und verlässlich und passt daher zu Finanzen, Recht und Bildung. Weil so viele Wettbewerber es nutzen, füge Licht oder einen Akzent hinzu, um erkennbar zu bleiben.

### Warum zeigt mein Marineblau-Verlauf Streifen?

Das ist Banding, häufig bei dunklen, feinen Übergängen. Füge mehr Stopps und eine leichte Kornebene hinzu und vermeide starke JPEG-Kompression.

### Kann ich goldene Schrift auf Marineblau nutzen?

Ja, wenn das Gold hell genug ist. `#d4a64a` auf `#0b1630` misst etwa 8 zu 1, was für Überschriften und Fließtext besteht.