# Blå lilla gradient: 20 koder, der blander rent

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

Blå og lilla er naboer, så de blander lettere end næsten ethvert andet par. Det er også derfor, så mange blå lilla gradienter ligner hinanden. Her er tyve, der ikke gør.

## The short version

- En blå lilla gradient blander nabofarver som blå #3b82f6, indigo #4f46e5 og violet #7c3aed, så overgangen forbliver ren uden en brofarve.
- Det mest almindelige problem med blå til lilla overgange er ikke mudder, men ensartethed, fordi standarddiagonalen fra indigo til violet bruges overalt.
- Overgange mellem cyan og pink eller mellem kedelige blå og kedelige lilla kan blive grå i midten, og interpolation i OKLCH holder dem lyse.
- Hvid tekst læses godt på indigo og violet, men fejler ofte på mellemblå og lavendel, hvor et dybt indigoblæk virker bedre.
- En mørk bund, en tredje farve brugt sparsomt og lidt korn får en blå lilla gradient til at se gennemtænkt ud i stedet for standard.

En **blå lilla gradient** løber mellem nabofarver på farvehjulet: blå `#3b82f6`, indigo `#4f46e5`, violet `#7c3aed` og de bløde lavendelblå og syren toner omkring dem. Fordi farverne ligger side om side, forbliver overgangen næsten automatisk ren. Det sværere er at lave en, der ikke ligner de tusindvis af app-ikoner og konferenceslides, der allerede bruger en. Herunder er tyve koder i fire stemninger, de tilfælde, hvor overgangen bliver kedelig, og de tekstfarver, der læses på hver.

## Hvorfor blå og lilla blander så godt

Lilla er blå med lidt rød i. Gå fra den ene til den anden, og hvert trin imellem er en ægte, mættet farve: blå, indigo, violet. Sammenlign med at blande blå ind i orange, hvor midtpunktet er et fladt gråt. [Analoge farver](https://gradiently.design/da/guide/analogous-colors) forklarer princippet, og [farvehjulet](https://gradiently.design/da/guide/color-wheel) viser, hvor hver farve sidder.

- Midnat: #0f0a2e
- Dyb indigo: #1e1b4b
- Kongeblå: #1d4ed8
- Blå: #3b82f6
- Indigo: #4f46e5
- Violet: #7c3aed
- Lavendel: #a78bfa
- Lavendelblå dis: #c7d2fe

Familien fra blå til lilla. Vælg tre eller fire nabofarveprøver, og gradienten forbliver levende hele vejen igennem.

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

Start mørkt, og gradienten ser straks mindre generisk ud. En midnatsbund med indigo og violet lys føles som en nattehimmel, en koncertsal eller en eksklusiv app. De fem her bærer lys tekst smukt.

- Midnatsindigo: `linear-gradient(160deg, #0f0a2e 0%, #1e1b4b 45%, #4f46e5 100%)`
- Violet måneopgang: `radial-gradient(circle at 75% 20%, #7c3aed 0%, #1e1b4b 40%, #07051a 80%)`
- Marineblå til blomme: `linear-gradient(135deg, #172554 0%, #312e81 50%, #581c87 100%)`
- Horisontskær: `radial-gradient(ellipse at 50% 110%, #6366f1 0%, #1e1b4b 45%, #050414 85%)`
- Dyb strøm: `linear-gradient(200deg, #0b1023 0%, #1d4ed8 55%, #6d28d9 100%)`

Mørke blå lilla gradienter. Striber viser sig mest i overgange som disse, så tilføj korn, før du eksporterer.

## Bløde blå lilla gradienter: lavendelblå og syren

Gør familien lysere, og den bliver rolig, drømmende og en smule nostalgisk. De passer til wellness, søvn, papirvarer og alt, der sigter mod en blid stemning. Hold blækket mørkt; hvid forsvinder på de fleste af dem. Der er flere i [pastelgradienter](https://gradiently.design/da/guide/pastel-gradients).

- Lavendelblå slør: `linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 50%, #ddd6fe 100%)`
- Morgenlavendel: `linear-gradient(180deg, #dbeafe 0%, #e9d5ff 100%)`
- Syrenssky: `radial-gradient(circle at 30% 30%, #f5f3ff 0%, #c4b5fd 55%, #a5b4fc 100%)`
- Kornblomstmark: `linear-gradient(120deg, #bfdbfe 0%, #a5b4fc 50%, #c4b5fd 100%)`
- Papir til violet: `linear-gradient(160deg, #f8fafc 0%, #e0e7ff 45%, #a78bfa 100%)`

Bløde lavendelblå og syren overgange. Dyb indigotekst læses på hver eneste af dem.

## Elektriske blå lilla gradienter

Skru op for mætningen, og parret bliver højt, syntetisk og meget digitalt. De passer til gaming, musik, tech-lanceringer og alt, der hører natten til. Brug dem i bånd eller skær frem for over en hel plakat, og par dem med næsten sort, så de har noget at gløde mod. [Neongradienter](https://gradiently.design/da/guide/neon-gradients) har hele teknikken.

- Elektrisk violet: `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%)`
- Ultraviolet hvirvel: `conic-gradient(from 200deg at 50% 50%, #1d4ed8, #7c3aed, #c026d3, #1d4ed8)`
- Sort til ultraviolet: `linear-gradient(180deg, #000000 0%, #312e81 60%, #8b5cf6 100%)`

Mættede blå lilla gradienter. Den første er klassikeren; resten er mindre forventede udgaver af den.

## Blå lilla gradienter med en tredje farve

Den hurtigste måde at gøre en blå lilla gradient til din egen er én ekstra farve brugt sparsomt. Pink fører den mod skumring, turkis mod nordlys, guld mod luksus og fersken mod en blød solopgang.

- Skumring med pink: `linear-gradient(160deg, #1e1b4b 0%, #6d28d9 55%, #f472b6 100%)`
- Nordlysturkis: `linear-gradient(135deg, #0f766e 0%, #3b82f6 45%, #7c3aed 100%)`
- Indigo med guld: `radial-gradient(circle at 85% 15%, #fbbf24 0%, #4c1d95 30%, #0f0a2e 75%)`
- Lavendel solopgang: `linear-gradient(180deg, #c7d2fe 0%, #c4b5fd 50%, #fed7aa 100%)`
- Blå, violet, karmin: `linear-gradient(120deg, #1d4ed8 0%, #7c3aed 50%, #e11d48 100%)`

Tyve koder i alt. Pink, turkis og karmin ligger ved siden af blå eller lilla på hjulet; guld forbliver et lille lys, og fersken forbliver lys, så ingen overgang går gennem grå.

## Når en blå lilla gradient bliver mudret

Blå til violet er sikkert. To beslægtede overgange er ikke. Cyan til pink krydser store dele af hjulet, og kedelige, grålige blå til kedelige lilla giver en livløs midte. I begge tilfælde er løsningen den samme: interpolér i OKLCH, som holder lysstyrke og mætning jævn hen over overgangen. [Mudrede gradienter](https://gradiently.design/da/guide/muddy-gradients) og [gradientinterpolation](https://gradiently.design/da/guide/gradient-interpolation) går dybere.

```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;
}
```

Tilføjer du `in oklch`, ændres det, hvordan browseren blander stopene. Ældre browsere ignorerer hele erklæringen, så behold en baggrundsfarve som reserve.

## Sådan får du en blå lilla gradient til at virke mindre generisk

Diagonalen fra violet til blå er så velkendt, at folk læser den som en standard, før de læser noget af det, du har skrevet på den. Du behøver ikke eksotiske farver for at undgå det. Små, bevidste beslutninger er nok, og de lægger sig oven på hinanden.

- **Vælg en bund først.** En midnats- eller papirbund sætter stemningen mere end den blå eller lilla gør og adskiller dig straks fra den skarpe standard.
- **Flyt lyset væk fra diagonalen.** Læg den lyseste violet i ét hjørne med en radial gradient i stedet for at køre den kant til kant i 135 grader.
- **Brug ujævne stop.** Lad indigo holde 60 procent af fladen og violet kun det sidste stykke. Lige store tredjedele ser maskinlavede ud.
- **Tilføj én accent ét sted.** En stribe pink, turkis eller guld, som i sættet ovenfor, huskes langt mere end grundfarverne.
- **Afslut med korn.** Et fint støjlag skjuler striber og forvandler en skærmovergang til en overflade; [kornede gradienter](https://gradiently.design/da/guide/grainy-gradients) har koden.
- **Gengiv hver størrelse for sig.** Lyset skal lande et fornuftigt sted på en story og på et banner, ikke hvor en beskæring nu lader det ligge.

Stemningsnavne hjælper også. "Midnatsindigo med en guldkant" er en beslutning, du kan gentage over et helt års opslag; "blå lilla gradient" er ikke.

## Tekst på en blå lilla gradient

| Baggrund | Tekst | Kontrast | Dom |
| --- | --- | --- | --- |
| Indigo `#4f46e5` | Hvid | 6,3:1 | God |
| Violet `#7c3aed` | Hvid | 5,7:1 | God |
| Blå `#3b82f6` | Hvid | 3,7:1 | Kun store overskrifter |
| Lavendel `#a78bfa` | Hvid | 2,7:1 | Dumper |
| Lavendel `#a78bfa` | Dyb indigo `#1e1b4b` | 5,9:1 | God |
| Lavendelblå dis `#c7d2fe` | Dyb indigo `#1e1b4b` | 10,7:1 | Fremragende |

WCAG-kontrastforhold. Mellemblå er lysere, end den ser ud, hvilket fanger mange blå til lilla designs i den blå ende.

Et kvadratisk LinkedIn-opslag, der annoncerer version 3 med hvide bogstaver på en mørk indigo og violet gradient

Et LinkedIn-opslag på en mørk indigobund. Lys tekst, violet skær holdt til den ene side.

En lodret story med mørke indigobogstaver på en bleg lavendelblå og syren gradient

En story på blød lavendelblå med dybt indigoblæk.

Når ord krydser fra den mørke ende til den lyse ende af samme gradient, virker intet enkelt blæk overalt. [Tekst på en gradient](https://gradiently.design/da/guide/text-on-gradient) gennemgår mulighederne. I Gradiently håndterer Automatisk tekstfarve det pr. linje og vælger lys eller mørk skrift fra Mark’ens egen palet, så en blå lilla baggrund aldrig sluger en overskrift.

## FAQ

### Hvad er en god kode til en blå lilla gradient?

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

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

Ja. De er naboer på farvehjulet, så hvert trin imellem dem er en ren, mættet farve som indigo.

### Hvorfor ser min blå til pink gradient grå ud i midten?

Browseren blander som standard i sRGB, hvilket kan dulme overgange, der krydser store dele af hjulet. Tilføj `in oklch` efter vinklen for at holde midten lys.

### Hvilken farve tekst skal der på en blå lilla gradient?

Hvid læses godt på indigo og violet. På mellemblå, lavendel og lavendelblå er en dyb indigo som `#1e1b4b` sikrere.

### Hvilken farve ligger mellem blå og lilla?

Indigo. En typisk indigo til design er `#4f46e5`, og mørkere indigo ligger omkring `#312e81`.