# Blå og lilla gradient: 20 koder som blander seg rent

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

Blått og lilla er naboer, så de blander seg lettere enn nesten noe annet par. Det er også grunnen til at så mange blå og lilla gradienter ser like ut. Her er tjue som ikke gjør det.

## The short version

- En blå og lilla gradient blander nabofarger som blå #3b82f6, indigo #4f46e5 og fiolett #7c3aed, så overgangen holder seg ren uten en brofarge.
- Det vanligste problemet med overganger fra blått til lilla er ikke gjørme, men likhet, fordi standarddiagonalen fra indigo til fiolett brukes overalt.
- Overganger mellom cyan og rosa, eller mellom matte blåtoner og matte lillatoner, kan bli grå i midten, og interpolering i OKLCH holder dem klare.
- Hvit tekst leses godt på indigo og fiolett, men feiler ofte på mellomblått og lavendel, der en dyp indigo fungerer bedre.
- En mørk bunn, en tredje farge brukt sparsomt og litt korn får en blå og lilla gradient til å se gjennomtenkt ut i stedet for standard.

En **blå og lilla gradient** går mellom nabofarger på fargesirkelen: blå `#3b82f6`, indigo `#4f46e5`, fiolett `#7c3aed` og de myke perivinkel- og lavendeltonene rundt dem. Fordi fargetonene ligger side om side, holder overgangen seg ren nesten automatisk. Det vanskelige er å lage en som ikke ser ut som de tusenvis av appikoner og konferanselysbilder som allerede bruker en. Nedenfor er tjue koder i fire stemninger, tilfellene der overgangen faktisk blir matt, og tekstfargene som kan leses på hver.

## Hvorfor blått og lilla blander seg så godt

Lilla er blått med litt rødt i. Gå fra den ene til den andre, og hvert trinn imellom er en ekte, mettet farge: blå, indigo, fiolett. Sammenlign det med å blande blått inn i oransje, der midtpunktet er en flat grå. [Analoge farger](https://gradiently.design/nb/guide/analogous-colors) forklarer prinsippet, og [fargesirkelen](https://gradiently.design/nb/guide/color-wheel) viser hvor hver fargetone ligger.

- Midnatt: #0f0a2e
- Dyp indigo: #1e1b4b
- Kongeblå: #1d4ed8
- Blå: #3b82f6
- Indigo: #4f46e5
- Fiolett: #7c3aed
- Lavendel: #a78bfa
- Perivinkeltåke: #c7d2fe

Familien fra blått til lilla. Velg tre eller fire fargeprøver ved siden av hverandre, så holder gradienten seg klar hele veien.

## Mørke blå og lilla gradienter: natt og dybde

Start mørkt, så ser gradienten straks mindre generisk ut. En midnattsbunn med indigo og fiolett lys føles som en nattehimmel, en konsertsal eller en eksklusiv app. Disse fem bærer lys tekst vakkert.

- Midnattsindigo: `linear-gradient(160deg, #0f0a2e 0%, #1e1b4b 45%, #4f46e5 100%)`
- Fiolett måneoppgang: `radial-gradient(circle at 75% 20%, #7c3aed 0%, #1e1b4b 40%, #07051a 80%)`
- Marineblå til plomme: `linear-gradient(135deg, #172554 0%, #312e81 50%, #581c87 100%)`
- Horisontglød: `radial-gradient(ellipse at 50% 110%, #6366f1 0%, #1e1b4b 45%, #050414 85%)`
- Dyp strøm: `linear-gradient(200deg, #0b1023 0%, #1d4ed8 55%, #6d28d9 100%)`

Mørke blå og lilla gradienter. Striper synes mest i overganger som disse, så legg til korn før du eksporterer.

## Myke blå og lilla gradienter: perivinkel og lavendel

Gjør familien lysere, så blir den rolig, drømmende og litt nostalgisk. Disse passer velvære, søvn, papirvarer og alt som sikter mot en mild stemning. Hold teksten mørk; hvitt forsvinner på de fleste av dem. Det finnes flere i [pastellgradienter](https://gradiently.design/nb/guide/pastel-gradients).

- Perivinkeldis: `linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 50%, #ddd6fe 100%)`
- Morgenlavendel: `linear-gradient(180deg, #dbeafe 0%, #e9d5ff 100%)`
- Syrinsky: `radial-gradient(circle at 30% 30%, #f5f3ff 0%, #c4b5fd 55%, #a5b4fc 100%)`
- Kornblomsteng: `linear-gradient(120deg, #bfdbfe 0%, #a5b4fc 50%, #c4b5fd 100%)`
- Papir til fiolett: `linear-gradient(160deg, #f8fafc 0%, #e0e7ff 45%, #a78bfa 100%)`

Myke overganger i perivinkel og lavendel. Dyp indigo tekst kan leses på hver eneste en.

## Elektriske blå og lilla gradienter

Skru opp metningen, så blir paret høylytt, syntetisk og svært digitalt. Disse passer gaming, musikk, teknologilanseringer og alt som hører natten til. Bruk dem i bånd eller glød i stedet for over en hel plakat, og kombiner med nesten svart så de har noe å lyse mot. [Neongradienter](https://gradiently.design/nb/guide/neon-gradients) har hele teknikken.

- Elektrisk fiolett: `linear-gradient(135deg, #2563eb 0%, #7c3aed 100%)`
- Himmel til orkidé: `linear-gradient(90deg, #0ea5e9 0%, #6366f1 50%, #a855f7 100%)`
- Indigopuls: `radial-gradient(circle at 50% 50%, #818cf8 0%, #4338ca 40%, #0f0a2e 80%)`
- Ultrafiolett virvel: `conic-gradient(from 200deg at 50% 50%, #1d4ed8, #7c3aed, #c026d3, #1d4ed8)`
- Svart til ultrafiolett: `linear-gradient(180deg, #000000 0%, #312e81 60%, #8b5cf6 100%)`

Mettede blå og lilla gradienter. Den første er klassikeren; resten er mindre forventede versjoner av den.

## Blå og lilla gradienter med en tredje farge

Den raskeste måten å gjøre en blå og lilla gradient til din egen på, er én ekstra farge brukt sparsomt. Rosa drar den mot skumring, blågrønn mot nordlys, gull mot luksus og fersken mot en myk soloppgang.

- Skumring med rosa: `linear-gradient(160deg, #1e1b4b 0%, #6d28d9 55%, #f472b6 100%)`
- Nordlysgrønn: `linear-gradient(135deg, #0f766e 0%, #3b82f6 45%, #7c3aed 100%)`
- Indigo med gull: `radial-gradient(circle at 85% 15%, #fbbf24 0%, #4c1d95 30%, #0f0a2e 75%)`
- Lavendelsoloppgang: `linear-gradient(180deg, #c7d2fe 0%, #c4b5fd 50%, #fed7aa 100%)`
- Blå, fiolett, karmosin: `linear-gradient(120deg, #1d4ed8 0%, #7c3aed 50%, #e11d48 100%)`

Tjue koder totalt. Rosa, blågrønn og karmosin ligger ved siden av blått eller lilla på sirkelen; gull forblir et lite lys og fersken forblir blek, så ingen overgang går gjennom grått.

## Når en blå og lilla gradient blir gjørmete

Blått til fiolett er trygt. To beslektede overganger er det ikke. Cyan inn i rosa krysser mye av sirkelen, og matte, gråaktige blåtoner inn i matte lillatoner gir en livløs midte. I begge tilfeller er løsningen den samme: interpoler i OKLCH, som holder lysstyrke og metning jevn gjennom overgangen. [Gjørmete gradienter](https://gradiently.design/nb/guide/muddy-gradients) og [interpolering i gradienter](https://gradiently.design/nb/guide/gradient-interpolation) går dypere.

```css
/* Default sRGB blend: can dull in the middle */
.card--srgb {
  background: linear-gradient(90deg, #06b6d4, #ec4899);
}

/* OKLCH blend: stays bright, passes through violet */
.card--oklch {
  background: linear-gradient(90deg in oklch, #06b6d4, #ec4899);
}

/* A safe blue purple hero with a fallback */
.hero {
  background-color: #1e1b4b;
  background-image: linear-gradient(160deg in oklch, #0f0a2e, #4f46e5 60%, #7c3aed);
  color: #eef2ff;
}
```

Å legge til `in oklch` endrer hvordan nettleseren blander stoppene. Eldre nettlesere ignorerer hele deklarasjonen, så behold en bakgrunnsfarge som reserve.

## Slik får du en blå og lilla gradient til å se mindre generisk ut

Diagonalen fra fiolett til blått er så kjent at folk leser den som standard før de leser noe du har skrevet på den. Du trenger ikke eksotiske farger for å unngå det. Små, bevisste valg er nok, og de forsterker hverandre.

- **Velg en bunn først.** En midnatts- eller papirbunn setter stemningen mer enn det blå eller lilla gjør, og skiller deg straks fra den lyse standarden.
- **Flytt lyset bort fra diagonalen.** Legg den lyseste fioletten i ett hjørne med en radial gradient i stedet for å la den gå kant til kant i 135 grader.
- **Bruk ujevne stopp.** La indigo holde 60 prosent av flaten og fiolett bare den siste strekningen. Like tredjedeler ser maskinlagde ut.
- **Legg til én aksent på ett sted.** En stripe rosa, blågrønn eller gull, som i settet over, huskes langt bedre enn grunnfargene.
- **Avslutt med korn.** Et fint støylag skjuler striper og gjør en skjermovergang til en flate; [kornete gradienter](https://gradiently.design/nb/guide/grainy-gradients) har koden.
- **Tegn hver størrelse for seg.** Lyset bør havne et fornuftig sted i en story og på et banner, ikke der en beskjæring tilfeldigvis etterlater det.

Navn på stemninger hjelper også. «Midnattsindigo med gullkant» er en beslutning du kan gjenta gjennom et helt år med innlegg; «blå og lilla gradient» er det ikke.

## Tekst på en blå og lilla gradient

| Bakgrunn | Tekst | Kontrast | Vurdering |
| --- | --- | --- | --- |
| Indigo `#4f46e5` | Hvit | 6,3:1 | Bra |
| Fiolett `#7c3aed` | Hvit | 5,7:1 | Bra |
| Blå `#3b82f6` | Hvit | 3,7:1 | Kun store overskrifter |
| Lavendel `#a78bfa` | Hvit | 2,7:1 | Ikke godkjent |
| Lavendel `#a78bfa` | Dyp indigo `#1e1b4b` | 5,9:1 | Bra |
| Perivinkeltåke `#c7d2fe` | Dyp indigo `#1e1b4b` | 10,7:1 | Utmerket |

Kontrastforhold etter WCAG. Mellomblått er lysere enn det ser ut, og det lurer mange design fra blått til lilla i den blå enden.

Et kvadratisk LinkedIn-innlegg som kunngjør versjon 3 med hvit skrift på en mørk gradient i indigo og fiolett

Et LinkedIn-innlegg på en mørk indigobunn. Lys tekst, fiolett glød holdt til én side.

En loddrett story med mørk indigo skrift på en blek gradient i perivinkel og lavendel

En story på myk perivinkel med dyp indigo tekst.

Når ord krysser fra den mørke til den lyse enden av samme gradient, fungerer ingen enkelt tekstfarge overalt. [Tekst på en gradient](https://gradiently.design/nb/guide/text-on-gradient) dekker alternativene. I Gradiently håndterer automatisk tekstfarge dette per linje og velger lys eller mørk tekst fra Markens egen palett, så en blå og lilla bakgrunn aldri sluker en overskrift.

## FAQ

### Hva er en god kode for blå og lilla gradient?

En pålitelig en er `linear-gradient(135deg, #2563eb 0%, #7c3aed 100%)`. For noe mindre forventet, start fra en mørk bunn: `linear-gradient(160deg, #0f0a2e 0%, #1e1b4b 45%, #4f46e5 100%)`.

### Passer blått og lilla sammen i en gradient?

Ja. De er naboer på fargesirkelen, så hvert trinn mellom dem er en ren, mettet farge som indigo.

### Hvorfor ser gradienten min fra blått til rosa grå ut i midten?

Nettleseren blander i sRGB som standard, og det kan gjøre overganger som krysser mye av sirkelen matte. Legg til `in oklch` etter vinkelen for å holde midten klar.

### Hvilken tekstfarge passer på en blå og lilla gradient?

Hvitt leses godt på indigo og fiolett. På mellomblått, lavendel og perivinkel er en dyp indigo som `#1e1b4b` tryggere.

### Hvilken farge ligger mellom blått og lilla?

Indigo. En typisk indigo i design er `#4f46e5`, og mørkere indigotoner ligger rundt `#312e81`.