# Oransje gradient: 25 varme koder fra fersken til rust

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

Oransje er blant de varmeste fargene du kan bruke på en skjerm, og blant de letteste å bomme med. Her får du 25 blandinger du kan kopiere, gruppert etter stemning, og fargekombinasjonene og tekstreglene som får dem til å fungere.

## The short version

- En oransje gradient virker varm, vennlig og energisk, men stemningen endres mye med hvor lyse eller mørke oransjetonene er.
- Oransje glir rent over i nabofargene gult, ravgult, rødt, rosa og brunt.
- En direkte overgang fra oransje til blått eller blågrønt gir vanligvis en grå eller grumsete midte, så bruk komplementærfargene som egne aksenter.
- Hvit tekst har for lav kontrast på sterk oransje som #f97316. Bruk nesten svart eller dyp brun der, eller legg hvit tekst på brent oransje eller mørkere toner.
- Mørke bakgrunner med ett oransje lys virker eksklusive, mens bleke ferskenblandinger passer milde hverdagsmerker.

En **oransje gradient** blander to eller flere oransjetoner, ofte med en nabofarge som gul, rød eller rosa. Få blandinger føles varmere. Lys fersken og aprikos virker mykt og innbydende, sterk mandarin virker livlig og leken, mens brent oransje og rust virker jordnært og modent. Nedenfor finner du 25 koder gruppert etter stemning, og deretter råd om fargekombinasjoner og tekst som forblir lesbar.

## Myke oransje gradienter: fersken og aprikos

Bleke oransjetoner er den vennligste inngangen til fargen. De minner om hud, brød og ettermiddagslys, og brukes derfor av bakerier, hudpleie- og barnemerker. La det lyseste fargestoppet være nesten kremfarget, så blandingen får et rolig hvilested. Les mer om den lyseste enden i [ferskengradienter](https://gradiently.design/nb/guide/peach-gradient).

- Krem til aprikos: `linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%)`
- Myk aprikos: `linear-gradient(160deg, #ffedd5 0%, #fdba74 100%)`
- Ferskenhud: `linear-gradient(135deg, #fde2cf 0%, #fbb995 55%, #f6a07a 100%)`
- Morgenglød: `radial-gradient(circle at 30% 25%, #fff1e0 0%, #fcd5b0 50%, #f8b98a 100%)`
- Smør til melon: `linear-gradient(180deg, #fef3c7 0%, #fed7aa 50%, #fdba74 100%)`

Fem bleke oransje gradienter. Alle starter nær krem, så det alltid finnes et rolig område for mørk tekst.

## Sterke oransje gradienter: mandarin og sitrus

Mettet oransje er ren energi. Den passer til salg, matlevering, sport, festivaler og alt som må bli sett i miniatyrstørrelse. Risikoen er at sterk oransje blir én flat, påtrengende flate. Gi den derfor et lysere stopp mot gult eller et mørkere mot rødt. Den lille endringen får den til å ligne lys fremfor maling.

- Mandarin: `linear-gradient(135deg, #fdba74 0%, #f97316 100%)`
- Sitrusutbrudd: `linear-gradient(135deg, #fbbf24 0%, #f97316 60%, #ea580c 100%)`
- Oransje til vannmelon: `linear-gradient(120deg, #fb923c 0%, #f43f5e 100%)`
- Lysflekk: `radial-gradient(circle at 70% 30%, #fed7aa 0%, #fb923c 40%, #ea580c 100%)`
- Oransje til sitron: `linear-gradient(90deg, #f97316 0%, #facc15 100%)`

Sterke oransjetoner fungerer best med ett stopp som heller mot gult eller rosa. Da oppfattes blandingen som lys fremfor en flat fyllfarge.

## Oransje gradienter med solnedgang og rav

En loddrett overgang fra gull øverst til rødt eller plomme nederst gir en solnedgang, kanskje den mest kjente gradienten som finnes. Ravblandingene er en stillere slektning: honning-, marmelade- og whiskytoner som virker fyldige uten å rope. Vil du skape hele himmelen, går [solnedgangsgradienter](https://gradiently.design/nb/guide/sunset-gradient) videre.

- Klassisk solnedgang: `linear-gradient(180deg, #fcd34d 0%, #f97316 50%, #be123c 100%)`
- Skumring: `linear-gradient(180deg, #fdba74 0%, #f472b6 55%, #7c3aed 100%)`
- Honningrav: `linear-gradient(135deg, #fde68a 0%, #f59e0b 50%, #b45309 100%)`
- Marmelade: `linear-gradient(160deg, #fb923c 0%, #c2410c 60%, #7c2d12 100%)`
- Siste lys: `linear-gradient(180deg, #f59e0b 0%, #dc2626 60%, #450a0a 100%)`

Loddrette blandinger leses som himmel. Legg den lyseste fargen øverst og horisontfargen langt nede.

## Gradienter i brent oransje og rust

Skyv oransje mot brunt, så blir den terrakotta, rust og kobber: farger fra leirpotter, høstløv og gammelt lær. De virker håndlagde og gjennomtenkte, og passer interiør, kaffe, keramikk, friluftsmerker og produkter med en håndverkshistorie. De gir også hvit tekst langt bedre kontrast enn sterk oransje.

- Brent oransje: `linear-gradient(135deg, #ea580c 0%, #9a3412 100%)`
- Terrakotta: `linear-gradient(160deg, #e07a4f 0%, #b4532a 55%, #7a3419 100%)`
- Kobber: `linear-gradient(135deg, #d97706 0%, #92400e 60%, #451a03 100%)`
- Rust: `linear-gradient(180deg, #c2410c 0%, #7c2d12 100%)`
- Leire til bark: `linear-gradient(135deg, #f4c7a1 0%, #c8703f 50%, #6b2f14 100%)`

Brente oransjetoner ligger nær brunt. De er roligere, varmere og bedre som bakgrunn for hvit tekst.

## Oransje lys på mørk bakgrunn

Den mest eksklusive måten å bruke oransje på er sparsomt. Start med nesten svart, dyp brun eller marineblå, og la én oransjetone gløde fra et hjørne som en glo eller gatelykt. Dette passer kveldsarrangementer, restauranter, musikk og alt som skal føles varmt etter mørkets frembrudd. Mørke blandinger får lett synlige bånd, så les [mørke gradientbakgrunner](https://gradiently.design/nb/guide/dark-gradient-backgrounds) før du eksporterer.

- Glo: `radial-gradient(circle at 80% 20%, #f97316 0%, #7c2d12 35%, #120806 75%)`
- Ved peisen: `radial-gradient(circle at 20% 80%, #fb923c 0%, #431407 45%, #0c0a09 85%)`
- Gatelykt på marineblå: `radial-gradient(circle at 75% 25%, #fdba74 0%, #ea580c 20%, #1e1b4b 65%, #0b0a1f 100%)`
- Kull og kobber: `linear-gradient(200deg, #c2410c 0%, #3b1407 45%, #0c0a09 100%)`
- Glød ved horisonten: `radial-gradient(ellipse at 50% 110%, #f97316 0%, #9a3412 30%, #1c0f0a 70%)`

Ett oransje lys, mye mørke. Bakgrunnen skaper stemningen. Oransje trenger bare å gløde.

## Farger som passer til en oransje gradient

Oransje har to typer gode partnere. Nabofarger som gult, rosa og rødt glir rett over i den. Motsetninger som dyp blå og blågrønn gjør den livlig, men bør ligge ved siden av som aksenter, ikke i samme blanding, fordi midtpunktet blir grått. [Grumsete gradienter](https://gradiently.design/nb/guide/muddy-gradients) forklarer hvorfor, og [komplementærfarger](https://gradiently.design/nb/guide/complementary-colors) viser hvordan du bruker spenningen på en god måte.

- Krem: #fff7ed
- Aprikos: #fdba74
- Mandarin: #f97316
- Rust: #9a3412
- Barksvart: #431407
- Dyp blå aksent: #1e3a8a
- Blågrønn aksent: #0f766e

En praktisk oransje palett: kremfarget bakgrunn, tre oransjetoner, mørk brun til tekst og to kalde aksenter utenfor blandingen.

## Tekst på oransje gradienter

Her feiler mange oransje design. Hvit tekst på sterk mandarin ser kraftig ut, men gir omtrent 2,8 til 1 i kontrast, godt under 4,5 til 1 som WCAG krever for brødtekst. Nesten svart på samme oransje gir over 6 til 1. Regelen er enkel: mørk tekst på lyse og sterke oransjetoner, hvit tekst først fra brent oransje og mørkere. Hele metoden står i [fargekontrast og tilgjengelighet](https://gradiently.design/nb/guide/color-contrast-accessibility).

| Bakgrunn | Hvit tekst | Mørk tekst #1c1917 |
| --- | --- | --- |
| Aprikos `#fdba74` | Oppfyller ikke kravet | Oppfyller kravet med god margin |
| Mandarin `#f97316` | Omtrent 2,8:1, oppfyller ikke kravet | Omtrent 6,2:1, oppfyller kravet |
| Dyp oransje `#ea580c` | Omtrent 3,6:1, bare stor tekst | Oppfyller kravet |
| Brent oransje `#c2410c` | Omtrent 5,2:1, oppfyller kravet | Svak |
| Rust `#9a3412` | Omtrent 7,3:1, oppfyller kravet | Oppfyller ikke kravet |

Kontrast målt mot ensfarget bakgrunn. På en gradient må du teste det lyseste punktet bak ordene.

Et salgsinnlegg fra et bakeri med en varm oransje gradient rett bak overskriften, som er vanskelig å lese

Når den sterkeste oransjetonen ligger rett bak overskriften, begynner ordene å kjempe med fargen.

Det samme bakeriinnlegget med et roligere, mørkere område av gradienten bak en tydelig overskrift

Det samme innlegget med et roligere område bak ordene og en tekstfarge som passer til det.

Gradiently tar seg av denne delen. En Mark vet hvor ordene er: Den flytter det roligste området bak dem, og Auto-tekstfarge velger lys eller mørk tekst for hver linje fra Markens egen palett. Dermed forblir det oransje designet lesbart i alle størrelser uten bokser eller skygger.

## CSS for oransje gradienter

Hver kode over er én CSS-verdi du kan lime inn i `background`. Trenger en seksjon både varme og dybde, legger du et radialt lys over en lineær bunn og angir alltid en ensfarget reservefarge. Les [lineære CSS-gradienter](https://gradiently.design/nb/guide/css-linear-gradient) for hele syntaksen.

```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 */
}
```

Et sterkt aprikoslys over en bunn fra mandarin til rust. Legg overskriften lavt til venstre, der fargen er dypest.

Vil du ha et oransje uttrykk ingen andre publiserer, kan du finne varme Marker på Markedet: Søk med ord som «brent oransje» eller «aprikos», design gratis med en ledig Mark, og sikre deg den hvis den blir merkevarens uttrykk.

## FAQ

### Hvilke farger passer til en oransje gradient?

Gult, rosa, rødt og brunt glir direkte over i oransje. Dyp blå og blågrønn er sterke aksenter, men legg dem ved siden av oransje fremfor i samme blanding.

### Hva er heksadesimalkoden for brent oransje?

Det finnes ingen enkelt offisiell kode, men både `#c2410c` og `#cc5500` er mye brukt. En brent oransje gradient som `linear-gradient(135deg, #ea580c, #9a3412)` gir dybde.

### Kan jeg ha hvit tekst på en oransje gradient?

Bare på de mørkere oransjetonene. Hvit tekst på sterk mandarin har for lav kontrast, så bruk nesten svart der, og spar hvit tekst til brent oransje, rust og mørkere toner.

### Hvorfor blir den oransje og blå gradienten grå i midten?

Oransje og blått ligger overfor hverandre på fargesirkelen, så fargene mellom dem mister metning. Legg et rosa eller lilla stopp mellom dem, eller hold dem i adskilte områder.

### Hva sier en oransje gradient om en merkevare?

Oransje oppfattes vanligvis som varm, vennlig, leken og rimelig. Mørkere, brente varianter dreier uttrykket mot håndverk og selvtillit.