# Orange og pink gradienter: varme koder ud over solnedgangen

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

Orange og pink er naboer, og det gør dem til en af de varmeste og letteste blandinger, der findes. Udfordringen er ikke at blande dem; det er ikke at ligne alle andre solnedgangsforudindstillinger.

## The short version

- En orange og pink gradient blander varme nabokulører som mandarin #f97316, koral #fb7185 og pink #ec4899, så overgangen forbliver klar uden en brofarve.
- Parret er så tæt forbundet med solnedgange, at en almindelig diagonal fra orange til pink virker som en forudindstilling, og ændrer du bunden eller lysheden, undgår du det.
- Klar orange og knaldpink er begge for lyse til lille hvid tekst, mens en dyb rust eller brændt brun tekstfarve kan læses godt på de blødere versioner.
- Jordnære versioner med terrakotta og støvet rosa føles rolige og voksne, og mørke versioner med glød og hindbær føles varme og natlige.
- Orange og pink passer til mad, drikkevarer, skønhed, sommerkampagner, rejser og ethvert brand, der vil føles varmt og imødekommende.

En **orange og pink gradient** blander to varme naboer: mandarin som `#f97316` eller fersken som `#fed7aa` på den ene side, pink som `#ec4899` eller rosa som `#fda4af` på den anden, som regel med koral imellem. Fordi kulørerne ligger side om side, bliver blandingen aldrig mudret. Det, den kan blive, er forudsigelig, for kombinationen er en genvej til solnedgang. Koderne nedenfor er ordnet efter stemning, fra blød fersken til mørk glød, så du kan vælge en version, der føles som din og ikke som en telefonbaggrund.

## Farverne mellem orange og pink

Går du fra orange til pink, passerer du koral, laks og vandmelon, alle mættede og varme. Gør du turen lysere, får du abrikos, fersken og rosa. Gør du den mørkere, får du rust, terrakotta og hindbær. De fleste gode orange og pink gradienter bruger tre stop fra samme lyshedsbånd frem for et spring fra bleg fersken til knaldpink.

- Creme: #fff7ed
- Fersken: #fed7aa
- Rosa: #fda4af
- Abrikos: #fb923c
- Koral: #fb7185
- Mandarin: #f97316
- Knaldpink: #ec4899
- Rust: #9a3412
- Brændt umbra: #431407

Spektret fra orange til pink med en creme og to mørke brune til bunde og tekst.

## Bløde fersken- og rosagradienter

Blege orange og pink nuancer sammen føles som hud, hør og tidligt morgenlys. Det gør dem til et naturligt valg til hudpleje, bryllupper, wellness og bagerier. De tager sig også godt ud bag produkter på fotos, fordi de klæder varme toner. Sæt tekst i en dyb rust frem for sort; det bevarer varmen.

- Ferskenhør: `linear-gradient(135deg, #fff7ed 0%, #fed7aa 50%, #fecdd3 100%)`
- Abrikosrosa: `radial-gradient(circle at 70% 30%, #ffe4e6 0%, #fed7aa 60%, #fdba74 100%)`
- Første lys: `linear-gradient(180deg, #fde68a 0%, #fecaca 55%, #fbcfe8 100%)`

Blød orange og pink. Tekst i rust eller brændt umbra kan læses godt på alle tre. [Ferskengradienter](https://gradiently.design/da/guide/peach-gradient) har mere fra denne familie.

## Gradienter i koral, grapefrugt og vandmelon

Mættet orange og pink er ren sommer: grapefrugtjuice, badehåndklæder, festivalplakater. De er højlydte nok til at stoppe en scroll og venlige nok til ikke at føles aggressive. Hold dem væk fra meget lille tekst, og giv dem et roligt hjørne.

- Mandarin til pink: `linear-gradient(135deg, #f97316 0%, #fb7185 50%, #ec4899 100%)`
- Grapefrugt: `radial-gradient(circle at 25% 75%, #fdba74 0%, #fb7185 45%, #e11d48 100%)`
- Vandmelon: `linear-gradient(160deg, #fb923c 0%, #f43f5e 70%, #be185d 100%)`
- Mangosmoothie: `linear-gradient(90deg, #fbbf24 0%, #fb923c 35%, #f472b6 100%)`

Klare orange og pink gradienter. Hvert stop er en nær nabo til det næste, så midten forbliver livlig. [Koralgradienter](https://gradiently.design/da/guide/coral-gradient) går dybere.

## Jordnær terrakotta og støvet rosa

Dæmp begge farver, og parret bliver roligt og jordbundet, paletten fra lerkrukker, tørrede blomster og solbagte mure. Det er den mest oversete version og ofte den mest elegante. Den passer fint sammen med oliven, sand og creme og fungerer godt ved siden af [jordfarvepaletter](https://gradiently.design/da/guide/earth-tone-colors).

- Ler og rose: `linear-gradient(135deg, #f5e6d8 0%, #d9967a 55%, #c27c7c 100%)`
- Terrakottaskumring: `radial-gradient(circle at 80% 20%, #e8a598 0%, #b4644a 50%, #6b2f22 100%)`
- Tørrede kronblade: `linear-gradient(180deg, #faf3ec 0%, #e7b9a8 50%, #b97a6f 100%)`

Dæmpet orange og pink. De føles håndlavede og rolige og passer til indretning, keramik, blomsterhandlere og slow living-brands.

> **Bag produktfotos** Varme, dæmpede blandinger klæder hud, træ, brød og keramik, fordi de genspejler de farver. Tag et stop fra selve produktet, og byg gradienten ud fra det. [Baggrunde til produktfotos](https://gradiently.design/da/guide/product-photo-backgrounds) viser hvordan.

## Mørke gradienter i glød og hindbær

Start fra en dyb brun eller blommefarvet bund, og lad orange og pink gløde ud af den, så holder parret op med at være muntert og bliver intimt: levende lys, gløder, et cocktailkort. De bærer let lys tekst, hvilket gør dem praktiske til eventplakater og aftentilbud.

- Glød: `radial-gradient(circle at 75% 80%, #fb923c 0%, #9f1239 35%, #1c0708 80%)`
- Rust til hindbær: `linear-gradient(160deg, #1f0a0a 0%, #7c2d12 45%, #db2777 100%)`
- Sidste lys: `radial-gradient(ellipse at 50% 100%, #fdba74 0%, #be185d 40%, #2a0a14 85%)`

Mørke orange og pink gradienter. Tilføj korn, for mørke varme blandinger får let striber.

## Sådan undgår du solnedgangsklichéen

Orange til pink på en diagonal i 45 grader er overalt, fra telefonbaggrunde til appikoner, så den virker som en standard. Vil du have varmen uden forudindstillingen, så ændr mindst én af tingene nedenfor. [Solnedgangsgradienter](https://gradiently.design/da/guide/sunset-gradient) dækker den bogstavelige version, hvis det er den, du vil have.

### Forudindstilling

- Knaldorange til knaldpink, to stop
- Lige diagonal i 45 grader
- Farven fordelt jævnt over hele billedet
- Hvid tekst over den klareste del

### Gennemtænkt

- En bund først: creme, ler eller glød
- Lys fra ét hjørne med en radial gradient
- Ujævne stop, hvor én farve fører
- Rust tekst på bløde versioner, creme tekst på mørke

## Tekstfarver på orange og pink

Orange er en af de lyseste mættede farver, så hvid tekst på mandarin eller abrikos er svagere, end den ser ud. Dyb rust eller brændt umbra er den pålidelige tekstfarve på de bløde og klare versioner; creme passer til de mørke. Forholdene bruger WCAG-formlen, hvor 4,5:1 er det almindelige minimum for brødtekst, og [farvekontrast](https://gradiently.design/da/guide/color-contrast-accessibility) forklarer resten.

| Baggrund | Tekst | Kontrast | Vurdering |
| --- | --- | --- | --- |
| Abrikos `#fb923c` | Hvid | 2,3:1 | Dumper |
| Mandarin `#f97316` | Hvid | 2,8:1 | Dumper for det meste tekst |
| Fersken `#fed7aa` | Brændt umbra `#431407` | 11,6:1 | Fremragende |
| Koral `#fb7185` | Brændt umbra `#431407` | 5,8:1 | God |
| Dyb orange `#c2410c` | Hvid | 5,2:1 | God |
| Hindbær `#be185d` | Hvid | 6,0:1 | God |

Er hvid tekst vigtig for dit design, så gør stoppene bag den mørkere, til dyb orange eller hindbær.

En stående barkampagne med cremefarvede bogstaver på en mørk gradient, der gløder orange og hindbærrødt

En barkampagne på glød til hindbær med cremefarvet tekst på den mørke side.

Et kvadratisk hudplejeopslag med mørkebrune bogstaver på en blød gradient i fersken og rosa

Et hudplejeopslag på fersken og rosa med tekst i brændt umbra.

## CSS til orange og pink gradienter

```css
.warm-hero {
  background-color: #fff7ed;
  background-image:
    radial-gradient(circle at 85% 20%, #fb7185 0%, transparent 45%),
    radial-gradient(circle at 10% 90%, #fdba74 0%, transparent 50%),
    linear-gradient(160deg, #fff7ed 0%, #fed7aa 100%);
  color: #431407;
}
```

En cremefarvet bund med et koralfarvet lys øverst til højre og abrikos nederst til venstre samt tekst i brændt umbra.

To bløde radiale lys over en bleg bund giver en langt mere naturlig varme end én enkelt diagonal. Vil du have en varme, der umiskendeligt er din, kan du i Markedet i Gradiently søge efter Marks med farveord som »koral« eller »fersken«. Hver Mark er unik med præcis én ejer ad gangen, og når du har sikret dig den, er det kun dig, der kan eksportere med den.

## FAQ

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

En klar klassiker er `linear-gradient(135deg, #f97316 0%, #fb7185 50%, #ec4899 100%)`. Til en blødere version kan du prøve `linear-gradient(135deg, #fff7ed 0%, #fed7aa 50%, #fecdd3 100%)`.

### Passer orange og pink sammen?

Ja. De er naboer i farvecirklen med koral imellem, så de glider rent over i hinanden og føles varme.

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

En dyb rust eller brændt umbra som `#431407` kan læses godt på bløde og klare versioner. Hvid virker kun på de dybere stop, som `#c2410c` eller `#be185d`.

### Hvordan får jeg en orange og pink gradient til at ligne en solnedgang mindre?

Start fra en bund som creme, ler eller en mørk glød, belys den fra ét hjørne i stedet for en diagonal, og lad én farve føre.

### Hvilken farve ligger mellem orange og pink?

Koral, omkring `#fb7185`, med laks og vandmelon som nære slægtninge.