# Marineblauw verloop: donkere, betrouwbare codes

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

Marineblauw is de kleur van uniformen, banken en goede pakken, en juist daarom kan het eruitzien als elke andere bank. Deze codes houden het vertrouwen en laten de saaiheid achterwege.

## The short version

- Een marineblauw verloop mengt zeer donkere blauwtinten, meestal van een bijna zwart marineblauw naar een helderder koningsblauw of indigo.
- Marineblauw oogt serieus, betrouwbaar en gevestigd, daarom gebruiken financiën, recht en onderwijs het zo vaak.
- Om te voorkomen dat marineblauw generiek oogt, voeg je een lichtbron toe, laat je het licht naar violet of turquoise neigen of combineer je het met een warm metaalaccent zoals goud of koper.
- Witte en lichtgrijze tekst leest makkelijk op marineblauw; gouden tekst werkt ook als hij licht genoeg is.
- Donkere marineverlopen vertonen makkelijk banding in gecomprimeerde afbeeldingen, dus voeg lichte korrel toe en exporteer op volledig formaat.

Een **marineblauw verloop** mengt diepe blauwtinten, meestal van een bijna zwart marineblauw zoals `#0b1630` naar een helderder koningsblauw of indigo. Het oogt rustig, serieus en betrouwbaar en laat witte letters scherp ogen. Het probleem is dat marineblauw overal zit in financiën, recht en zakelijk ontwerp, waardoor een vlakke marineblauwe overgang vaak op een standaardinstelling lijkt. De codes hieronder geven marineblauw licht, temperatuur en een accent, zodat het het vertrouwen houdt en een eigen karakter krijgt.

## Klassieke marineblauwe verloopcodes

Dit zijn de betrouwbare, dicht bij zuiver marineblauw, met net genoeg beweging om niet op een effen vulling te lijken. Ze zijn ideaal voor presentatiedia’s, jaarverslagen, e-mailkoppen en websitefooters.

- Klassiek marine: `linear-gradient(180deg, #1e3a8a 0%, #0b1630 100%)`
- Inktmarine: `linear-gradient(135deg, #172554 0%, #0a0f24 100%)`
- Uniform: `linear-gradient(160deg, #1e40af 0%, #172554 60%, #0b1022 100%)`
- Krijtstreep: `linear-gradient(90deg, #0f1d3a 0%, #1d3461 100%)`
- Verlichte band: `linear-gradient(180deg, #0b1630 0%, #13254d 50%, #0b1630 100%)`

Vijf mengsels dicht bij marineblauw. Bewust subtiel: ze dragen tekst, logo’s en grafieken zonder te concurreren.

| Naam | Hex | Gebruik als |
| --- | --- | --- |
| Navy (CSS-naam) | `#000080` | Alleen als referentie; oogt hard op schermen |
| Middernacht | `#0b1630` | De donkerste stop, bijna zwart |
| Diep marineblauw | `#172554` | Een ondergrond voor witte letters |
| Koninklijk marine | `#1e3a8a` | Het lichte eind van een klassiek mengsel |
| Koningsblauw | `#1e40af` | Een lift of highlight |

Hexcodes van marineblauw die goed mengen. Het CSS-marineblauw met naam is zeer verzadigd; zachtere versies ogen verfijnder.

## Marineverlopen met een vleugje kleur

Laat marineblauw een paar graden naar violet neigen en het wordt avond en luxe; laat het naar turquoise neigen en het wordt de zee en technologie. Elke verschuiving laat het gekozen voelen. Het helderste uiteinde moet nog steeds diep genoeg blijven voor witte tekst over het grootste deel van het vlak.

- Marine naar indigo: `linear-gradient(135deg, #312e81 0%, #172554 50%, #0b1630 100%)`
- Koninklijk violet: `linear-gradient(135deg, #4c1d95 0%, #1e3a8a 100%)`
- Marine en turquoise: `linear-gradient(160deg, #0f766e 0%, #172554 60%, #0b1022 100%)`
- Elektrisch naar marine: `linear-gradient(135deg, #2563eb 0%, #1e3a8a 45%, #0b1630 100%)`

Marineblauw met een neiging. Indigo en violet voelen premium, turquoise voelt fris, een helderblauwe hoek voelt technisch.

## Marineblauw en goud, koper of zilver

Weinig ondergronden passen beter bij een metaalaccent dan marineblauw. Goud op marineblauw is traditioneel en feestelijk; koper is warmer en moderner; zilver is koel en stil. Houd het metaal klein, als een licht in een hoek of een dunne lijn, zodat het marineblauw het meeste werk blijft doen. [Goudverlopen](https://gradiently.design/nl/guide/gold-gradient-design) en [zilververlopen](https://gradiently.design/nl/guide/silver-gradient) laten de metaalkant in detail zien.

- Goudlicht op marine: `radial-gradient(circle at 85% 15%, #f2d27a 0%, #b8862b 15%, #172554 45%, #0b1630 100%)`
- Koperen hoek: `radial-gradient(circle at 15% 85%, #e8a87c 0%, #b4532a 18%, #1e293b 50%, #0b1630 100%)`
- Zilveren rand: `linear-gradient(135deg, #e5e7eb 0%, #94a3b8 20%, #1e3a8a 55%, #0b1630 100%)`

Metaal klein en op één plek. Het oog gaat daar eerst heen, dan naar je woorden.

- Middernacht: #0b1630
- Diep marineblauw: #172554
- Koninklijk marine: #1e3a8a
- Oud goud: #d4a64a
- Ivoor: #f8f6f1
- Leisteen: #94a3b8

Een marine-en-goudsysteem: drie marinetinten, een gouden accent, ivoor voor tekst en leisteen voor secundair detail.

## Middernachtmarineverlopen voor nacht en luxe

Radiale mengsels voelen als een hemel na zonsondergang of een schemerig verlichte kamer. Ze passen bij galauitnodigingen, hotelbars, sieraden, horloges en late radio. Voor de versie met sterren, zie [nachthemelverlopen](https://gradiently.design/nl/guide/night-sky-gradient).

- Na zonsondergang: `radial-gradient(ellipse at 50% 0%, #1e40af 0%, #172554 40%, #070b18 100%)`
- Fluwelen kamer: `radial-gradient(circle at 30% 70%, #312e81 0%, #0b1630 55%, #05070f 100%)`
- Stadsgloed: `radial-gradient(ellipse at 50% 110%, #3b82f6 0%, #1e3a8a 25%, #0b1630 60%, #05070f 100%)`

Marineblauw met één zacht licht. De donkerste stop ligt dicht bij zwart, maar het blauw laat hem niet leeg voelen.

## Waar marineverlopen hun plek verdienen

Marineblauw is op zijn best waar de woorden meer tellen dan het beeld, omdat het letters een rustige ondergrond met hoog contrast geeft. Enkele toepassingen om te stelen:

- **Dia’s van 1920×1080:** “Klassiek marine” voor sectiescheidingen, met één gouden lijn onder elke titel.
- **LinkedIn-profielbanner van 1584×396:** “Marine en turquoise” van links naar rechts, het donkerst achter je foto.
- **E-mailkop van 1200×600:** “Inktmarine” met een ivoorkleurige kop, zodat de kop zich al thuis voelt in inboxen met donkere modus.
- **Uitnodigingen voor diploma-uitreikingen en prijsuitreikingen:** “Goudlicht op marine” gedrukt als A5-flyer.
- **Grafieken en dashboards:** een diepe marineblauwe ondergrond maakt heldere datakleuren makkelijk te onderscheiden.

## Zo laat je marineblauw minder zakelijk ogen

### Oogt als elke bank

- Vlak `#000080` met een wit logo
- Een rechte overgang van boven naar beneden
- Felle middenblauwe knoppen
- Stockfoto van een handdruk

### Oogt doordacht

- Een verzacht marineblauw met een neiging naar violet of turquoise
- Licht dat van één plek komt
- Eén warm accent: goud, koper of koraal
- Een fijne korrel die het gedrukt laat voelen

Geen van deze veranderingen kost vertrouwen. Ze maken het merk alleen in één oogopslag herkenbaar, wat telt als elke concurrent hetzelfde blauw gebruikt. [Onderscheidende merkelementen](https://gradiently.design/nl/guide/distinctive-brand-assets) legt uit waarom herkenning komt van iets bezitten wat niemand anders gebruikt. Een nuttige test: dek je logo af en vraag of iemand nog kan zien dat het ontwerp van jou is. Bij een vlakke marineblauwe overgang is het antwoord bijna altijd nee.

Een LinkedIn-linkafbeelding van een financieel adviesbureau met witte tekst op een marineblauw verloop dat vanuit één hoek wordt verlicht

Een LinkedIn-linkafbeelding op diep marineblauw met één warm licht. Serieus, niet anoniem.

Hetzelfde ontwerp voor financiële planning als staande post op het marineblauwe verloop

Hetzelfde ontwerp als staande post, met het licht verplaatst voor het hogere beeld.

## Marineblauw verloop in CSS zonder banding

Donkere, subtiele mengsels zijn waar banding het meest opvalt: je ziet zichtbare trappen in plaats van een vloeiende overgang, vooral nadat een platform je afbeelding opnieuw comprimeert. Op het web verbergen een paar extra stops en een korrellaag het. [Banding in verlopen](https://gradiently.design/nl/guide/gradient-banding) legt de oorzaak uit.

```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 */
}
```

Extra middelste stops maken de overgang vloeiender, een zwak goudlicht voegt warmte toe en een korrellaag verbergt de trappen die overblijven.

Tekst is het makkelijke deel bij marineblauw. Wit en ivoor halen het contrast ruim op elk marineblauw hierboven, en oud goud `#d4a64a` leest op ongeveer 8 op 1 op middernacht, dus het werkt voor koppen. Let op felblauw: een middenblauw zoals `#3b82f6` achter witte tekst zakt naar ongeveer 3,7 op 1. In Gradiently regelt Auto-inkt dit per regel, door letters uit het eigen palet van de Mark te kiezen, en de [Designer](https://gradiently.design/nl/guide/what-is-gradiently) kan een hele marineblauwe campagne opmaken in de stem van je merkkit.

## FAQ

### Wat is de hexcode voor marineblauw?

De CSS-kleurnaam `navy` is `#000080`. Zachtere versies zoals `#172554` of `#0b1630` zien er op schermen meestal beter uit.

### Welke kleuren passen bij een marineblauw verloop?

Goud, koper, ivoor, leisteen en koraal. Eén warm accent voorkomt dat marineblauw koud of zakelijk oogt.

### Is marineblauw goed voor een zakelijk merk?

Het oogt serieus en betrouwbaar, dus het past bij financiën, recht en onderwijs. Omdat zoveel concurrenten het gebruiken, voeg je licht of een accent toe om herkenbaar te blijven.

### Waarom toont mijn marineblauwe verloop strepen?

Dat is banding, vaak bij donkere, subtiele overgangen. Voeg meer stops en een lichte korrellaag toe en vermijd zware JPEG-compressie.

### Kan ik gouden tekst op marineblauw gebruiken?

Ja, als het goud licht genoeg is. `#d4a64a` op `#0b1630` meet ongeveer 8 op 1, wat slaagt voor koppen en lopende tekst.