# Koraal verloop: levendige codes tussen roze en oranje

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

Koraal zit precies waar roze oranje wordt, met de warmte van het ene en de charme van het andere. Het is levendig, vriendelijk en verrassend lastig om er tekst op te zetten. Hier de codes en de oplossingen.

## The short version

- Een koraal verloop mengt warme, roze getinte oranjetinten, meestal naar roze hellend aan het ene uiteinde en naar mandarijn of perzik aan het andere.
- De CSS-kleurnaam coral is #ff7f50, een helder oranje dat naar koraal helt.
- Koraal en teal liggen bijna tegenover elkaar, dus een directe menging wordt grijs. Gebruik teal liever als apart vlak of accent.
- Witte tekst faalt op helder koraal. Gebruik een diep wijnrood of bruin zoals #3b0d0c, of zet witte tekst op een diep rood koraal.
- Koraal past bij zomercampagnes, eten en drinken, beauty, fitness en vriendelijke consumentenapps.

Een **koraal verloop** mengt warme, roze getinte oranjetinten, de kleuren waar roze oranje wordt. Laat het naar roze hellen en het voelt charmant en fris. Laat het naar mandarijn hellen en het voelt zonnig en energiek. Koraal is vrolijk en heel zichtbaar, wat het een favoriet maakt voor zomer, eten, beauty en fitness. De twee valkuilen zijn een grijze streep waar het teal raakt en tekst die erop verdwijnt. Beide zijn makkelijk te vermijden als je ze kent.

## Koraal, zalm, perzik en watermeloen

Warme roze getinte oranjetinten delen veel namen. Het loont ze te scheiden, want het juiste woord helpt je de juiste stops te kiezen en te beschrijven wat je wilt aan een ontwerper of aan de Designer in Gradiently.

| Kleur | Typische hex | Karakter |
| --- | --- | --- |
| Koraal | `#ff7f50` | Helder en warm, naar oranje hellend |
| Living coral | `#ff6f61` | Roziger, zachter koraal |
| Zalm | `#fa8072` | Bleker en roziger, licht stoffig |
| Perzik | `#ffcba4` | Veel lichter, oranjer, zacht |
| Watermeloen | `#fb7185` | Roziger en koeler, speels |

Koraal is de helderste hiervan. De buren zijn bruikbare stops in een koraal verloop.

## Heldere koraal verlopen

Dit is koraal op zijn levendigst. Ze houden de aandacht vast op thumbnailformaat, daarom werken ze zo goed voor actieposts, lanceringen, fitnesslessen en alles wat je wilt laten opvallen in een drukke feed.

- Klassiek koraal: `linear-gradient(135deg, #ffb199 0%, #ff7f50 100%)`
- Living coral: `linear-gradient(135deg, #ff9a8b 0%, #ff6f61 100%)`
- Tropische punch: `linear-gradient(120deg, #fb7185 0%, #ff7f50 50%, #fbbf24 100%)`
- Koraalbloem: `radial-gradient(circle at 30% 30%, #ffe4d6 0%, #ff9a7a 40%, #f2545b 100%)`
- Koraalzonsondergang: `linear-gradient(180deg, #fdba74 0%, #ff7f50 50%, #e11d48 100%)`

Vijf heldere koraalmengsels. Elke partnerkleur is een directe buur, dus de mengsels blijven verzadigd.

Een paar manieren om ze in te zetten: “Klassiek koraal” achter één regel als “Deuren open om twaalf uur” op een story van 1080×1920, “Tropische punch” als omslag van een zomerse drankenkaart, “Koraalzonsondergang” over een Pinterest-pin van 1000×1500 voor een vakantiegids. Koraal is sterk, dus laat het het beeld vullen en houd al het andere op de pagina eenvoudig: één kop, één detail, veel ruimte.

## Koraal verlopen van roze naar oranje

### Naar roze hellend koraal

Duw koraal naar roze en blos en het wordt zachter en romantischer, ideaal voor beauty, bloemisten, bruiloften en lifestylemerken. Voor de rozere kant van de familie zie [roze verlopen](https://gradiently.design/nl/guide/pink-gradient).

- Roze koraal: `linear-gradient(135deg, #fecdd3 0%, #ff8a7a 100%)`
- Zalmblos: `linear-gradient(135deg, #fce7f3 0%, #fa8072 100%)`
- Watermeloenkoraal: `linear-gradient(160deg, #fda4af 0%, #f87171 100%)`

Naar roze hellende koralen voelen zachter en passen bij beauty- en lifestylemerken.

### Naar oranje hellend koraal

Duw het de andere kant op, naar abrikoos en mandarijn, en koraal wordt zonniger en luider: zomermenu’s, smoothiebars, vakanties. [Oranje-roze verlopen](https://gradiently.design/nl/guide/orange-pink-gradient) behandelt het hele bereik tussen de twee.

- Abrikozenkoraal: `linear-gradient(135deg, #fed7aa 0%, #ff7f50 100%)`
- Koraal naar mandarijn: `linear-gradient(135deg, #ff7f50 0%, #fb923c 100%)`
- Strandtent: `linear-gradient(180deg, #fef3c7 0%, #ffa07a 50%, #ff6f61 100%)`

Naar oranje hellende koralen zijn zonniger, energieker en gemaakt voor de zomer.

## Koraal en teal zonder grijze tussenkleur

Koraal en teal zijn een van de grote combinaties: warm tegen koel, rif tegen zee. Maar ze liggen bijna recht tegenover elkaar op het kleurenwiel, dus een rechte menging gaat in het midden door een doffe grijstint. De oplossing is ze uit elkaar te houden. Gebruik teal als ondergrond met een koraal licht, koraal als ondergrond met een teal accent, of loop tussen beide via heel bleke tinten. [Modderige verlopen](https://gradiently.design/nl/guide/muddy-gradients) legt uit waarom het midden grijs wordt.

- Vermijd: grijs midden: `linear-gradient(90deg, #ff7f50 0%, #14b8a6 100%)`
- Koraalzon op teal: `radial-gradient(circle at 80% 20%, #ff7f50 0%, #ff7f50 8%, transparent 30%), linear-gradient(160deg, #0f766e 0%, #042f2e 100%)`
- Via schelpwit: `linear-gradient(135deg, #ffd6c9 0%, #fff7f2 50%, #ccfbf1 100%)`

De eerste menging wordt in het midden grijs. De andere twee houden koraal en teal als aparte kleuren of verbinden ze via een bleke tint.

Probeer op een menukaart of poster een heel donker teal zoals `#042f2e` met koraalkleurige koppen en knoppen. Koraal haalt daar ongeveer 5,8 op 1, veel beter dan wit op koraal, en het ziet er gedurfd en zomers uit. De tealkant behandelt [teal verlopen](https://gradiently.design/nl/guide/teal-gradient).

## Koraal op een donkere ondergrond

Koraal gloeit prachtig tegen diep pruim, marineblauw of bijna zwart. Eén koraal licht op een donkere ondergrond voelt als een neonreclame of een zonsondergang boven zee en past bij bars, muziek, uitgaansleven en avondevenementen. Houd het koraallicht weg van waar de woorden staan en zet ze in bleek schelpwit of wit op het donkere gebied.

- Koraal op wijn: `radial-gradient(circle at 75% 25%, #ff7f50 0%, #9f1239 35%, #1a0710 80%)`
- Zonsondergang boven de baai: `radial-gradient(ellipse at 50% 110%, #ff6f61 0%, #4c1d95 40%, #0f0a1f 85%)`
- Kool en koraal: `linear-gradient(200deg, #ff7f50 0%, #3b0d0c 45%, #0c0606 100%)`

Eén koraal licht, veel donker. Het koraal leest helderder dan het op wit zou doen.

## Tekst op een koraal verloop

Koraal ziet er gedurfd genoeg uit voor witte letters, en juist daarom mislukken zoveel koraalontwerpen. Wit op `#ff7f50` meet ongeveer 2,5 op 1, ruim onder de 4,5 op 1 die voor lopende tekst gevraagd wordt. Een diep wijnbruin zoals `#3b0d0c` meet ongeveer 6,7 op 1 op hetzelfde koraal en behoudt de warmte. Wil je witte letters, verdiep het koraal dan tot een rood zoals `#e11d48`, waar wit ongeveer 4,7 op 1 haalt. De methode staat in [kleurcontrast en toegankelijkheid](https://gradiently.design/nl/guide/color-contrast-accessibility).

Een actiepost van een pilatesstudio met bleke tekst over het helderste deel van een koraal verloop

Lichte woorden recht over helder koraal ogen gedurfd maar lezen slecht op een telefoon in daglicht.

Dezelfde pilatespost met duidelijke tekst op een rustiger, dieper gebied van het koraal verloop

Dezelfde post met een rustiger gebied en een letterkleur die erbij past.

Een Gradiently Mark doet deze aanpassing vanzelf: hij verplaatst zijn rustigste, best contrasterende gebied achter je woorden en Auto-inkt kiest per regel lichte of donkere letters uit het eigen palet van de Mark. Geen kaders of slagschaduwen nodig.

## Koraal verloop in CSS voor een knop

Koraal maakt een vriendelijke call-to-action. Houd het verloop licht genoeg zodat een donker label leesbaar blijft en laat de positie bij hover verschuiven in plaats van kleuren te wisselen. [CSS-verloopknoppen](https://gradiently.design/nl/guide/css-gradient-button) heeft meer patronen.

```css
.button-coral {
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 999px;
  color: #3b0d0c;
  font-weight: 600;
  background: linear-gradient(135deg, #ffb199 0%, #ff7f50 100%);
  background-size: 150% 150%;
  background-position: 0% 50%;
  transition: background-position 300ms ease;
}

.button-coral:hover {
  background-position: 100% 50%;
}
```

Een koraalkleurige pil met diep wijnkleurige tekst. Het verloop schuift bij hover in plaats van van kleur te veranderen.

## FAQ

### Wat is de hexcode voor koraal?

De CSS-kleurnaam `coral` is `#ff7f50`. Pantones Living Coral wordt vaak benaderd als `#ff6f61`.

### Welke kleuren passen bij een koraal verloop?

Perzik, roze, mandarijn en goud gaan er zacht in over. Diep teal, marineblauw en pruim zijn sterke partners als je ze als aparte vlakken houdt.

### Waarom ziet mijn koraal-tealverloop er grijs uit?

Koraal en teal liggen bijna tegenover elkaar op het kleurenwiel, dus de kleuren ertussen verliezen verzadiging. Houd ze uit elkaar of verbind ze via een bleke tint.

### Kan ik witte tekst op koraal gebruiken?

Niet op helder koraal, waar wit het contrast niet haalt. Gebruik een diep wijnrood of bruin, of verdiep het koraal tot een rood voordat je wit gebruikt.

### Wat is het verschil tussen koraal en zalm?

Zalm is bleker, roziger en licht stoffig. Koraal is helderder, verzadigder en helt meer naar oranje.