# Orange gradient: 25 varma koder från persika till bränd

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

Orange är en av de varmaste färgerna du kan lägga på en skärm, och en av de lättaste att göra fel. Här är 25 kopierbara blandningar grupperade efter stämning, plus kombinationerna och textreglerna som får dem att fungera.

## The short version

- En orange gradient läses som varm, vänlig och energisk, och stämningen ändras kraftigt beroende på hur ljusa eller mörka de oranga tonerna är.
- Orange blandas rent mot sina grannar: gult, bärnsten, rött, rosa och brunt.
- Att blanda orange direkt med blått eller blågrönt ger oftast en grå eller lerig mitt, så håll komplementfärger som en separat accent i stället.
- Vit text klarar inte kontrasten på klar orange som #f97316, använd nästan svart eller djupbrun text där, eller flytta vit text till bränd orange eller mörkare.
- Mörka bakgrunder med ett enda orange ljus ser premium ut, medan bleka persikoblandningar passar milda vardagsvarumärken.

En **orange gradient** blandar två eller fler oranga toner, ofta med ett angränsande gult, rött eller rosa, och få blandningar känns varmare. Ljusa persiko- och aprikosversioner känns mjuka och välkomnande, klar mandarin känns högljudd och lekfull, och bränd orange eller rost känns jordnära och vuxen. Nedan finns 25 koder grupperade efter de stämningarna, följt av vad du kan para dem med och hur du sätter text på dem utan att tappa orden.

## Mjuka orange gradienter: persika och aprikos

Bleka oranga toner är den vänligaste vägen in i färgen. De ligger nära hud, bröd och eftermiddagsljus, vilket är varför bagerier, hudvård och barnvarumärken lutar sig mot dem. Håll det ljusaste stoppet nästan crème, så att blandningen har någonstans lugnt att vila. För en hel artikel om den blekaste änden, se [persikogradienter](https://gradiently.design/sv/guide/peach-gradient).

- Crème till aprikos: `linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%)`
- Mjuk aprikos: `linear-gradient(160deg, #ffedd5 0%, #fdba74 100%)`
- Persikohud: `linear-gradient(135deg, #fde2cf 0%, #fbb995 55%, #f6a07a 100%)`
- Morgonsken: `radial-gradient(circle at 30% 25%, #fff1e0 0%, #fcd5b0 50%, #f8b98a 100%)`
- Smör till melon: `linear-gradient(180deg, #fef3c7 0%, #fed7aa 50%, #fdba74 100%)`

Fem bleka orange gradienter. Var och en börjar nära crème, så det finns alltid en lugn yta för mörk text.

## Klara orange gradienter: mandarin och citrus

Mättad orange är ren energi. Den passar rea, matleverans, sport, festivaler och allt som måste synas i miniatyrstorlek. Risken är att klar orange plattas till ett enda högljutt block, så ge den ett ljusare stopp mot gult eller ett djupare mot rött. Det lilla skiftet är det som får den att se ut som ljus snarare än färg.

- Mandarin: `linear-gradient(135deg, #fdba74 0%, #f97316 100%)`
- Citrusutbrott: `linear-gradient(135deg, #fbbf24 0%, #f97316 60%, #ea580c 100%)`
- Orange till vattenmelon: `linear-gradient(120deg, #fb923c 0%, #f43f5e 100%)`
- Het punkt: `radial-gradient(circle at 70% 30%, #fed7aa 0%, #fb923c 40%, #ea580c 100%)`
- Orange till citron: `linear-gradient(90deg, #f97316 0%, #facc15 100%)`

Klara oranga toner fungerar bäst med ett stopp som lutar mot gult eller rosa. Blandningen läses då som ljus, inte som en platt fyllning.

## Solnedgångs- och bärnstensorange gradienter

Att köra orange vertikalt från guld överst till rött eller plommon nederst ger en solnedgång, förmodligen den mest välbekanta gradienten som finns. Bärnstensblandningar är den tystare kusinen: honung, marmelad och whiskytoner som känns rika utan att ropa. Vill du ha hela himmelsbehandlingen går [solnedgångsgradienter](https://gradiently.design/sv/guide/sunset-gradient) längre.

- Klassisk solnedgång: `linear-gradient(180deg, #fcd34d 0%, #f97316 50%, #be123c 100%)`
- Skymning: `linear-gradient(180deg, #fdba74 0%, #f472b6 55%, #7c3aed 100%)`
- Honungsbärnsten: `linear-gradient(135deg, #fde68a 0%, #f59e0b 50%, #b45309 100%)`
- Marmelad: `linear-gradient(160deg, #fb923c 0%, #c2410c 60%, #7c2d12 100%)`
- Sista ljuset: `linear-gradient(180deg, #f59e0b 0%, #dc2626 60%, #450a0a 100%)`

Vertikala blandningar läses som himmel. Lägg den ljusaste färgen överst och horisontfärgen långt ner.

## Gradienter i bränd orange och rost

Driv orange mot brunt så blir den terrakotta, rost och koppar: färger från lerkrukor, höstlöv och gammalt läder. De känns hantverksmässiga och genomtänkta, så de passar interiörer, kaffe, keramik, friluftsvarumärken och allt med en handgjord berättelse. De bär också vit text mycket bättre än klar orange.

- Bränd orange: `linear-gradient(135deg, #ea580c 0%, #9a3412 100%)`
- Terrakotta: `linear-gradient(160deg, #e07a4f 0%, #b4532a 55%, #7a3419 100%)`
- Koppar: `linear-gradient(135deg, #d97706 0%, #92400e 60%, #451a03 100%)`
- Rost: `linear-gradient(180deg, #c2410c 0%, #7c2d12 100%)`
- Lera till bark: `linear-gradient(135deg, #f4c7a1 0%, #c8703f 50%, #6b2f14 100%)`

Brända oranga toner ligger nära brunt. De är lugnare, varmare och bättre bakom vit text.

## Orange ljus mot mörk bakgrund

Det mest premium sättet att använda orange är sparsamt. Utgå från ett nästan svart, ett djupbrunt eller ett marinblått och låt ett orange glöda från ett hörn som en glöd eller en gatlykta. Det här är behandlingen för sena kvällar, restauranger, musik och allt som ska kännas varmt efter mörkrets inbrott. Mörka blandningar får lätt bandning, så läs [mörka gradientbakgrunder](https://gradiently.design/sv/guide/dark-gradient-backgrounds) innan du exporterar.

- Glöd: `radial-gradient(circle at 80% 20%, #f97316 0%, #7c2d12 35%, #120806 75%)`
- Vid brasan: `radial-gradient(circle at 20% 80%, #fb923c 0%, #431407 45%, #0c0a09 85%)`
- Gatlykta mot marinblått: `radial-gradient(circle at 75% 25%, #fdba74 0%, #ea580c 20%, #1e1b4b 65%, #0b0a1f 100%)`
- Kol och koppar: `linear-gradient(200deg, #c2410c 0%, #3b1407 45%, #0c0a09 100%)`
- Horisontsken: `radial-gradient(ellipse at 50% 110%, #f97316 0%, #9a3412 30%, #1c0f0a 70%)`

Ett orange ljus, mycket mörker. Bakgrunden står för stämningen, det orange behöver bara glöda.

## Färger som passar med en orange gradient

Orange har två sorters bra partner. Grannar som gult, rosa och rött blandas rakt in i den. Motsatser som djupblått och blågrönt får den att vibrera, men de ska sitta bredvid det orange som en accent, inte inuti samma blandning, eftersom mittpunkten mellan dem blir grå. [Leriga gradienter](https://gradiently.design/sv/guide/muddy-gradients) förklarar varför, och [komplementfärger](https://gradiently.design/sv/guide/complementary-colors) visar hur du använder dragningen säkert.

- Crème: #fff7ed
- Aprikos: #fdba74
- Mandarin: #f97316
- Rost: #9a3412
- Barkbläck: #431407
- Djupblå accent: #1e3a8a
- Blågrön accent: #0f766e

En fungerande orange palett: en crèmefärgad bakgrund, tre oranga toner, en mörkbrun för text och två kalla accenter hållna åtskilda från blandningen.

## Text på orange gradienter

Här misslyckas de flesta orange designer. Vitt på klar mandarin ser djärvt ut men har ett kontrastförhållande på ungefär 2,8 till 1, långt under de 4,5 till 1 som WCAG kräver för brödtext. Nästan svart på samma orange får över 6 till 1. Regeln är enkel: mörk text på ljusa och klara oranga toner, vit text först från bränd orange och nedåt. Hela metoden finns i [färgkontrast och tillgänglighet](https://gradiently.design/sv/guide/color-contrast-accessibility).

| Bakgrund | Vit text | Mörk text #1c1917 |
| --- | --- | --- |
| Aprikos `#fdba74` | Klarar inte | Klarar det lätt |
| Mandarin `#f97316` | Ungefär 2,8:1, klarar inte | Ungefär 6,2:1, klarar det |
| Djup orange `#ea580c` | Ungefär 3,6:1, bara stor text | Klarar det |
| Bränd orange `#c2410c` | Ungefär 5,2:1, klarar det | Svagt |
| Rost `#9a3412` | Ungefär 7,3:1, klarar det | Klarar inte |

Kontrast uppmätt mot en platt färg. På en gradient, testa den ljusaste punkten bakom dina ord.

Ett bageriinlägg för rea med en varm orange gradient rakt bakom rubriken, som är svår att läsa

När den klaraste oranga färgen går rakt bakom rubriken börjar orden kämpa mot färgen.

Samma bageriinlägg med en lugnare, djupare del av gradienten bakom tydlig rubriktext

Samma inlägg med en lugnare yta bakom orden och textfärgen vald för den.

Gradiently sköter den här delen åt dig. En Mark vet var orden finns: den flyttar sin lugnaste region bakom dem och Auto-bläck väljer ljus eller mörk text rad för rad ur Markens egen palett, så en orange design förblir läsbar i varje storlek utan rutor eller skuggor.

## Orange gradient i CSS

Varje kod ovan är ett enda CSS-värde du kan klistra in i `background`. För en sektion som behöver både värme och djup, lägg ett radiellt ljus över en linjär bas och sätt alltid en enfärgad reservfärg. Läs [CSS linjära gradienter](https://gradiently.design/sv/guide/css-linear-gradient) för hela syntaxen.

```css
.hero {
  background-color: #9a3412; /* fallback */
  background-image:
    radial-gradient(circle at 78% 22%, #fdba74 0%, transparent 40%),
    linear-gradient(160deg, #f97316 0%, #c2410c 55%, #7c2d12 100%);
  color: #ffffff; /* safe here: the words sit on the darker lower half */
}
```

Ett klart aprikosljus över en bas från mandarin till rost. Placera rubriken lågt och till vänster, där färgen är djupast.

Vill du ha en orange look som ingen annan postar, bläddra i Marknaden efter varma Marks: sök ord som ”bränd orange” eller ”aprikos”, designa gratis med vilken oclaimad som helst och säkra den om den blir ditt varumärke.

## FAQ

### Vilka färger passar bra med en orange gradient?

Gult, rosa, rött och brunt blandas direkt in i orange. Djupblått och blågrönt ger starka accenter, men håll dem bredvid det orange i stället för inuti samma blandning.

### Vad är hexkoden för bränd orange?

Det finns ingen enskild officiell kod, men `#c2410c` och `#cc5500` används båda flitigt. En gradient i bränd orange som `linear-gradient(135deg, #ea580c, #9a3412)` ger den djup.

### Kan jag lägga vit text på en orange gradient?

Bara på de mörkare oranga tonerna. Vitt på klar mandarin klarar inte kontrasten, så använd nästan svart där och spara vit text för bränd orange, rost och mörkare.

### Varför ser min orange och blå gradient grå ut i mitten?

Orange och blått ligger mitt emot varandra på färghjulet, så färgerna mellan dem tappar mättnad. Lägg ett stopp av rosa eller lila mellan dem, eller håll dem som separata ytor.

### Vad säger en orange gradient om ett varumärke?

Orange läses oftast som varm, vänlig, lekfull och prisvärd. Mörkare, brända versioner skiftar det mot hantverk och självförtroende.