# Marineblå gradient: mørke, tillitvekkende fargekoder

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

Marineblått er fargen på uniformer, banker og gode dresser, og nettopp derfor kan den ligne alle andre banker. Disse kodene beholder tilliten og fjerner kjedsomheten.

## The short version

- En marineblå gradient blander svært mørke blåtoner, vanligvis fra nesten svart marineblå til lysere kongeblå eller indigo.
- Marineblått virker seriøst, pålitelig og etablert, og brukes derfor ofte innen finans, jus og utdanning.
- For å gi marineblått særpreg, legg til en lyskilde, trekk fargen litt mot fiolett eller blågrønt, eller kombiner med en varm metallaksent som gull eller kobber.
- Hvit og lysegrå tekst er lett å lese på marineblått. Gulltekst fungerer også hvis den er lys nok.
- Mørke marinegradienter får lett fargebånd i komprimerte bilder. Legg til lett korn og eksporter i full størrelse.

En **marineblå gradient** blander dype blåtoner, vanligvis fra nesten svart marineblå som `#0b1630` til lysere kongeblå eller indigo. Den virker rolig, seriøs og pålitelig, og får hvit tekst til å se skarp ut. Problemet er at marineblått finnes overalt innen finans, jus og bedriftsdesign, så en flat overgang ofte ligner et standardvalg. Kodene nedenfor gir marineblått lys, temperatur og en aksent, slik at fargen beholder tilliten og får personlighet.

## Klassiske marineblå gradientkoder

Dette er de pålitelige variantene, nær ren marineblå, med akkurat nok variasjon til å unngå en ensfarget flate. De passer godt til presentasjonssider, årsrapporter, e-posttoppbilder og bunntekster på nettsteder.

- Klassisk marineblå: `linear-gradient(180deg, #1e3a8a 0%, #0b1630 100%)`
- Blekkmarine: `linear-gradient(135deg, #172554 0%, #0a0f24 100%)`
- Uniform: `linear-gradient(160deg, #1e40af 0%, #172554 60%, #0b1022 100%)`
- Nålestripe: `linear-gradient(90deg, #0f1d3a 0%, #1d3461 100%)`
- Lysbånd: `linear-gradient(180deg, #0b1630 0%, #13254d 50%, #0b1630 100%)`

Fem blandinger nær marineblå. Bevisst diskrete: De bærer tekst, logoer og diagrammer uten å konkurrere.

| Navn | Hex | Bruk som |
| --- | --- | --- |
| Navy (navngitt i CSS) | `#000080` | Bare referanse; virker hard på skjerm |
| Midnatt | `#0b1630` | Mørkeste stopp, nesten svart |
| Dyp marineblå | `#172554` | Bunn for hvit tekst |
| Kongemarine | `#1e3a8a` | Lys ende i en klassisk blanding |
| Kongeblå | `#1e40af` | Et løft eller høylys |

Marineblå heksadesimalkoder som blandes godt. Den navngitte CSS-fargen navy er svært mettet; mykere varianter virker mer raffinerte.

## Marinegradienter med et fargeløft

Trekk marineblått litt mot fiolett, så blir uttrykket kveld og luksus. Trekk det mot blågrønt, så blir det hav og teknologi. Begge endringer får valget til å føles bevisst. Den lysere enden bør fortsatt være dyp nok til hvit tekst over mesteparten av flaten.

- Marineblå til indigo: `linear-gradient(135deg, #312e81 0%, #172554 50%, #0b1630 100%)`
- Kongefiolett: `linear-gradient(135deg, #4c1d95 0%, #1e3a8a 100%)`
- Marineblå og blågrønn: `linear-gradient(160deg, #0f766e 0%, #172554 60%, #0b1022 100%)`
- Elektrisk blå til marineblå: `linear-gradient(135deg, #2563eb 0%, #1e3a8a 45%, #0b1630 100%)`

Marineblått med en retning. Indigo og fiolett virker eksklusivt, blågrønt friskt, og et klart blått hjørne teknisk.

## Marineblå med gull, kobber eller sølv

Få bakgrunner passer en metallaksent bedre enn marineblått. Gull på marineblått er tradisjonelt og festlig; kobber er varmere og mer moderne; sølv er kjølig og stillferdig. Hold metallet lite, som et lys i et hjørne eller en tynn strek, slik at marineblått fortsatt gjør mest av jobben. [Gullgradienter](https://gradiently.design/nb/guide/gold-gradient-design) og [sølvgradienter](https://gradiently.design/nb/guide/silver-gradient) viser metallsiden i detalj.

- Gulllys på marineblå: `radial-gradient(circle at 85% 15%, #f2d27a 0%, #b8862b 15%, #172554 45%, #0b1630 100%)`
- Kobberhjørne: `radial-gradient(circle at 15% 85%, #e8a87c 0%, #b4532a 18%, #1e293b 50%, #0b1630 100%)`
- Sølvkant: `linear-gradient(135deg, #e5e7eb 0%, #94a3b8 20%, #1e3a8a 55%, #0b1630 100%)`

Metallet holdes lite og samlet på ett sted. Øyet går dit først, så til ordene dine.

- Midnatt: #0b1630
- Dyp marineblå: #172554
- Kongemarine: #1e3a8a
- Gammelt gull: #d4a64a
- Elfenben: #f8f6f1
- Skifer: #94a3b8

Et marineblått og gyllent system: tre marineblå toner, en gullaksent, elfenben til tekst og skifer til sekundære detaljer.

## Midnattsmarine gradienter til natt og luksus

Radiale blandinger minner om en himmel etter solnedgang eller et svakt opplyst rom. De passer til gallainvitasjoner, hotellbarer, smykker, klokker og nattradio. Se [nattehimmelgradienter](https://gradiently.design/nb/guide/night-sky-gradient) for stjerneversjonen.

- Etter solnedgang: `radial-gradient(ellipse at 50% 0%, #1e40af 0%, #172554 40%, #070b18 100%)`
- Fløyelsrom: `radial-gradient(circle at 30% 70%, #312e81 0%, #0b1630 55%, #05070f 100%)`
- Byglød: `radial-gradient(ellipse at 50% 110%, #3b82f6 0%, #1e3a8a 25%, #0b1630 60%, #05070f 100%)`

Marineblått med ett mykt lys. Mørkeste stopp er nær svart, men blåtonen hindrer at det virker tomt.

## Hvor marinegradienter fortjener plassen sin

Marineblått er best der ordene betyr mer enn bildet, fordi det gir teksten en rolig bunn med høy kontrast. Noen bruksområder å låne:

- **Presentasjonssider i 1920×1080:** «Klassisk marineblå» til seksjonsskiller, med én gullstrek under hver tittel.
- **LinkedIn-profilbanner i 1584×396:** «Marineblå og blågrønn» fra venstre til høyre, mørkest bak bildet ditt.
- **E-posttoppbilde i 1200×600:** «Blekkmarine» med en elfenbensfarget overskrift, slik at toppbildet allerede passer i innbokser med mørk modus.
- **Invitasjoner til avslutninger og prisutdelinger:** «Gulllys på marineblå» trykt som A5-flyer.
- **Diagrammer og dashbord:** En dyp marineblå bunn gjør klare datafarger lette å skille.

## Slik gjør du marineblått mindre upersonlig

### Ligner alle banker

- Flat `#000080` med hvit logo
- En rett overgang fra topp til bunn
- Knapper i klar mellomblå
- Bildebankfoto av et håndtrykk

### Virker gjennomtenkt

- Myk marineblå som trekker mot fiolett eller blågrønt
- Lys fra ett sted
- Én varm aksent: gull, kobber eller korall
- Fint korn som gir et trykt preg

Ingen av disse endringene koster tillit. De gjør bare merkevaren gjenkjennelig ved første blikk, noe som betyr mye når alle konkurrenter bruker samme blåfarge. [Særpregede merkevareelementer](https://gradiently.design/nb/guide/distinctive-brand-assets) forklarer hvorfor gjenkjennelse kommer fra å eie noe ingen andre bruker. En nyttig test: Dekk logoen og spør om noen fortsatt kunne kjenne igjen designet som ditt. Med en flat marineblå overgang er svaret nesten alltid nei.

Et finansrådgivningsfirmas LinkedIn-lenkebilde med hvit tekst på en marineblå gradient belyst fra ett hjørne

Et lenkebilde til LinkedIn på dyp marineblå med ett varmt lys. Seriøst og særpreget.

Samme design for økonomisk planlegging som et stående innlegg på marinegradienten

Samme design som et stående innlegg, med lyset flyttet for å passe det høyere formatet.

## Marineblå gradient i CSS uten fargebånd

Mørke, subtile blandinger viser fargebånd tydeligst: Du ser trinn fremfor en jevn overgang, særlig etter at en plattform har komprimert bildet på nytt. På nettet skjuler noen ekstra stopp og et kornlag dette. [Fargebånd i gradienter](https://gradiently.design/nb/guide/gradient-banding) forklarer årsaken.

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

Ekstra stopp i midten jevner overgangen, svakt gulllys gir varme, og et kornlag skjuler trinnene som gjenstår.

Tekst er den enkle delen med marineblått. Hvitt og elfenben har god kontrast på alle marineblåtonene over, og gammelt gull `#d4a64a` gir omtrent 8 til 1 på midnatt, så det fungerer til overskrifter. Pass på klart blått: En mellomblå som `#3b82f6` bak hvit tekst faller til omtrent 3,7 til 1. I Gradiently håndterer Auto-tekstfarge dette per linje ved å velge tekstfarge fra Markens egen palett. [Designer](https://gradiently.design/nb/guide/what-is-gradiently) kan sette opp en hel marineblå kampanje i stemmen til merkevaresettet ditt.

## FAQ

### Hva er heksadesimalkoden for marineblått?

Den navngitte CSS-fargen `navy` er `#000080`. Mykere varianter som `#172554` eller `#0b1630` ser vanligvis bedre ut på skjerm.

### Hvilke farger passer med en marineblå gradient?

Gull, kobber, elfenben, skifer og korall. Én varm aksent hindrer marineblått i å virke kaldt eller upersonlig.

### Passer marineblått til en bedriftsprofil?

Det virker seriøst og pålitelig, og passer derfor finans, jus og utdanning. Siden så mange konkurrenter bruker det, bør du legge til lys eller en aksent for å være gjenkjennelig.

### Hvorfor har marinegradienten min striper?

Det er fargebånd, vanlig i mørke, subtile overganger. Legg til flere stopp og et lett kornlag, og unngå hard JPEG-komprimering.

### Kan jeg bruke gulltekst på marineblått?

Ja, hvis gullet er lyst nok. `#d4a64a` på `#0b1630` gir omtrent 8 til 1, som oppfyller kravene til overskrifter og brødtekst.