Koraal verloop: levendige codes tussen roze en oranje

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.

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.

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.

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 behandelt het hele bereik tussen de twee.

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 legt uit waarom het midden grijs wordt.

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.

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.

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.

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 heeft meer patronen.

.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%;
}