# Blå lila gradient: 20 koder som blandas rent

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

Blått och lila är grannar, så de blandas lättare än nästan något annat par. Det är också därför så många blå lila gradienter ser likadana ut. Här är tjugo som inte gör det.

## The short version

- En blå lila gradient blandar närliggande färgtoner som blått #3b82f6, indigo #4f46e5 och violett #7c3aed, så övergången förblir ren utan en brofärg.
- Det vanligaste problemet med blå till lila övergångar är inte lera utan likhet, eftersom standarddiagonalen från indigo till violett används överallt.
- Övergångar mellan cyan och rosa, eller mellan matta blå och matta lila toner, kan bli grå i mitten, och interpolering i OKLCH håller dem ljusa.
- Vit text läses bra på indigo och violett men fungerar ofta inte på mellanblått och lavendel, där en djup indigo fungerar bättre.
- En mörk botten, en tredje färg som används sparsamt och lite korn får en blå lila gradient att se genomtänkt ut i stället för standard.

En **blå lila gradient** löper mellan närliggande färgtoner på färghjulet: blått `#3b82f6`, indigo `#4f46e5`, violett `#7c3aed` och de mjuka periwinkle- och lavendeltonerna runt dem. Eftersom färgtonerna ligger sida vid sida blir övergången ren nästan av sig själv. Det svårare är att göra en som inte ser ut som de tusentals appikoner och konferensbilder som redan använder en. Nedan finns tjugo koder i fyra stämningar, de fall där övergången faktiskt blir matt och de textfärger som läses på varje.

## Varför blått och lila blandas så bra

Lila är blått med lite rött i. Gå från det ena till det andra och varje steg på vägen är en verklig, mättad färg: blått, indigo, violett. Jämför med att blanda blått med orange, där halvvägspunkten är ett platt grått. [Analoga färger](https://gradiently.design/sv/guide/analogous-colors) förklarar principen och [färghjulet](https://gradiently.design/sv/guide/color-wheel) visar var varje färgton ligger.

- Midnatt: #0f0a2e
- Djup indigo: #1e1b4b
- Kungsblå: #1d4ed8
- Blå: #3b82f6
- Indigo: #4f46e5
- Violett: #7c3aed
- Lavendel: #a78bfa
- Periwinkledimma: #c7d2fe

Familjen från blått till lila. Välj tre eller fyra intilliggande färgprover så förblir gradienten levande hela vägen.

## Mörka blå lila gradienter: natt och djup

Börja mörkt så ser gradienten genast mindre generisk ut. En midnattsbotten med indigo och violett ljus känns som en natthimmel, en konsertsal eller en exklusiv app. De här fem bär ljus text vackert.

- Midnattsindigo: `linear-gradient(160deg, #0f0a2e 0%, #1e1b4b 45%, #4f46e5 100%)`
- Violett månuppgång: `radial-gradient(circle at 75% 20%, #7c3aed 0%, #1e1b4b 40%, #07051a 80%)`
- Marinblått till plommon: `linear-gradient(135deg, #172554 0%, #312e81 50%, #581c87 100%)`
- Horisontglöd: `radial-gradient(ellipse at 50% 110%, #6366f1 0%, #1e1b4b 45%, #050414 85%)`
- Djup ström: `linear-gradient(200deg, #0b1023 0%, #1d4ed8 55%, #6d28d9 100%)`

Mörka blå lila gradienter. Ränder syns mest i övergångar som dessa, så lägg till korn innan du exporterar.

## Mjuka blå lila gradienter: periwinkle och lavendel

Gör familjen ljusare så blir den lugn, drömsk och lite nostalgisk. De här passar välmående, sömn, brevpapper och allt som riktar sig till en mild stämning. Håll texten mörk, vitt försvinner på de flesta av dem. Fler finns i [pastellgradienter](https://gradiently.design/sv/guide/pastel-gradients).

- Periwinkledis: `linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 50%, #ddd6fe 100%)`
- Lavendel på morgonen: `linear-gradient(180deg, #dbeafe 0%, #e9d5ff 100%)`
- Lilamoln: `radial-gradient(circle at 30% 30%, #f5f3ff 0%, #c4b5fd 55%, #a5b4fc 100%)`
- Blåklintsäng: `linear-gradient(120deg, #bfdbfe 0%, #a5b4fc 50%, #c4b5fd 100%)`
- Papper till violett: `linear-gradient(160deg, #f8fafc 0%, #e0e7ff 45%, #a78bfa 100%)`

Mjuka övergångar i periwinkle och lavendel. Djup indigotext läses på varenda en.

## Elektriska blå lila gradienter

Höj mättnaden så blir paret högljutt, syntetiskt och mycket digitalt. De här passar spel, musik, tekniklanseringar och allt nattligt. Använd dem i band eller som glöd i stället för över en hel affisch, och para dem med nästan svart så att de har något att lysa mot. [Neongradienter](https://gradiently.design/sv/guide/neon-gradients) har hela tekniken.

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

Mättade blå lila gradienter. Den första är klassikern, de andra är mindre väntade versioner av den.

## Blå lila gradienter med en tredje färg

Det snabbaste sättet att göra en blå lila gradient till din egen är en extra färg som används sparsamt. Rosa tar den mot skymning, turkos mot norrsken, guld mot lyx och persika mot en mjuk soluppgång.

- Skymning med rosa: `linear-gradient(160deg, #1e1b4b 0%, #6d28d9 55%, #f472b6 100%)`
- Norrskensturkos: `linear-gradient(135deg, #0f766e 0%, #3b82f6 45%, #7c3aed 100%)`
- Indigo med guld: `radial-gradient(circle at 85% 15%, #fbbf24 0%, #4c1d95 30%, #0f0a2e 75%)`
- Lavendelsoluppgång: `linear-gradient(180deg, #c7d2fe 0%, #c4b5fd 50%, #fed7aa 100%)`
- Blått, violett, karmosin: `linear-gradient(120deg, #1d4ed8 0%, #7c3aed 50%, #e11d48 100%)`

Tjugo koder sammanlagt. Rosa, turkos och karmosin ligger nära blått eller lila på hjulet. Guld förblir ett litet ljus och persika förblir blek, så ingen övergång går via grått.

## När en blå lila gradient blir lerig

Blått till violett är säkert. Två närliggande övergångar är det inte. Cyan till rosa korsar en stor del av hjulet, och matta, gråaktiga blå till matta lila ger ett livlöst mittparti. I båda fallen är lösningen densamma: interpolera i OKLCH, som håller ljushet och mättnad jämn genom övergången. [Leriga gradienter](https://gradiently.design/sv/guide/muddy-gradients) och [gradientinterpolering](https://gradiently.design/sv/guide/gradient-interpolation) går djupare.

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

Att lägga till `in oklch` ändrar hur webbläsaren blandar stoppen. Äldre webbläsare ignorerar hela deklarationen, så behåll en bakgrundsfärg som reserv.

## Så får du en blå lila gradient att se mindre generisk ut

Diagonalen från violett till blått är så välbekant att folk läser den som en standard innan de läser något du skrivit på den. Du behöver inga exotiska färger för att undvika det. Små, medvetna beslut räcker, och de förstärker varandra.

- **Välj en botten först.** En midnatts- eller pappersbotten sätter stämningen mer än blått eller lila gör, och skiljer dig genast från den skrikiga standarden.
- **Flytta ljuset från diagonalen.** Lägg det ljusaste violetta i ett hörn med en radiell gradient i stället för att dra den från kant till kant i 135 grader.
- **Använd ojämna stopp.** Låt indigo hålla 60 procent av ytan och violett bara den sista biten. Lika tredjedelar ser maskingjorda ut.
- **Lägg till en accent på ett ställe.** En skärva rosa, turkos eller guld, som i uppsättningen ovan, minns man mycket bättre än grundfärgerna.
- **Avsluta med korn.** Ett fint brusskikt döljer ränder och förvandlar en skärmövergång till en yta. [Korniga gradienter](https://gradiently.design/sv/guide/grainy-gradients) har koden.
- **Rendera varje storlek för sig.** Ljuset ska hamna på ett vettigt ställe på en story och på en banner, inte där en beskärning råkar lämna det.

Stämningsnamn hjälper också. ”Midnattsindigo med en guldkant” är ett beslut du kan upprepa under ett helt år av inlägg, ”blå lila gradient” är det inte.

## Text på en blå lila gradient

| Bakgrund | Text | Kontrast | Omdöme |
| --- | --- | --- | --- |
| Indigo `#4f46e5` | Vit | 6,3:1 | Bra |
| Violett `#7c3aed` | Vit | 5,7:1 | Bra |
| Blå `#3b82f6` | Vit | 3,7:1 | Bara stora rubriker |
| Lavendel `#a78bfa` | Vit | 2,7:1 | Underkänt |
| Lavendel `#a78bfa` | Djup indigo `#1e1b4b` | 5,9:1 | Bra |
| Periwinkledimma `#c7d2fe` | Djup indigo `#1e1b4b` | 10,7:1 | Utmärkt |

WCAG-kontrastvärden. Mellanblått är ljusare än det ser ut, vilket överraskar många blå till lila designer i den blå änden.

Ett kvadratiskt LinkedIn-inlägg som tillkännager version 3 med vit text på en mörk gradient i indigo och violett

Ett LinkedIn-inlägg på mörk indigobotten. Ljus text, violett glöd hållen åt ena sidan.

En stående story med mörkindigo text på en blek gradient i periwinkle och lavendel

En story på mjukt periwinkle med djup indigotext.

När ord går från den mörka till den ljusa änden av samma gradient fungerar ingen enskild textfärg överallt. [Text på gradient](https://gradiently.design/sv/guide/text-on-gradient) går igenom alternativen. I Gradiently hanterar Auto-färg det per rad och väljer ljus eller mörk text ur Markens egen palett, så en blå lila bakgrund aldrig sväljer en rubrik.

## FAQ

### Vad är en bra kod för blå lila gradient?

En pålitlig är `linear-gradient(135deg, #2563eb 0%, #7c3aed 100%)`. För något mindre väntat, börja från en mörk botten: `linear-gradient(160deg, #0f0a2e 0%, #1e1b4b 45%, #4f46e5 100%)`.

### Passar blått och lila ihop i en gradient?

Ja. De är grannar på färghjulet, så varje steg mellan dem är en ren, mättad färg som indigo.

### Varför ser min blå till rosa gradient grå ut i mitten?

Webbläsaren blandar i sRGB som standard, vilket kan göra övergångar matta när de korsar en stor del av hjulet. Lägg till `in oklch` efter vinkeln så håller mittpartiet sig ljust.

### Vilken textfärg passar på en blå lila gradient?

Vit läses bra på indigo och violett. På mellanblått, lavendel och periwinkle är en djup indigo som `#1e1b4b` säkrare.

### Vilken färg ligger mellan blått och lila?

Indigo. En typisk indigo för design är `#4f46e5`, och mörkare indigotoner ligger runt `#312e81`.