# Oransje og rosa gradienter: varme uten solnedgangsklisjeen

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

Oransje og rosa er nabofarger og gir en av de varmeste og enkleste blandingene som finnes. Utfordringen er ikke å blande dem, men å unngå å ligne alle de ferdige solnedgangsvariantene.

## The short version

- En oransje og rosa gradient blander varme nabofarger som mandarin #f97316, korall #fb7185 og rosa #ec4899, slik at overgangen forblir klar uten en mellomfarge.
- Fargeparet er så tett knyttet til solnedganger at en enkel diagonal fra oransje til rosa virker som en ferdiginnstilling. Endre bakgrunnen eller lysheten for å unngå det.
- Sterk oransje og knallrosa er begge for lyse for liten hvit tekst, mens dyp rust eller brent brun gir god lesbarhet på de mykere variantene.
- Jordnære varianter med terrakotta og støvet rosa virker rolige og modne, mens mørke varianter med glør og bringebær føles varme og nattlige.
- Oransje og rosa passer til mat, drikke, skjønnhet, sommerkampanjer, reiser og merkevarer som vil virke varme og innbydende.

En **oransje og rosa gradient** blander to varme naboer: mandarin som `#f97316` eller fersken som `#fed7aa` på den ene siden, rosa som `#ec4899` eller blek rosa som `#fda4af` på den andre, vanligvis med korall imellom. Fordi kulørene ligger ved siden av hverandre, blir blandingen aldri grumsete. Den kan derimot bli forutsigbar, fordi kombinasjonen er et kortuttrykk for solnedgang. Kodene nedenfor er gruppert etter stemning, fra myk fersken til mørke glør, så du kan velge en variant som føles som din fremfor som en mobilbakgrunn.

## Fargene mellom oransje og rosa

På veien fra oransje til rosa passerer du korall, lakserosa og vannmelon, alle mettede og varme. Gjør overgangen lysere, så får du aprikos, fersken og blek rosa. Gjør den mørkere, så får du rust, terrakotta og bringebær. De fleste gode oransje og rosa gradienter bruker tre stopp med omtrent samme lyshet fremfor et sprang fra blek fersken til knallrosa.

- Krem: #fff7ed
- Fersken: #fed7aa
- Blek rosa: #fda4af
- Aprikos: #fb923c
- Korall: #fb7185
- Mandarin: #f97316
- Knallrosa: #ec4899
- Rust: #9a3412
- Brent umbra: #431407

Spekteret fra oransje til rosa, med krem og to mørke bruntoner til bakgrunner og tekst.

## Myke gradienter i fersken og blek rosa

Lys oransje og rosa sammen minner om hud, lin og tidlig morgenlys. Det gjør dem til naturlige valg for hudpleie, bryllup, velvære og bakerier. De fotograferes også godt bak produkter fordi de fremhever varme toner. Sett teksten i dyp rust fremfor svart for å beholde varmen.

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

Myk oransje og rosa. Tekst i rust eller brent umbra er lesbar på alle tre. [Ferskengradienter](https://gradiently.design/nb/guide/peach-gradient) har flere fra denne familien.

## Gradienter i korall, grapefrukt og vannmelon

Mettet oransje og rosa er ren sommer: grapefruktjuice, strandhåndklær og festivalplakater. De er sterke nok til å stoppe skrollingen og vennlige nok til ikke å virke aggressive. Unngå svært liten tekst, og gi dem et rolig hjørne.

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

Sterke oransje og rosa gradienter. Hvert stopp er en nær nabo av det neste, så midten forblir livlig. [Korallgradienter](https://gradiently.design/nb/guide/coral-gradient) går dypere.

## Jordnær terrakotta og støvet rosa

Demp begge fargene, så blir paret rolig og jordnært: paletten fra leirpotter, tørkede blomster og solbakte vegger. Dette er den minst brukte varianten og ofte den mest elegante. Den trives med oliven, sand og krem, og fungerer godt sammen med [jordfargepaletter](https://gradiently.design/nb/guide/earth-tone-colors).

- Leire 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ørkede kronblader: `linear-gradient(180deg, #faf3ec 0%, #e7b9a8 50%, #b97a6f 100%)`

Dempet oransje og rosa. De føles håndlagde og rolige, og passer interiør, keramikk, blomsterbutikker og merkevarer for et roligere liv.

> **Bak produktbilder** Varme, dempede blandinger fremhever hud, tre, brød og keramikk fordi de gjentar disse fargene. Velg et stopp fra selve produktet og bygg gradienten utover fra det. [Bakgrunner for produktbilder](https://gradiently.design/nb/guide/product-photo-backgrounds) viser hvordan.

## Mørke gradienter i glør og bringebær

Start med en dyp brun eller plommefarget bunn, og la oransje og rosa gløde ut fra den. Paret går da fra muntert til intimt: levende lys, glør og en cocktailmeny. Lys tekst er lett å lese på dem, så de er praktiske til arrangementsplakater og kveldstilbud.

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

Mørke oransje og rosa gradienter. Legg til korn, for mørke, varme blandinger får lett synlige bånd.

## Slik unngår du solnedgangsklisjeen

Oransje til rosa på en 45 graders diagonal finnes overalt, fra mobilbakgrunner til appikoner, og virker derfor som en standardinnstilling. Vil du ha varmen uten det ferdige uttrykket, endrer du minst én av tingene nedenfor. [Solnedgangsgradienter](https://gradiently.design/nb/guide/sunset-gradient) dekker den bokstavelige varianten hvis det er den du ønsker.

### Ferdiginnstilling

- Knalloransje til knallrosa, to stopp
- Rett diagonal på 45 grader
- Fargen jevnt fordelt over bildet
- Hvit tekst på det lyseste området

### Gjennomtenkt

- En bunn først: krem, leire eller glør
- Lys fra ett hjørne med en radial gradient
- Ujevne stopp, med én dominerende farge
- Rustfarget tekst på myke varianter, krem på mørke

## Tekstfarger på oransje og rosa

Oransje er en av de lyseste mettede fargene, så hvit tekst på mandarin eller aprikos er svakere enn den ser ut. Dyp rust eller brent umbra er pålitelige tekstfarger på de myke og sterke variantene, mens krem passer de mørke. Forholdstallene bruker WCAG-formelen, der 4,5:1 er det vanlige minimumet for brødtekst. [Fargekontrast](https://gradiently.design/nb/guide/color-contrast-accessibility) forklarer resten.

| Bakgrunn | Tekst | Kontrast | Vurdering |
| --- | --- | --- | --- |
| Aprikos `#fb923c` | Hvit | 2,3:1 | Oppfyller ikke kravet |
| Mandarin `#f97316` | Hvit | 2,8:1 | For lav kontrast for de fleste tekster |
| Fersken `#fed7aa` | Brent umbra `#431407` | 11,6:1 | Utmerket |
| Korall `#fb7185` | Brent umbra `#431407` | 5,8:1 | God |
| Dyp oransje `#c2410c` | Hvit | 5,2:1 | God |
| Bringebær `#be185d` | Hvit | 6,0:1 | God |

Hvis hvit tekst er viktig for designet, mørkner du stoppene bak den til dyp oransje eller bringebær.

En stående barannonse med kremfarget skrift på en mørk gradient som gløder i oransje og bringebær

En barannonse fra glør til bringebær, med kremfarget tekst på den mørke siden.

Et kvadratisk hudpleieinnlegg med mørkebrun skrift på en myk gradient i fersken og blek rosa

Et hudpleieinnlegg i fersken og blek rosa med tekst i brent umbra.

## CSS for oransje og rosa 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 kremfarget bunn med koralllys øverst til høyre, aprikos nederst til venstre og tekst i brent umbra.

To myke radiale lys over en lys bunn gir langt mer naturlig varme enn én diagonal. Vil du ha varme som tydelig er din, kan du søke etter Marker med fargeord som «korall» eller «fersken» på Markedet i Gradiently. Hver Mark er unik og har nøyaktig én eier om gangen. Når du har sikret deg den, er det bare du som kan eksportere med den.

## FAQ

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

En sterk klassiker er `linear-gradient(135deg, #f97316 0%, #fb7185 50%, #ec4899 100%)`. Prøv `linear-gradient(135deg, #fff7ed 0%, #fed7aa 50%, #fecdd3 100%)` for en mykere variant.

### Passer oransje og rosa sammen?

Ja. De er naboer på fargesirkelen med korall imellom, så de glir rent sammen og føles varme.

### Hvilken tekstfarge passer på en oransje og rosa gradient?

Dyp rust eller brent umbra som `#431407` er lett å lese på myke og sterke varianter. Hvit fungerer bare på de mørkere stoppene, som `#c2410c` eller `#be185d`.

### Hvordan får jeg en oransje og rosa gradient til å ligne mindre på en solnedgang?

Start med en bunn som krem, leire eller mørke glør, la lyset komme fra ett hjørne fremfor en diagonal, og la én farge dominere.

### Hvilken farge ligger mellom oransje og rosa?

Korall, omtrent `#fb7185`, med lakserosa og vannmelon som nære slektninger.