# Pink og lilla gradient: koder fra slik til skumring

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

Pink og lilla kan være sukkersøde, glamourøse eller stille dystre, alt efter hvor lyst og mættet du går. Her er koderne til hvert trin i det spænd, og hvordan du vælger.

## The short version

- En pink og lilla gradient blander nabofarver som pink #ec4899, magenta #c026d3 og violet #9333ea, så overgangen forbliver klar uden en brofarve.
- Det samme par virker som slik, når det er blegt, som glamour, når det er mættet, og som skumring, når det er mørkt.
- Hvid tekst dumper på klar pink og bleg syren, så brug en dyb blommefarvet skrift dér, og gem hvid til magenta, violet og mørke bunde.
- Lidt orange, blå eller guld i en pink og lilla gradient gør den langt mindre forudsigelig end den almindelige blanding af to farver.
- Pink og lilla passer til skønhed, natteliv, musik, fester og skaberbrands, og en mørk bund forhindrer dem i at virke barnlige.

En **pink og lilla gradient** blander to naboer på farvecirklen, pink som `#ec4899` og violet som `#9333ea`, med magenta og orkidé imellem. Fordi farvetonerne ligger side om side, forbliver blandingen klar hele vejen. Det, der ændrer alt, er lysheden: hold den bleg, og du får candyfloss, skru op for mætningen, og du får glamour, gør den mørk, og du får skumring. Koderne nedenfor går fra lys til mørk, så du kan vælge stemningen først og hexværdierne bagefter.

## Stemninger i pink og lilla gradienter på et øjeblik

| Stemning | Typiske stop | Føles | Passer til |
| --- | --- | --- | --- |
| Slik | `#fbcfe8` til `#e9d5ff` | Sød, blød, ung | Bagerier, babyshowers, papirvarer |
| Orkidé | `#f0abfc` til `#c084fc` | Drømmende, romantisk | Skønhed, bryllupper, velvære |
| Magenta | `#ec4899` til `#9333ea` | Kraftig, glamourøs | Natteliv, musik, skabere |
| Skumring | `#2e0a2f` til `#9d174d` | Dyster, voksen | Parfume, cocktails, sene events |

Fire stemninger fra ét par. Hvert trin ned i tabellen er mørkere eller mere mættet end det forrige.

- Slikpink: #fbcfe8
- Tyggegummi: #f9a8d4
- Knaldpink: #ec4899
- Magenta: #c026d3
- Orkidéviolet: #a855f7
- Violet: #9333ea
- Syren: #e9d5ff
- Blommeblæk: #2e0a2f

En brugbar palet til parret, inklusive de lyse og mørke ender, du har brug for til tekst.

## Slikfarvede pink og lilla gradienter

Blege pinktoner og syrenfarver sammen er så bløde, som farver bliver. De passer til alt sødt eller blidt, men de kan hurtigt vippe over i det barnlige. Løsningen er en let varm bund, fersken eller creme i den ene ende, og meget selvsikker mørk skrift.

- Candyfloss: `linear-gradient(135deg, #fce7f3 0%, #fbcfe8 45%, #e9d5ff 100%)`
- Jordbærmælk: `linear-gradient(180deg, #fff1f2 0%, #f5d0fe 100%)`
- Fersken, pink, syren: `radial-gradient(circle at 25% 25%, #ffedd5 0%, #fbcfe8 45%, #ddd6fe 100%)`

Slikblandinger, alle sat med en dyb blommefarvet skrift. Ferskenen i den tredje forhindrer den i at føles sukkersød.

Vil du have mere af denne blødhed, dækker [pastelgradienter](https://gradiently.design/da/guide/pastel-gradients) hele familien, og [lavendelgradienter](https://gradiently.design/da/guide/lavender-gradient) læner sig længere mod lilla.

## Orkidé- og magentagradienter

Skru op for mætningen, og parret bliver glamourøst. Det er neglelakkens, festivalarmbåndenes og albumcovernes territorium. Brug en let vinkel eller en radial glød frem for en flad diagonal, og lad et roligere område være til ord.

- Knaldpink til violet: `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%)`
- Skinnende hvirvel: `conic-gradient(from 90deg at 40% 60%, #f472b6, #a855f7, #e879f9, #f472b6)`

Mættede pink og lilla gradienter. Den koniske virker som et skær, tæt på [holografiske gradienter](https://gradiently.design/da/guide/holographic-gradients).

## Skumring: mørke pink og lilla gradienter

Gør parret mørkt, og det bliver straks voksent. En blommesort bund med lys i hindbær og violet ligner himlen tyve minutter efter solnedgang eller en cocktailbar med dæmpet belysning. De er de mest alsidige i sættet og bærer let hvid eller bleg pink tekst.

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

Mørke pink og lilla gradienter. Tilføj et fint korn, for mørke blandinger får striber først.

De ligger tæt på [solnedgangsgradienter](https://gradiently.design/da/guide/sunset-gradient) og [galaksegradienter](https://gradiently.design/da/guide/galaxy-gradient), og du kan frit låne fra begge.

## Sådan tilføjer du en tredje farve uden at mudre den

Den almindelige diagonal fra knaldpink til violet er overalt, så én ekstra farve er den hurtigste vej til at gøre den til din. Vælg en farve, der ligger ved siden af enten pink eller lilla: orange og koral ligger ved pink, blå og indigo ved lilla. Grøn ligger over for magenta, og derfor bliver pink over i grøn grå på midten.

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

Tre pink og lilla gradienter med en tredje nabofarve. Hvert trin forbliver mættet.

## Sådan vælger du en pink og lilla gradient til dit brand

1. **Beslut lys eller mørk først** Det meste af stemningen kommer fra lysheden. En bleg blanding siger blid; en blommefarvet bund siger aften. Vælg én og hold fast i den på hvert opslag.
2. **Vælg, hvilken farve der fører** Når pink fører, føles det varmere og mere legende. Når lilla fører, føles det køligere og mere mystisk. Giv den førende farve omkring to tredjedele af fladen.
3. **Planlæg, hvor ordene står** Sæt overskriften over den mørkere, roligere ende og den klareste pink i et hjørne, så du aldrig kæmper med baggrunden om opmærksomheden.
4. **Test den i alle størrelser** En blanding, der virker på et kvadratisk opslag, kan lægge sit klareste område bag teksten i en story. Tjek opslag, story og banner, før du beslutter dig.

Poster du ofte, så skriv resultatet ned som en kort opskrift: bund, førende farve, accent, hvor lyset sidder. Den ene linje holder et helt feed ensartet, og det betyder mere end nogen enkelt smuk gradient. [Brandkonsistens](https://gradiently.design/da/guide/brand-consistency) går videre.

## Tekstfarver på pink og lilla

Klar pink er lysere, end den ser ud, så hvide overskrifter på knaldpink er svagere, end folk forventer. Violet og magenta bærer hvid godt. I den blege ende er en dyb blomme den skriftfarve, der holder designet i én familie. Forholdstallene er WCAG-kontrast; sigt efter 4,5:1 til lille tekst og mindst 3:1 til store overskrifter. [Farvekontrast og tilgængelighed](https://gradiently.design/da/guide/color-contrast-accessibility) forklarer grænserne.

| Baggrund | Tekst | Kontrast | Vurdering |
| --- | --- | --- | --- |
| Knaldpink `#ec4899` | Hvid | 3,5:1 | Kun store overskrifter |
| Dyb pink `#db2777` | Hvid | 4,6:1 | God |
| Magenta `#c026d3` | Hvid | 4,7:1 | God |
| Violet `#9333ea` | Hvid | 5,4:1 | God |
| Tyggegummi `#f9a8d4` | Blommeblæk `#3b0a3f` | 8,9:1 | Fremragende |
| Blommeblæk `#2e0a2f` | Tyggegummi `#f9a8d4` | 9,6:1 | Fremragende, pink som skrift |

Mål bag hver tekstlinje, ved gradientens lyseste punkt.

Et portrætopslag for en neglesalon med hvide bogstaver på en mættet gradient i pink og violet

Et opslag for en neglesalon på mættet orkidé, hvid skrift på den violette side.

En lodret story til en klubaften med bleg pink skrift på en mørk blommefarvet gradient oplyst af hindbær forneden

En story til en klubaften på skumringsblomme med hindbærlys lavt i billedet.

## CSS til pink 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 skumringssektion med hindbærglød og en overskrift fra pink til violet med beskåret baggrundstekst.

Gradienttekst er slående, men brug den kun til korte displayord, aldrig brødtekst. [Gradienttekst i CSS](https://gradiently.design/da/guide/css-gradient-text) gennemgår reserveløsningerne. Vil du have et pink og lilla look, som ingen andre kan udgive, kan du på Markedet i Gradiently søge efter Marks med farveord som »orkidé«. Hver Mark er unik, og når du har sikret dig den, kan kun du eksportere med den; den holder også selv skriften læsbar i begge ender af blandingen.

## FAQ

### Hvad er en god kode til en pink og lilla gradient?

En klassiker er `linear-gradient(135deg, #ec4899 0%, #c026d3 50%, #9333ea 100%)`. Vil du have noget mere dystert, så prøv `linear-gradient(180deg, #1e0b2e 0%, #581c87 50%, #be185d 100%)`.

### Passer pink og lilla sammen?

Ja. De er naboer på farvecirklen med magenta imellem, så de blander sig rent i enhver lyshed.

### Hvilken tekstfarve passer på en pink og lilla gradient?

Hvid kan læses godt på magenta, violet og mørk blomme. På knaldpink bør hvid kun bruges til store overskrifter, og på bleg pink eller syren skal du bruge en dyb blomme som `#3b0a3f`.

### Hvordan får jeg en pink og lilla gradient til at virke mindre barnlig?

Gå mørkere eller mere mættet, brug en blommefarvet bund, og tilføj en voksen tredje farve som guld eller dyb blå i et lille område.

### Hvilken farve ligger mellem pink og lilla?

Magenta, omkring `#c026d3`, med orkidé som den lysere udgave.