# Marinblå gradient: mörka, pålitliga koder

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

Marinblått är färgen på uniformer, banker och bra kostymer, vilket är precis därför det kan se ut som alla andra banker. De här koderna behåller förtroendet och tappar tråkigheten.

## The short version

- En marinblå gradient blandar mycket mörka blå nyanser, oftast från ett nästan svart marinblått till ett ljusare kungsblått eller indigo.
- Marinblått läses som seriöst, pålitligt och etablerat, vilket är därför finans, juridik och utbildning använder det så ofta.
- För att marinblått inte ska se generiskt ut, lägg till en ljuskälla, låt det luta svagt mot violett eller blågrönt, eller kombinera det med en varm metallisk accent som guld eller koppar.
- Vit och blekgrå text läses lätt på marinblått; guldtext fungerar också om den är ljus nog.
- Mörka marinblå gradienter bandar lätt i komprimerade bilder, så lägg till lätt korn och exportera i full storlek.

En **marinblå gradient** blandar djupa blå nyanser, vanligen från ett nästan svart marinblått som `#0b1630` upp till ett ljusare kungsblått eller indigo. Den läses som lugn, seriös och pålitlig, och den får vit text att se skarp ut. Problemet är att marinblått finns överallt inom finans, juridik och företagsdesign, så en platt marinblå gradient ser ofta ut som en standardinställning. Koderna nedan ger marinblått ljus, temperatur och en accent, så att det behåller förtroendet och får en personlighet.

## Koder för klassiska marinblå gradienter

Det här är de pålitliga, nära rent marinblått, med precis tillräckligt med rörelse för att inte se ut som en helfärgad yta. De är idealiska för presentationsbilder, årsredovisningar, e-posthuvuden och webbplatsers sidfötter.

- Klassiskt marinblått: `linear-gradient(180deg, #1e3a8a 0%, #0b1630 100%)`
- Bläckmarin: `linear-gradient(135deg, #172554 0%, #0a0f24 100%)`
- Uniform: `linear-gradient(160deg, #1e40af 0%, #172554 60%, #0b1022 100%)`
- Kritstrecksrand: `linear-gradient(90deg, #0f1d3a 0%, #1d3461 100%)`
- Upplyst band: `linear-gradient(180deg, #0b1630 0%, #13254d 50%, #0b1630 100%)`

Fem nästan marinblå gradienter. Subtila med avsikt: de bär text, logotyper och diagram utan att konkurrera.

| Namn | Hex | Använd som |
| --- | --- | --- |
| Marin (CSS-namn) | `#000080` | Bara som referens; ser hårt ut på skärmar |
| Midnatt | `#0b1630` | Det mörkaste stoppet, nästan svart |
| Djup marin | `#172554` | En botten för vit text |
| Kunglig marin | `#1e3a8a` | Den ljusa änden av en klassisk gradient |
| Kungsblått | `#1e40af` | Ett lyft eller en högdager |

Hexkoder för marinblått som blandas bra. CSS:ens namngivna marinblått är mycket mättat; mjukare versioner ser mer förfinade ut.

## Marinblå gradienter med ett lyft av färg

Låt marinblått luta några grader mot violett så blir det kväll och lyx; låt det luta mot blågrönt så blir det havet och tekniken. Båda förskjutningarna får det att kännas valt. Den ljusare änden ska ändå vara djup nog för vit text över det mesta av ytan.

- Marin till indigo: `linear-gradient(135deg, #312e81 0%, #172554 50%, #0b1630 100%)`
- Kunglig violett: `linear-gradient(135deg, #4c1d95 0%, #1e3a8a 100%)`
- Marin och blågrönt: `linear-gradient(160deg, #0f766e 0%, #172554 60%, #0b1022 100%)`
- Elektriskt till marin: `linear-gradient(135deg, #2563eb 0%, #1e3a8a 45%, #0b1630 100%)`

Marinblått med en lutning. Indigo och violett känns premium, blågrönt känns fräscht, ett klarblått hörn känns tekniskt.

## Marinblått och guld, koppar eller silver

Få bottnar passar en metallisk accent bättre än marinblått. Guld på marinblått är traditionellt och festligt; koppar är varmare och modernare; silver är svalt och tyst. Håll metallen liten, som ett ljus i ett hörn eller en tunn linje, så att marinblått fortfarande gör det mesta av jobbet. [Guldgradienter](https://gradiently.design/sv/guide/gold-gradient-design) och [silvergradienter](https://gradiently.design/sv/guide/silver-gradient) visar den metalliska sidan i detalj.

- Guldljus på marinblått: `radial-gradient(circle at 85% 15%, #f2d27a 0%, #b8862b 15%, #172554 45%, #0b1630 100%)`
- Kopparhörn: `radial-gradient(circle at 15% 85%, #e8a87c 0%, #b4532a 18%, #1e293b 50%, #0b1630 100%)`
- Silverkant: `linear-gradient(135deg, #e5e7eb 0%, #94a3b8 20%, #1e3a8a 55%, #0b1630 100%)`

Metall hållen liten och på ett ställe. Ögat går dit först, sedan till dina ord.

- Midnatt: #0b1630
- Djup marin: #172554
- Kunglig marin: #1e3a8a
- Gammalt guld: #d4a64a
- Elfenben: #f8f6f1
- Skiffer: #94a3b8

Ett system i marinblått och guld: tre marinblå nyanser, en guldaccent, elfenben till text och skiffer till sekundära detaljer.

## Midnattsmarinblå gradienter för natt och lyx

Radiella gradienter känns som en himmel efter solnedgången eller ett svagt upplyst rum. De passar galainbjudningar, hotellbarer, smycken, klockor och sena radioprogram. För den stjärnklara versionen, se [gradienter med nattsky](https://gradiently.design/sv/guide/night-sky-gradient).

- Efter solnedgången: `radial-gradient(ellipse at 50% 0%, #1e40af 0%, #172554 40%, #070b18 100%)`
- Sammetsrum: `radial-gradient(circle at 30% 70%, #312e81 0%, #0b1630 55%, #05070f 100%)`
- Stadsglöd: `radial-gradient(ellipse at 50% 110%, #3b82f6 0%, #1e3a8a 25%, #0b1630 60%, #05070f 100%)`

Marinblått med ett mjukt ljus. Det mörkaste stoppet ligger nära svart, men det blå hindrar det från att kännas tomt.

## Där marinblå gradienter förtjänar sin plats

Marinblått är som bäst där orden betyder mer än bilden, eftersom det ger typografin en lugn botten med hög kontrast. Några användningar värda att låna:

- **Presentationsbilder i 1920×1080:** ”Klassiskt marinblått” till avsnittsavdelare, med en guldlinje under varje titel.
- **LinkedIn-profilbanner i 1584×396:** ”Marin och blågrönt” från vänster till höger, mörkast bakom ditt foto.
- **E-posthuvud i 1200×600:** ”Bläckmarin” med en rubrik i elfenben, så att huvudet redan hör hemma i inkorgar med mörkt läge.
- **Examens- och prisinbjudningar:** ”Guldljus på marinblått” tryckt som en A5-flyer.
- **Diagram och dashboards:** en djupt marinblå botten gör klara datafärger lätta att skilja åt.

## Så får du marinblått att se mindre företagsmässigt ut

### Ser ut som varje bank

- Platt `#000080` med en vit logotyp
- En rak gradient uppifrån och ner
- Klarblå knappar i mellanblått
- Ett bildbanksfoto på en handskakning

### Ser genomtänkt ut

- Ett mjukat marinblått med en lutning mot violett eller blågrönt
- Ljus som kommer från ett ställe
- En varm accent: guld, koppar eller korall
- Ett fint korn som får det att kännas tryckt

Ingen av de här ändringarna kostar förtroende. De gör bara varumärket igenkännbart med en blick, vilket spelar roll när alla konkurrenter använder samma blå. [Särpräglade varumärkesmaterial](https://gradiently.design/sv/guide/distinctive-brand-assets) förklarar varför igenkänning kommer av att äga något som ingen annan använder. Ett användbart test: täck över din logotyp och fråga om någon ändå kan se att designen är din. Med en platt marinblå gradient är svaret nästan alltid nej.

En finansrådgivningsfirmas länkbild för LinkedIn med vit text på en marinblå gradient upplyst från ett hörn

En länkbild för LinkedIn på ett djupt marinblått med ett varmt ljus. Seriös, inte anonym.

Samma design för finansiell planering som ett stående inlägg på den marinblå gradienten

Samma design som ett stående inlägg, med ljuset flyttat för att passa den högre bilden.

## CSS för marinblå gradient utan bandning

Mörka, subtila gradienter är där bandning syns mest: du ser synliga steg i stället för en jämn gradient, särskilt efter att en plattform komprimerat om din bild. På webben döljer några extra stopp och ett kornlager det. [Bandning i gradienter](https://gradiently.design/sv/guide/gradient-banding) förklarar orsaken.

```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 mellanstopp jämnar ut gradienten, ett svagt guldljus ger värme och ett kornlager döljer de steg som återstår.

Text är den enkla delen med marinblått. Vitt och elfenben klarar kontrasten med god marginal på varje marinblå ovan, och gammalt guld `#d4a64a` läses vid ungefär 8 till 1 på midnatt, så det fungerar till rubriker. Det att se upp med är klarblått: ett mellanblått som `#3b82f6` bakom vit text sjunker till ungefär 3,7 till 1. I Gradiently hanterar Auto-bläck det per rad genom att välja text ur Markens egen palett, och [Designer](https://gradiently.design/sv/guide/what-is-gradiently) kan lägga ut en hel marinblå kampanj i ditt varumärkespakets röst.

## FAQ

### Vilken hexkod har marinblått?

CSS:ens namngivna färg `navy` är `#000080`. Mjukare versioner som `#172554` eller `#0b1630` ser oftast bättre ut på skärmar.

### Vilka färger passar till en marinblå gradient?

Guld, koppar, elfenben, skiffer och korall. En enda varm accent hindrar marinblått från att se kallt eller företagsmässigt ut.

### Är marinblått bra för ett företagsvarumärke?

Det läses som seriöst och pålitligt, så det passar finans, juridik och utbildning. Eftersom så många konkurrenter använder det, lägg till ljus eller en accent för att förbli igenkännbar.

### Varför visar min marinblå gradient ränder?

Det är bandning, vanligt i mörka, subtila gradienter. Lägg till fler stopp, ett lätt kornlager och undvik kraftig JPEG-komprimering.

### Kan jag använda guldtext på marinblått?

Ja, om guldet är ljust nog. `#d4a64a` på `#0b1630` mäter ungefär 8 till 1, vilket klarar både rubriker och brödtext.