# Oranje verloop: 25 warme codes van perzik tot gebrand

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

Oranje is een van de warmste kleuren die je op een scherm kunt zetten, en een van de makkelijkste om verkeerd te doen. Hier zijn 25 kopieerbare mengsels per sfeer, plus de combinaties en tekstregels waardoor ze werken.

## The short version

- Een oranje verloop komt warm, vriendelijk en energiek over, en de sfeer verandert sterk naarmate de oranjetinten lichter of donkerder zijn.
- Oranje gaat netjes over in zijn buren: geel, amber, rood, roze en bruin.
- Oranje rechtstreeks in blauw of petrol laten overlopen levert meestal een grijs of modderig midden op, dus houd complementaire kleuren apart als accent.
- Witte tekst haalt het contrast niet op fel oranje zoals #f97316; gebruik daar bijna zwarte of diepbruine tekst, of zet witte tekst op gebrand oranje of donkerder.
- Donkere ondergronden met één oranje lichtbron ogen premium, terwijl lichte perzikmengsels passen bij zachte, alledaagse merken.

Een **oranje verloop** mengt twee of meer oranjetinten, vaak met een naburig geel, rood of roze, en weinig mengsels voelen warmer. Lichte perzik- en abrikoosversies voelen zacht en gastvrij, fel mandarijn voelt luid en speels, en gebrand oranje of roest voelt aards en volwassen. Hieronder staan 25 codes per sfeer, gevolgd door waarmee je ze combineert en hoe je er tekst op zet zonder je woorden te verliezen.

## Zachte oranje verlopen: perzik en abrikoos

Bleke oranjetinten zijn de vriendelijkste ingang tot de kleur. Ze liggen dicht bij huid, brood en het licht van de late middag, en daarom leunen bakkers, huidverzorging en kindermerken erop. Houd de lichtste stop bijna crème, zodat het mengsel een rustige plek heeft om op uit te rusten. Een heel artikel over het bleekste uiteinde vind je bij [perzik verlopen](https://gradiently.design/nl/guide/peach-gradient).

- Crème naar abrikoos: `linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%)`
- Zachte abrikoos: `linear-gradient(160deg, #ffedd5 0%, #fdba74 100%)`
- Perzikhuid: `linear-gradient(135deg, #fde2cf 0%, #fbb995 55%, #f6a07a 100%)`
- Ochtendgloed: `radial-gradient(circle at 30% 25%, #fff1e0 0%, #fcd5b0 50%, #f8b98a 100%)`
- Boter naar meloen: `linear-gradient(180deg, #fef3c7 0%, #fed7aa 50%, #fdba74 100%)`

Vijf bleke oranje verlopen. Elk begint dicht bij crème, dus er is altijd een rustig vlak voor donkere tekst.

## Felle oranje verlopen: mandarijn en citrus

Verzadigd oranje is pure energie. Het past bij aanbiedingen, maaltijdbezorging, sport, festivals en alles wat op miniatuurformaat moet opvallen. Het risico is dat fel oranje uitvlakt tot één luid blok, dus geef het een lichtere stop richting geel of een diepere richting rood. Die kleine verschuiving zorgt dat het op licht lijkt in plaats van op verf.

- Mandarijn: `linear-gradient(135deg, #fdba74 0%, #f97316 100%)`
- Citrusexplosie: `linear-gradient(135deg, #fbbf24 0%, #f97316 60%, #ea580c 100%)`
- Oranje naar watermeloen: `linear-gradient(120deg, #fb923c 0%, #f43f5e 100%)`
- Hotspot: `radial-gradient(circle at 70% 30%, #fed7aa 0%, #fb923c 40%, #ea580c 100%)`
- Oranje naar citroen: `linear-gradient(90deg, #f97316 0%, #facc15 100%)`

Felle oranjetinten werken het best met één stop die naar geel of roze neigt. Het mengsel leest dan als licht, niet als een vlakke vulling.

## Zonsondergang en amber oranje verlopen

Laat je oranje verticaal lopen van goud bovenaan naar rood of pruim onderaan, dan krijg je een zonsondergang, waarschijnlijk het bekendste verloop dat er is. Ambermengsels zijn de rustigere neef: honing-, marmelade- en whiskytinten die rijk voelen zonder te schreeuwen. Wil je de volledige luchtbehandeling, dan gaat [zonsondergangverlopen](https://gradiently.design/nl/guide/sunset-gradient) verder.

- Klassieke zonsondergang: `linear-gradient(180deg, #fcd34d 0%, #f97316 50%, #be123c 100%)`
- Schemering: `linear-gradient(180deg, #fdba74 0%, #f472b6 55%, #7c3aed 100%)`
- Honingamber: `linear-gradient(135deg, #fde68a 0%, #f59e0b 50%, #b45309 100%)`
- Marmelade: `linear-gradient(160deg, #fb923c 0%, #c2410c 60%, #7c2d12 100%)`
- Laatste licht: `linear-gradient(180deg, #f59e0b 0%, #dc2626 60%, #450a0a 100%)`

Verticale mengsels lezen als lucht. Zet de lichtste kleur bovenaan en de horizonkleur laag.

## Gebrand oranje en roest verlopen

Duw oranje richting bruin en het wordt terracotta, roest en koper: kleuren van kleipotten, herfstbladeren en oud leer. Die voelen vakkundig en doordacht, dus ze passen bij interieurs, koffie, keramiek, buitenmerken en alles met een handgemaakt verhaal. Ze dragen ook veel beter witte tekst dan fel oranje.

- Gebrand oranje: `linear-gradient(135deg, #ea580c 0%, #9a3412 100%)`
- Terracotta: `linear-gradient(160deg, #e07a4f 0%, #b4532a 55%, #7a3419 100%)`
- Koper: `linear-gradient(135deg, #d97706 0%, #92400e 60%, #451a03 100%)`
- Roest: `linear-gradient(180deg, #c2410c 0%, #7c2d12 100%)`
- Klei naar bast: `linear-gradient(135deg, #f4c7a1 0%, #c8703f 50%, #6b2f14 100%)`

Gebrande oranjetinten zitten dicht bij bruin. Ze zijn rustiger, warmer en beter achter witte tekst.

## Oranje licht op een donkere ondergrond

De meest premium manier om oranje te gebruiken is spaarzaam. Begin bij bijna zwart, diepbruin of marineblauw, en laat één oranje vanuit een hoek gloeien als een sintel of een straatlantaarn. Zo behandel je laatavondevenementen, restaurants, muziek en alles wat warm moet voelen na donker. Donkere mengsels vertonen makkelijk banding, dus lees [donkere verloopachtergronden](https://gradiently.design/nl/guide/dark-gradient-backgrounds) voordat je exporteert.

- Sintel: `radial-gradient(circle at 80% 20%, #f97316 0%, #7c2d12 35%, #120806 75%)`
- Haardvuur: `radial-gradient(circle at 20% 80%, #fb923c 0%, #431407 45%, #0c0a09 85%)`
- Straatlantaarn op marineblauw: `radial-gradient(circle at 75% 25%, #fdba74 0%, #ea580c 20%, #1e1b4b 65%, #0b0a1f 100%)`
- Kool en koper: `linear-gradient(200deg, #c2410c 0%, #3b1407 45%, #0c0a09 100%)`
- Horizongloed: `radial-gradient(ellipse at 50% 110%, #f97316 0%, #9a3412 30%, #1c0f0a 70%)`

Eén oranje licht, veel donker. De ondergrond zorgt voor de sfeer; het oranje hoeft alleen te gloeien.

## Kleuren die passen bij een oranje verloop

Oranje heeft twee soorten goede partners. Buren zoals geel, roze en rood gaan er rechtstreeks in over. Tegenpolen zoals diepblauw en petrol laten het trillen, maar die horen naast het oranje als accent, niet in hetzelfde mengsel, want het middelpunt tussen beide wordt grijs. [Modderige verlopen](https://gradiently.design/nl/guide/muddy-gradients) legt uit waarom, en [complementaire kleuren](https://gradiently.design/nl/guide/complementary-colors) laat zien hoe je die aantrekkingskracht veilig gebruikt.

- Crème: #fff7ed
- Abrikoos: #fdba74
- Mandarijn: #f97316
- Roest: #9a3412
- Baktinkt: #431407
- Diepblauw accent: #1e3a8a
- Petrol accent: #0f766e

Een werkend oranje palet: een crème ondergrond, drie oranjetinten, een donkerbruin voor tekst en twee koele accenten buiten het mengsel.

## Tekst op oranje verlopen

Hier mislukken de meeste oranje ontwerpen. Wit op fel mandarijn ziet er gedurfd uit maar heeft een contrastverhouding van ongeveer 2,8 op 1, ruim onder de 4,5 op 1 die WCAG voor lopende tekst vraagt. Bijna zwart op dezelfde oranje scoort boven 6 op 1. De regel is simpel: donkere tekst op lichte en felle oranjetinten, witte tekst pas vanaf gebrand oranje en donkerder. De volledige methode staat in [kleurcontrast en toegankelijkheid](https://gradiently.design/nl/guide/color-contrast-accessibility).

| Achtergrond | Witte tekst | Donkere tekst #1c1917 |
| --- | --- | --- |
| Abrikoos `#fdba74` | Faalt | Haalt het ruim |
| Mandarijn `#f97316` | Ongeveer 2,8:1, faalt | Ongeveer 6,2:1, haalt het |
| Dieporanje `#ea580c` | Ongeveer 3,6:1, alleen grote tekst | Haalt het |
| Gebrand oranje `#c2410c` | Ongeveer 5,2:1, haalt het | Zwak |
| Roest `#9a3412` | Ongeveer 7,3:1, haalt het | Faalt |

Contrast gemeten tegen een vlakke kleur. Test bij een verloop het lichtste punt achter je woorden.

Een bakkerijaanbieding met een warm oranje verloop dat direct achter de kop loopt, waardoor die slecht leesbaar is

Als het felste oranje recht achter de kop loopt, gaan de woorden met de kleur vechten.

Hetzelfde bakkerijbericht met een rustiger, dieper vlak van het verloop achter een duidelijke kop

Hetzelfde bericht met een rustiger vlak achter de woorden en een daarop gekozen tekstkleur.

Gradiently regelt dit deel voor je. Een Mark weet waar de woorden staan: hij verplaatst zijn rustigste gebied erachter en Auto-inkt kiest regel voor regel lichte of donkere tekst uit het eigen palet van de Mark, zodat een oranje ontwerp op elk formaat leesbaar blijft zonder vakken of schaduwen.

## CSS voor een oranje verloop

Elke code hierboven is één CSS-waarde die je in `background` kunt plakken. Leg voor een sectie die zowel warmte als diepte nodig heeft een radiaal licht over een lineaire basis, en stel altijd een effen terugvalkleur in. Lees [CSS lineaire verlopen](https://gradiently.design/nl/guide/css-linear-gradient) voor de volledige syntaxis.

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

Een helder abrikooslicht over een basis van mandarijn naar roest. Zet de kop laag en links, waar de kleur het diepst is.

Wil je een oranje look waar niemand anders mee post, blader dan op de Markt naar warme Marks: zoek op woorden als “gebrand oranje” of “abrikoos”, ontwerp gratis met een ongeclaimde Mark en claim hem als hij je merk wordt.

## FAQ

### Welke kleuren passen goed bij een oranje verloop?

Geel, roze, rood en bruin gaan rechtstreeks in oranje over. Diepblauw en petrol zijn sterke accenten, maar houd ze naast het oranje en niet in hetzelfde mengsel.

### Wat is de hexcode van gebrand oranje?

Er is geen enkele officiële code, maar `#c2410c` en `#cc5500` worden allebei veel gebruikt. Een gebrand oranje verloop zoals `linear-gradient(135deg, #ea580c, #9a3412)` geeft het diepte.

### Kan ik witte tekst op een oranje verloop zetten?

Alleen op de donkerdere oranjetinten. Wit op fel mandarijn haalt het contrast niet, dus gebruik daar bijna zwart en bewaar witte tekst voor gebrand oranje, roest en donkerder.

### Waarom ziet mijn oranje-blauwe verloop er in het midden grijs uit?

Oranje en blauw liggen tegenover elkaar op het kleurenwiel, dus de kleuren ertussen verliezen verzadiging. Voeg een roze of paarse stop ertussen toe, of houd ze als aparte vlakken.

### Wat zegt een oranje verloop over een merk?

Oranje komt meestal warm, vriendelijk, speels en betaalbaar over. Donkerdere, gebrande versies schuiven dat richting vakmanschap en zelfvertrouwen.