# Orange och rosa gradienter: varma koder bortom solnedgången

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

Orange och rosa är grannar, vilket gör dem till en av de varmaste och enklaste blandningarna som finns. Utmaningen är inte att blanda dem, utan att inte se ut som varje solnedgångsförinställning.

## The short version

- En orange och rosa gradient blandar angränsande varma nyanser som mandarin #f97316, korall #fb7185 och rosa #ec4899, så övergången förblir ljus utan en brofärg.
- Paret är så nära förknippat med solnedgångar att en enkel diagonal från orange till rosa läses som en förinställning, och att ändra bakgrunden eller ljusheten undviker det.
- Klar orange och het rosa är båda för ljusa för liten vit text, medan en djup rost eller bränd brun text läses bra på de mjukare versionerna.
- Jordnära versioner med terrakotta och dammig ros känns lugna och vuxna, och mörka versioner med glöd och hallon känns varma och nattliga.
- Orange och rosa passar mat, dryck, skönhet, sommarkampanjer, resor och varje varumärke som vill kännas varmt och välkomnande.

En **orange och rosa gradient** blandar två varma grannar: mandarin som `#f97316` eller persika som `#fed7aa` på ena sidan, rosa som `#ec4899` eller rodnad som `#fda4af` på den andra, vanligen med korall emellan. Eftersom nyanserna ligger sida vid sida blir blandningen aldrig lerig. Det den kan bli är förutsägbart, eftersom kombinationen är en förkortning för solnedgång. Koderna nedan är grupperade efter stämning, från mjuk persika till mörk glöd, så att du kan välja en version som känns som din i stället för som en mobilbakgrund.

## Färger mellan orange och rosa

Gå från orange till rosa så passerar du korall, lax och vattenmelon, alla mättade och varma. Gör vandringen ljusare och du får aprikos, persika och rodnad. Gör den mörkare och du får rost, terrakotta och hallon. De flesta bra orange och rosa gradienter använder tre stopp från samma ljushetsband i stället för ett hopp från blek persika till het rosa.

- Crème: #fff7ed
- Persika: #fed7aa
- Rodnad: #fda4af
- Aprikos: #fb923c
- Korall: #fb7185
- Mandarin: #f97316
- Het rosa: #ec4899
- Rost: #9a3412
- Bränd umbra: #431407

Området från orange till rosa, med en crème och två mörkbruna för bakgrunder och text.

## Mjuka persiko- och rodnadsgradienter

Blek orange och rosa tillsammans känns som hud, linne och tidigt morgonljus. Det gör dem till en naturlig match för hudvård, bröllop, välmående och bagerier. De fotograferas också bra bakom produkter, eftersom de smickrar varma toner. Sätt text i en djup rost snarare än svart, det behåller värmen.

- Persikolinne: `linear-gradient(135deg, #fff7ed 0%, #fed7aa 50%, #fecdd3 100%)`
- Aprikosrodnad: `radial-gradient(circle at 70% 30%, #ffe4e6 0%, #fed7aa 60%, #fdba74 100%)`
- Första ljuset: `linear-gradient(180deg, #fde68a 0%, #fecaca 55%, #fbcfe8 100%)`

Mjuk orange och rosa. Rost eller bränd umbra läses bra på alla tre. [Persikogradienter](https://gradiently.design/sv/guide/peach-gradient) har mer av den här familjen.

## Gradienter i korall, grapefrukt och vattenmelon

Mättad orange och rosa är ren sommar: grapefruktjuice, strandhanddukar, festivalaffischer. De är högljudda nog att stoppa en scroll och vänliga nog att inte kännas aggressiva. Håll dem borta från mycket liten text och ge dem ett lugnt hörn.

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

Klara orange och rosa gradienter. Varje stopp är en nära granne till nästa, så mitten förblir livfull. [Korallfärgade gradienter](https://gradiently.design/sv/guide/coral-gradient) går djupare.

## Jordnära terrakotta och dammig ros

Dämpa båda färgerna så blir paret lugnt och förankrat, paletten hos lerkrukor, torkade blommor och solbakade väggar. Det är den mest underanvända versionen och ofta den mest eleganta. Den sitter bekvämt med oliv, sand och crème, och fungerar bra tillsammans med [jordtonspaletter](https://gradiently.design/sv/guide/earth-tone-colors).

- Lera och ros: `linear-gradient(135deg, #f5e6d8 0%, #d9967a 55%, #c27c7c 100%)`
- Terrakottaskymning: `radial-gradient(circle at 80% 20%, #e8a598 0%, #b4644a 50%, #6b2f22 100%)`
- Torkade kronblad: `linear-gradient(180deg, #faf3ec 0%, #e7b9a8 50%, #b97a6f 100%)`

Dämpad orange och rosa. De här känns handgjorda och lugna, och passar interiörer, keramik, blomsterhandlare och varumärken för långsamt liv.

> **Bakom produktfoton** Varma, dämpade blandningar smickrar hud, trä, bröd och keramik eftersom de ekar de färgerna. Välj ett stopp från själva produkten och bygg gradienten utåt från det. [Bakgrunder för produktfoton](https://gradiently.design/sv/guide/product-photo-backgrounds) visar hur.

## Gradienter i mörk glöd och hallon

Utgå från en djupbrun eller plommonfärgad bakgrund och låt orange och rosa glöda ur den, så slutar paret vara gladlynt och blir intimt: levande ljus, glöd, en cocktailmeny. De här bär ljus text lätt, vilket gör dem praktiska för evenemangsaffischer och kvällserbjudanden.

- Glöd: `radial-gradient(circle at 75% 80%, #fb923c 0%, #9f1239 35%, #1c0708 80%)`
- Rost till hallon: `linear-gradient(160deg, #1f0a0a 0%, #7c2d12 45%, #db2777 100%)`
- Sista ljuset: `radial-gradient(ellipse at 50% 100%, #fdba74 0%, #be185d 40%, #2a0a14 85%)`

Mörka orange och rosa gradienter. Lägg till korn, eftersom mörka varma blandningar får lätt bandning.

## Så undviker du solnedgångsklichén

Orange till rosa på en diagonal på 45 grader finns överallt, från mobilbakgrunder till appikoner, så den läses som ett standardval. Vill du ha värmen utan förinställningen, ändra minst en av sakerna nedan. [Solnedgångsgradienter](https://gradiently.design/sv/guide/sunset-gradient) tar upp den bokstavliga versionen om det är det du vill ha.

### Förinställning

- Het orange till het rosa, två stopp
- Rak diagonal på 45 grader
- Färgen jämnt utspridd över bilden
- Vit text över den ljusaste delen

### Genomtänkt

- En bakgrund först: crème, lera eller glöd
- Ljus från ett hörn med en radiell gradient
- Ojämna stopp, där en färg leder
- Rosttext på mjuka versioner, crèmetext på mörka

## Textfärger på orange och rosa

Orange är en av de ljusaste mättade färgerna, så vit text på mandarin eller aprikos är svagare än den ser ut. Djup rost eller bränd umbra är den pålitliga textfärgen på de mjuka och klara versionerna, crème passar de mörka. Förhållandena använder WCAG-formeln, där 4,5:1 är det vanliga minimumet för brödtext, och [färgkontrast](https://gradiently.design/sv/guide/color-contrast-accessibility) förklarar resten.

| Bakgrund | Text | Kontrast | Utlåtande |
| --- | --- | --- | --- |
| Aprikos `#fb923c` | Vit | 2,3:1 | Klarar inte |
| Mandarin `#f97316` | Vit | 2,8:1 | Klarar inte för det mesta av text |
| Persika `#fed7aa` | Bränd umbra `#431407` | 11,6:1 | Utmärkt |
| Korall `#fb7185` | Bränd umbra `#431407` | 5,8:1 | Bra |
| Djup orange `#c2410c` | Vit | 5,2:1 | Bra |
| Hallon `#be185d` | Vit | 6,0:1 | Bra |

Om vit text är viktig för din design, mörka ner stoppen bakom den till djup orange eller hallon.

En barkampanj i porträtt med crèmefärgade bokstäver på en mörk gradient som glöder orange och hallon

En barkampanj på glöd till hallon, med crèmetext på den mörka sidan.

Ett kvadratiskt hudvårdsinlägg med mörkbruna bokstäver på en mjuk persiko- och rodnadsgradient

Ett hudvårdsinlägg på persika och rodnad med bränd umbra som textfärg.

## CSS för orange och rosa gradient

```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 crèmefärgad bakgrund med ett korallljus uppe till höger och aprikos nere till vänster, och text i bränd umbra.

Att lägga två mjuka radiella ljus över en blek bas ger en mycket mer naturlig värme än en enda diagonal. Vill du ha värme som oomtvistligt är din egen låter Marknaden i Gradiently dig söka Marks efter färgord som ”korall” eller ”persika”. Varje Mark är unik med exakt en ägare i taget, och när du har säkrat den är det bara du som kan exportera med den.

## FAQ

### Vad är en bra kod för orange och rosa gradient?

En klar klassiker är `linear-gradient(135deg, #f97316 0%, #fb7185 50%, #ec4899 100%)`. För en mjukare version, prova `linear-gradient(135deg, #fff7ed 0%, #fed7aa 50%, #fecdd3 100%)`.

### Passar orange och rosa ihop?

Ja. De är grannar på färghjulet med korall emellan, så de blandas rent och känns varma.

### Vilken textfärg passar på en orange och rosa gradient?

En djup rost eller bränd umbra som `#431407` läses bra på mjuka och klara versioner. Vit fungerar bara på de djupare stoppen, som `#c2410c` eller `#be185d`.

### Hur får jag en orange och rosa gradient att se mindre ut som en solnedgång?

Utgå från en bakgrund som crème, lera eller en mörk glöd, lys upp den från ett hörn i stället för en diagonal och låt en färg leda.

### Vilken färg ligger mellan orange och rosa?

Korall, runt `#fb7185`, med lax och vattenmelon som nära släktingar.