# Rosa og lilla gradient: koder fra godteri til skumring

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

Rosa og lilla kan være søtt, glamorøst eller stille og stemningsfullt, avhengig av lyshet og metning. Her er kodene til hvert trinn i spennet, og hvordan du velger.

## The short version

- En rosa og lilla gradient blander nabotoner som rosa #ec4899, magenta #c026d3 og fiolett #9333ea, så overgangen holder seg klar uten en brofarge.
- Samme par virker som godteri når det er lyst, glamour når det er mettet, og skumring når det er mørkt.
- Hvit tekst har for svak kontrast på sterkt rosa og lys syrin. Bruk dyp plomme der, og behold hvitt til magenta, fiolett og mørke bunner.
- Litt oransje, blått eller gull i en rosa og lilla gradient gjør den langt mindre forventet enn en vanlig tofarget blanding.
- Rosa og lilla passer skjønnhet, natteliv, musikk, feiringer og skapermerkevarer. En mørk bunn hindrer at de virker barnslige.

En **rosa og lilla gradient** blander to naboer i fargesirkelen, rosa som `#ec4899` og fiolett som `#9333ea`, med magenta og orkidé mellom. Fordi tonene ligger ved siden av hverandre, holder blandingen seg klar hele veien. Lysheten endrer alt: lyst gir sukkerspinn, høy metning gir glamour, mørkt gir skumring. Kodene nedenfor går fra lyst til mørkt, så du kan velge stemningen først og hex-verdiene deretter.

## Stemninger i rosa og lilla gradienter

| Stemning | Typiske stopp | Følelse | Passer til |
| --- | --- | --- | --- |
| Godteri | `#fbcfe8` til `#e9d5ff` | Søtt, mykt, ungt | Bakerier, babyshower, papirvarer |
| Orkidé | `#f0abfc` til `#c084fc` | Drømmende, romantisk | Skjønnhet, bryllup, velvære |
| Magenta | `#ec4899` til `#9333ea` | Dristig, glamorøst | Natteliv, musikk, skapere |
| Skumring | `#2e0a2f` til `#9d174d` | Stemningsfullt, voksent | Parfyme, cocktailer, sene arrangementer |

Fire stemninger fra ett par. Hvert trinn nedover er mørkere eller mer mettet enn det forrige.

- Godterirosa: #fbcfe8
- Tyggegummirosa: #f9a8d4
- Knallrosa: #ec4899
- Magenta: #c026d3
- Orkidéfiolett: #a855f7
- Fiolett: #9333ea
- Syrin: #e9d5ff
- Plommeblekk: #2e0a2f

En arbeidspalett for paret, med de lyse og mørke endene du trenger til tekst.

## Godterirosa og lilla gradienter

Lyst rosa og syrin sammen er så mykt som farger blir. De passer alt søtt eller mildt, men kan raskt bli barnslige. Løsningen er en litt varm bunn, fersken eller krem i én ende og svært tydelig mørk skrift.

- Sukkerspinn: `linear-gradient(135deg, #fce7f3 0%, #fbcfe8 45%, #e9d5ff 100%)`
- Jordbærmelk: `linear-gradient(180deg, #fff1f2 0%, #f5d0fe 100%)`
- Fersken, rosa, syrin: `radial-gradient(circle at 25% 25%, #ffedd5 0%, #fbcfe8 45%, #ddd6fe 100%)`

Godteriblandinger, alle med dyp plomme som tekstfarge. Fersken i den tredje hindrer et sukkersøtt uttrykk.

For mer av denne mykheten dekker [pastellgradienter](https://gradiently.design/nb/guide/pastel-gradients) hele familien, mens [lavendelgradienter](https://gradiently.design/nb/guide/lavender-gradient) heller mer mot lilla.

## Orkidé- og magentagradienter

Skru opp metningen, så blir paret glamorøst. Dette er området for neglelakk, festivalarmbånd og albumomslag. Bruk en svak vinkel eller radial glød fremfor en flat diagonal, og la det være et roligere område til ord.

- Knallrosa til fiolett: `linear-gradient(135deg, #ec4899 0%, #c026d3 50%, #9333ea 100%)`
- Orkidéblomst: `radial-gradient(circle at 70% 30%, #f0abfc 0%, #c026d3 45%, #6b21a8 100%)`
- Bærglamour: `linear-gradient(160deg, #db2777 0%, #a21caf 60%, #581c87 100%)`
- Iriserende virvel: `conic-gradient(from 90deg at 40% 60%, #f472b6, #a855f7, #e879f9, #f472b6)`

Mettede rosa og lilla gradienter. Den koniske minner om fargespill, nært [holografiske gradienter](https://gradiently.design/nb/guide/holographic-gradients).

## Skumring: mørke rosa og lilla gradienter

Gjør paret mørkt, så blir det straks voksent. Plommesvart bunn med bringebær- og fiolettlys minner om himmelen tjue minutter etter solnedgang, eller en cocktailbar med lav belysning. Disse er settets mest allsidige og bærer hvit eller lys rosa tekst lett.

- Tjue etter solnedgang: `linear-gradient(180deg, #1e0b2e 0%, #581c87 50%, #be185d 100%)`
- Bringebærglød: `radial-gradient(circle at 80% 85%, #db2777 0%, #4a044e 40%, #12041a 80%)`
- Plomme til rose: `linear-gradient(135deg, #2e0a2f 0%, #6b21a8 55%, #f472b6 100%)`
- Fiolett scenelys: `radial-gradient(ellipse at 50% 0%, #a855f7 0%, #3b0764 45%, #0c0414 85%)`

Mørke rosa og lilla gradienter. Legg til fint korn, fordi mørke blandinger får fargebånd først.

Disse ligger nært [solnedgangsgradienter](https://gradiently.design/nb/guide/sunset-gradient) og [galaksegradienter](https://gradiently.design/nb/guide/galaxy-gradient). Du kan låne fritt fra begge.

## Legg til en tredje farge uten grums

Den vanlige diagonalen fra knallrosa til fiolett finnes overalt. Én ekstra farge er derfor den raskeste måten å gjøre det til ditt eget. Velg en nabo til rosa eller lilla: oransje og korall ligger ved rosa, blått og indigo ved lilla. Grønt ligger motsatt magenta, derfor blir rosa til grønt grått i midten.

- Fiolett, rosa, mandarin: `linear-gradient(120deg, #7c3aed 0%, #ec4899 55%, #fb923c 100%)`
- Blåtime: `linear-gradient(160deg, #1e3a8a 0%, #7e22ce 50%, #f472b6 100%)`
- Magenta med gull: `radial-gradient(circle at 85% 15%, #fcd34d 0%, #a21caf 35%, #2e0a2f 80%)`

Tre rosa og lilla gradienter med en tredje nabofarge. Hvert trinn beholder metningen.

## Velg rosa og lilla gradient til merkevaren

1. **Velg lyst eller mørkt først** Det meste av stemningen kommer fra lysheten. En lys blanding sier mildhet, en plommebunn sier kveld. Velg én og behold den i hvert innlegg.
2. **Velg hvilken farge som leder** Rosa i førersetet virker varmere og mer lekent. Lilla virker kjøligere og mer gåtefullt. Gi den ledende fargen omtrent to tredeler av flaten.
3. **Planlegg hvor ordene skal stå** Sett overskriften over den mørkere, roligere enden og det klareste rosa i et hjørne, så du slipper å kjempe med bakgrunnen om oppmerksomheten.
4. **Test i hver størrelse** En blanding som virker på et kvadratisk innlegg, kan få det lyseste området bak teksten i en story. Kontroller innlegg, story og banner før du bestemmer deg.

Hvis du publiserer ofte, skriv resultatet som en kort oppskrift: bunn, hovedfarge, aksent, lysplassering. Den ene linjen holder en hel strøm konsekvent, noe som betyr mer enn én vakker gradient. [Konsekvent merkevarebruk](https://gradiently.design/nb/guide/brand-consistency) går videre.

## Tekstfarger på rosa og lilla

Sterkt rosa er lysere enn det ser ut, så hvite overskrifter på knallrosa er svakere enn forventet. Fiolett og magenta bærer hvitt godt. I den lyse enden holder dyp plomme designet i samme familie. Forholdene er WCAG-kontrast: sikt mot 4,5:1 for liten tekst og minst 3:1 for store overskrifter. [Fargekontrast og tilgjengelighet](https://gradiently.design/nb/guide/color-contrast-accessibility) forklarer grensene.

| Bakgrunn | Tekst | Kontrast | Vurdering |
| --- | --- | --- | --- |
| Knallrosa `#ec4899` | Hvitt | 3,5:1 | Bare store overskrifter |
| Dyprosa `#db2777` | Hvitt | 4,6:1 | God |
| Magenta `#c026d3` | Hvitt | 4,7:1 | God |
| Fiolett `#9333ea` | Hvitt | 5,4:1 | God |
| Tyggegummirosa `#f9a8d4` | Plommeblekk `#3b0a3f` | 8,9:1 | Utmerket |
| Plommeblekk `#2e0a2f` | Tyggegummirosa `#f9a8d4` | 9,6:1 | Utmerket, rosa som tekstfarge |

Mål bak hver tekstlinje, på gradientens lyseste punkt.

Et stående neglesalonginnlegg med hvit skrift på en mettet rosa og fiolett gradient

Et neglesalonginnlegg på mettet orkidé, med hvit skrift på den fiolette siden.

En stående klubbkveldstory med lys rosa skrift på mørk plommegradient og bringebærlys nederst

En klubbkveldstory på skumringsplomme med bringebærlys lavt i rammen.

## CSS for rosa og lilla gradient

```css
.dusk {
  background-color: #1e0b2e;
  background-image:
    radial-gradient(circle at 80% 85%, #db2777 0%, transparent 45%),
    linear-gradient(180deg in oklch, #1e0b2e 0%, #581c87 100%);
  color: #fce7f3;
}

.headline-gradient {
  background: linear-gradient(90deg, #ec4899, #9333ea);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
```

En skumringsseksjon med bringebærglød, og en rosa til fiolett overskrift med bakgrunn klippet til teksten.

Gradienttekst er slående, men bruk den bare til korte displayord, aldri brødtekst. [CSS-gradienttekst](https://gradiently.design/nb/guide/css-gradient-text) dekker reservene. Hvis du ønsker et rosa og lilla uttrykk ingen andre kan publisere, lar Markedet til Gradiently deg søke etter Marks med fargeord som «orkidé». Hver Mark er unik. Når du sikrer deg den, kan bare du eksportere med den. Den holder også selv teksten lesbar over begge ender av blandingen.

## FAQ

### Hva er en god kode for rosa og lilla gradient?

En klassiker er `linear-gradient(135deg, #ec4899 0%, #c026d3 50%, #9333ea 100%)`. For mer stemning, prøv `linear-gradient(180deg, #1e0b2e 0%, #581c87 50%, #be185d 100%)`.

### Passer rosa og lilla sammen?

Ja. De er naboer i fargesirkelen, med magenta mellom, og blandes derfor rent ved alle lyshetsnivåer.

### Hvilken tekstfarge passer på rosa og lilla gradient?

Hvitt er lesbart på magenta, fiolett og mørk plomme. På knallrosa bruker du hvitt bare til store overskrifter. På lyst rosa eller syrin bruker du dyp plomme som `#3b0a3f`.

### Hvordan gjør jeg rosa og lilla gradient mindre barnslig?

Gjør den mørkere eller mer mettet, bruk plommebunn, og legg til en voksen tredje farge som gull eller dypblått på et lite område.

### Hvilken farge ligger mellom rosa og lilla?

Magenta, rundt `#c026d3`, med orkidé som lysere versjon.