# Orange gradient: 25 varme koder fra fersken til brændt orange

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

Orange er en af de varmeste farver, du kan sætte på en skærm, og en af de letteste at ramme forkert. Her er 25 blandinger, du kan kopiere, ordnet efter stemning, plus de kombinationer og tekstregler, der får dem til at virke.

## The short version

- En orange gradient virker varm, venlig og energisk, og stemningen skifter markant, alt efter hvor lyse eller mørke de orange nuancer er.
- Orange glider rent over i sine naboer: gul, rav, rød, pink og brun.
- Blander du orange direkte med blå eller petrol, får du som regel en grå eller mudret midte, så hold komplementærfarver som en separat accent i stedet.
- Hvid tekst klarer ikke kontrastkravet på klar orange som #f97316; brug næsten sort eller dyb brun tekst der, eller flyt hvid tekst over på brændt orange eller mørkere.
- Mørke bunde med ét enkelt orange lys ser eksklusive ud, mens blege ferskenblandinger passer til milde hverdagsbrands.

En **orange gradient** blander to eller flere orange nuancer, ofte med en nabofarve som gul, rød eller pink, og få blandinger føles varmere. Lyse fersken- og abrikosversioner føles bløde og imødekommende, klar mandarin føles højlydt og legesyg, og brændt orange eller rust føles jordnær og voksen. Nedenfor er 25 koder ordnet efter de stemninger, efterfulgt af hvad du kan kombinere dem med, og hvordan du sætter tekst på dem uden at miste dine ord.

## Bløde orange gradienter: fersken og abrikos

Blege orange nuancer er den venligste vej ind i farven. De ligger tæt på hud, brød og sent eftermiddagslys, og derfor læner bagerier, hudpleje og børnebrands sig op ad dem. Hold det lyseste stop næsten cremefarvet, så blandingen har et roligt sted at hvile. En hel artikel om den blegeste ende finder du i [ferskengradienter](https://gradiently.design/da/guide/peach-gradient).

- Creme til abrikos: `linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%)`
- Blød abrikos: `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 blege orange gradienter. Hver starter tæt på creme, så der altid er et roligt område til mørk tekst.

## Klare orange gradienter: mandarin og citrus

Mættet orange er ren energi. Den passer til udsalg, madlevering, sport, festivaler og alt, der skal bemærkes i miniaturestørrelse. Risikoen er, at klar orange bliver til én flad, højlydt blok, så giv den et lysere stop mod gul eller et dybere mod rød. Det lille skift er det, der får den til at ligne lys frem for maling.

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

Klare orange nuancer virker bedst med ét stop, der læner sig mod gul eller pink. Så opleves blandingen som lys og ikke som en flad flade.

## Solnedgangs- og ravfarvede orange gradienter

Lader du orange løbe lodret fra guld foroven til rød eller blomme forneden, får du en solnedgang, nok den mest velkendte gradient, der findes. Ravblandinger er den stille fætter: honning, marmelade og whisky, toner der føles fyldige uden at råbe. Vil du have hele himlen med, går [solnedgangsgradienter](https://gradiently.design/da/guide/sunset-gradient) videre.

- Klassisk solnedgang: `linear-gradient(180deg, #fcd34d 0%, #f97316 50%, #be123c 100%)`
- Tusmørke: `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%)`
- Sidste lys: `linear-gradient(180deg, #f59e0b 0%, #dc2626 60%, #450a0a 100%)`

Lodrette blandinger opleves som himmel. Sæt den lyseste farve øverst og horisontfarven langt nede.

## Gradienter i brændt orange og rust

Skubber du orange mod brun, bliver den til terrakotta, rust og kobber: farver fra lerkrukker, efterårsblade og gammelt læder. De føles gennemarbejdede og overvejede, så de passer til indretning, kaffe, keramik, friluftsbrands og alt med en historie om håndværk. De bærer også hvid tekst langt bedre end klar orange.

- Brændt orange: `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%)`
- Ler til bark: `linear-gradient(135deg, #f4c7a1 0%, #c8703f 50%, #6b2f14 100%)`

Brændte orange nuancer ligger tæt på brun. De er roligere, varmere og bedre bag hvid tekst.

## Orange lys på en mørk bund

Den mest eksklusive måde at bruge orange på er sparsomt. Start fra næsten sort, en dyb brun eller en marineblå, og lad ét orange lys gløde fra et hjørne som en glød eller en gadelygte. Det er behandlingen til sene arrangementer, restauranter, musik og alt, der skal føles varmt efter mørkets frembrud. Mørke blandinger får let striber, så læs [mørke gradientbaggrunde](https://gradiently.design/da/guide/dark-gradient-backgrounds), før du eksporterer.

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

Ét orange lys, masser af mørke. Bunden skaber stemningen; det orange skal bare gløde.

## Farver, der passer til en orange gradient

Orange har to slags gode partnere. Naboer som gul, pink og rød glider direkte over i den. Modsætninger som dyb blå og petrol får den til at vibrere, men de skal stå ved siden af det orange som en accent, ikke inde i samme blanding, for midtpunktet mellem dem bliver gråt. [Mudrede gradienter](https://gradiently.design/da/guide/muddy-gradients) forklarer hvorfor, og [komplementærfarver](https://gradiently.design/da/guide/complementary-colors) viser, hvordan du bruger spændingen sikkert.

- Creme: #fff7ed
- Abrikos: #fdba74
- Mandarin: #f97316
- Rust: #9a3412
- Barkblæk: #431407
- Dyb blå accent: #1e3a8a
- Petrol accent: #0f766e

En brugbar orange palet: en cremefarvet bund, tre orange nuancer, en mørk brun til tekst og to kølige accenter holdt adskilt fra blandingen.

## Tekst på orange gradienter

Det er her, de fleste orange designs fejler. Hvid på klar mandarin ser kraftfuld ud, men har et kontrastforhold på cirka 2,8 til 1, langt under de 4,5 til 1, som WCAG kræver til brødtekst. Næsten sort på samme orange når over 6 til 1. Reglen er enkel: mørk tekst på lyse og klare orange nuancer, hvid tekst kun fra brændt orange og nedefter. Hele metoden står i [farvekontrast og tilgængelighed](https://gradiently.design/da/guide/color-contrast-accessibility).

| Baggrund | Hvid tekst | Mørk tekst #1c1917 |
| --- | --- | --- |
| Abrikos `#fdba74` | Dumper | Består let |
| Mandarin `#f97316` | Cirka 2,8:1, dumper | Cirka 6,2:1, består |
| Dyb orange `#ea580c` | Cirka 3,6:1, kun stor tekst | Består |
| Brændt orange `#c2410c` | Cirka 5,2:1, består | Svag |
| Rust `#9a3412` | Cirka 7,3:1, består | Dumper |

Kontrast målt mod ensfarvet flade. På en gradient skal du teste det lyseste punkt bag dine ord.

Et udsalgsopslag fra et bageri med en varm orange gradient lige bag overskriften, som er svær at læse

Når den klareste orange løber lige bag overskriften, begynder ordene at kæmpe mod farven.

Samme udsalgsopslag fra bageriet med et roligere, dybere område af gradienten bag en tydelig overskrift

Samme opslag med et roligere område bag ordene og en tekstfarve valgt til det.

Gradiently klarer den del for dig. En Mark ved, hvor ordene står: den flytter sit roligste område om bag dem, og Automatisk tekstfarve vælger lys eller mørk tekst linje for linje fra Markens egen palet, så et orange design forbliver læsbart i alle størrelser uden bokse eller skygger.

## CSS til orange gradienter

Hver kode ovenfor er en enkelt CSS-værdi, du kan indsætte i `background`. Til en sektion, der både skal have varme og dybde, lægger du et radialt lys over en lineær bund, og du sætter altid en ensfarvet reservefarve. Læs [lineære gradienter i CSS](https://gradiently.design/da/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 klart abrikoslys over en bund fra mandarin til rust. Placér overskriften lavt og til venstre, hvor farven er dybest.

Vil du have et orange look, som ingen andre poster, så kig efter varme Marks i Markedet: søg på ord som »brændt orange« eller »abrikos«, design gratis med enhver Mark, der ikke er sikret, og sikr dig den, hvis den bliver dit brand.

## FAQ

### Hvilke farver passer godt til en orange gradient?

Gul, pink, rød og brun glider direkte over i orange. Dyb blå og petrol er stærke accenter, men hold dem ved siden af det orange frem for inde i samme blanding.

### Hvad er hexkoden for brændt orange?

Der findes ingen officiel kode, men `#c2410c` og `#cc5500` bruges begge bredt. En brændt orange gradient som `linear-gradient(135deg, #ea580c, #9a3412)` giver den dybde.

### Kan jeg sætte hvid tekst på en orange gradient?

Kun på de mørkere orange nuancer. Hvid på klar mandarin klarer ikke kontrastkravet, så brug næsten sort der, og gem hvid tekst til brændt orange, rust og mørkere.

### Hvorfor ser min orange og blå gradient grå ud i midten?

Orange og blå står over for hinanden i farvecirklen, så farverne imellem dem mister mætning. Tilføj et stop af pink eller lilla imellem dem, eller hold dem som separate områder.

### Hvad siger en orange gradient om et brand?

Orange opleves som regel som varm, venlig, legesyg og prisvenlig. Mørkere, brændte versioner flytter det mod håndværk og selvtillid.