# Marineblå gradient: mørke, tillidsvækkende koder

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

Marineblå er farven på uniformer, banker og gode jakkesæt, og netop derfor kan den ligne enhver anden bank. Disse koder bevarer tilliden og mister kedsomheden.

## The short version

- En marineblå gradient blander meget mørke blå, som regel fra en næsten sort marineblå til en klarere kongeblå eller indigo.
- Marineblå virker seriøs, pålidelig og etableret, og derfor bruger finans, jura og uddannelse den så ofte.
- For at marineblå ikke skal virke generisk, så tilføj en lyskilde, lad den hælde en smule mod violet eller petrol, eller kombinér den med en varm metallisk accent som guld eller kobber.
- Hvid og lysegrå tekst læses nemt på marineblå; guldtekst virker også, hvis den er lys nok.
- Mørke marineblå gradienter får nemt banding i komprimerede billeder, så tilføj let korn, og eksportér i fuld størrelse.

En **marineblå gradient** blander dybe blå, typisk fra en næsten sort marineblå som `#0b1630` op til en klarere kongeblå eller indigo. Den virker rolig, seriøs og pålidelig, og den får hvid tekst til at se skarp ud. Problemet er, at marineblå er overalt i finans, jura og virksomhedsdesign, så en flad marineblå toning ofte ligner en standardindstilling. Koderne nedenfor giver marineblå lys, temperatur og en accent, så den bevarer tilliden og får en personlighed.

## Klassiske marineblå gradientkoder

Det er de pålidelige, tæt på ren marineblå, med lige nok bevægelse til, at de ikke ligner en ensfarvet flade. De er ideelle til præsentationsslides, årsrapporter, mailheadere og footere på websites.

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

Fem blandinger tæt på marineblå. Diskrete med vilje: de bærer tekst, logoer og diagrammer uden at konkurrere.

| Navn | Hex | Brug den som |
| --- | --- | --- |
| Navy (navngivet i CSS) | `#000080` | Kun som reference; virker hård på skærme |
| Midnat | `#0b1630` | Det mørkeste stop, næsten sort |
| Dyb marineblå | `#172554` | En bund til hvid tekst |
| Kongemarine | `#1e3a8a` | Den lyse ende af en klassisk blanding |
| Kongeblå | `#1e40af` | Et løft eller et højlys |

Marineblå hexkoder, der blander sig godt. Den navngivne CSS-farve navy er meget mættet; blødere versioner ser mere raffinerede ud.

## Marineblå gradienter med et farveløft

Lad marineblå hælde nogle få grader mod violet, så bliver den aften og luksus; lad den hælde mod petrol, så bliver den hav og teknologi. Begge forskydninger får den til at føles valgt. Den lyse ende skal stadig være dyb nok til hvid tekst over det meste af fladen.

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

Marineblå med en hældning. Indigo og violet føles eksklusive, petrol føles frisk, et klart blåt hjørne føles teknisk.

## Marineblå og guld, kobber eller sølv

Få bunde passer bedre til en metallisk accent end marineblå. Guld på marineblå er traditionelt og festligt; kobber er varmere og mere moderne; sølv er køligt og stille. Hold metallet lille, som et lys i et hjørne eller en tynd linje, så marineblå stadig gør det meste af arbejdet. [Guldgradienter](https://gradiently.design/da/guide/gold-gradient-design) og [sølvgradienter](https://gradiently.design/da/guide/silver-gradient) viser den metalliske side i detaljer.

- Guldlys 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 holdt lille og samlet ét sted. Øjet går derhen først og så videre til dine ord.

- Midnat: #0b1630
- Dyb marineblå: #172554
- Kongemarine: #1e3a8a
- Gammelt guld: #d4a64a
- Elfenben: #f8f6f1
- Skifer: #94a3b8

Et system med marineblå og guld: tre marineblå, en guldaccent, elfenben til tekst og skifer til sekundære detaljer.

## Midnatsblå gradienter til nat og luksus

Radiale blandinger føles som en himmel efter solnedgang eller et svagt oplyst rum. De passer til galainvitationer, hotelbarer, smykker, ure og natradio. Den stjerneklare version finder du i [nattehimmel-gradienter](https://gradiently.design/da/guide/night-sky-gradient).

- Efter solnedgang: `radial-gradient(ellipse at 50% 0%, #1e40af 0%, #172554 40%, #070b18 100%)`
- Fløjlsrummet: `radial-gradient(circle at 30% 70%, #312e81 0%, #0b1630 55%, #05070f 100%)`
- Byens skær: `radial-gradient(ellipse at 50% 110%, #3b82f6 0%, #1e3a8a 25%, #0b1630 60%, #05070f 100%)`

Marineblå med ét blødt lys. Det mørkeste stop er tæt på sort, men det blå forhindrer det i at føles tomt.

## Hvor marineblå gradienter gør sig fortjent

Marineblå er bedst, hvor ordene betyder mere end billedet, fordi den giver typografien en rolig bund med høj kontrast. Nogle anvendelser, der er værd at stjæle:

- **Slides i 1920×1080:** »Klassisk marineblå« til afsnitsskillere med én guldlinje under hver titel.
- **LinkedIn-profilbanner i 1584×396:** »Marineblå og petrol« fra venstre mod højre, mørkest bag dit billede.
- **Mailheader i 1200×600:** »Blækmarine« med en overskrift i elfenben, så headeren allerede føles hjemme i indbakker med mørk tilstand.
- **Invitationer til dimission og prisuddelinger:** »Guldlys på marineblå« trykt som en A5-flyer.
- **Diagrammer og dashboards:** en dyb marineblå bund gør det nemt at skelne klare datafarver fra hinanden.

## Sådan får du marineblå til at virke mindre korporativ

### Ligner enhver bank

- Flad `#000080` med et hvidt logo
- En lige toning fra top til bund
- Klare mellemblå knapper
- Stockfoto af et håndtryk

### Virker gennemtænkt

- En blødere marineblå, der hælder mod violet eller petrol
- Lys, der kommer fra ét sted
- Én varm accent: guld, kobber eller koral
- Et fint korn, der får den til at føles trykt

Ingen af disse ændringer koster tillid. De gør bare brandet genkendeligt med ét blik, og det betyder noget, når alle konkurrenter bruger den samme blå. [Særprægede brandaktiver](https://gradiently.design/da/guide/distinctive-brand-assets) forklarer, hvorfor genkendelse kommer af at eje noget, ingen andre bruger. En nyttig test: dæk dit logo, og spørg, om nogen stadig kan se, at designet er dit. Med en flad marineblå toning er svaret næsten altid nej.

Et LinkedIn-linkbillede for et rådgivningsfirma med hvid tekst på en marineblå gradient, der er oplyst fra ét hjørne

Et LinkedIn-linkbillede på en dyb marineblå med ét varmt lys. Seriøst, ikke anonymt.

Det samme design for økonomisk planlægning som stående opslag på den marineblå gradient

Det samme design som stående opslag, med lyset flyttet, så det passer til det højere format.

## Marineblå gradient i CSS uden banding

Mørke, subtile blandinger er der, hvor banding viser sig mest: du ser synlige trin i stedet for en glat toning, især når en platform komprimerer dit billede igen. På nettet skjuler et par ekstra stop og et kornlag det. [Banding i gradienter](https://gradiently.design/da/guide/gradient-banding) forklarer årsagen.

```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 midterstop gør toningen glattere, et svagt guldlys tilføjer varme, og et kornlag skjuler de trin, der måtte være tilbage.

Tekst er den nemme del med marineblå. Hvid og elfenben klarer kontrasten komfortabelt på alle marineblå ovenfor, og gammelt guld `#d4a64a` læses ved omkring 8 til 1 på midnat, så det fungerer til overskrifter. Det, du skal holde øje med, er klar blå: en mellemblå som `#3b82f6` bag hvid tekst falder til omkring 3,7 til 1. I Gradiently klarer Automatisk tekstfarve det linje for linje ved at vælge tekstfarve fra din Marks egen palet, og [Designer](https://gradiently.design/da/guide/what-is-gradiently) kan sætte en hel marineblå kampagne op i dit brandkits stemme.

## FAQ

### Hvad er hexkoden for marineblå?

Den navngivne CSS-farve `navy` er `#000080`. Blødere versioner som `#172554` eller `#0b1630` ser som regel bedre ud på skærme.

### Hvilke farver passer til en marineblå gradient?

Guld, kobber, elfenben, skifer og koral. En enkelt varm accent forhindrer marineblå i at virke kold eller korporativ.

### Er marineblå god til et virksomhedsbrand?

Den virker seriøs og pålidelig, så den passer til finans, jura og uddannelse. Fordi så mange konkurrenter bruger den, bør du tilføje lys eller en accent for at forblive genkendelig.

### Hvorfor har min marineblå gradient striber?

Det er banding, som er almindeligt i mørke, subtile toninger. Tilføj flere stop og et let kornlag, og undgå hård JPEG-komprimering.

### Kan jeg bruge guldtekst på marineblå?

Ja, hvis guldet er lyst nok. `#d4a64a` på `#0b1630` måler omkring 8 til 1, hvilket er nok til både overskrifter og brødtekst.