Vuurkleurverloop: vlamcodes van gloed tot laaiend vuur

Een vuurkleurverloop loopt van lichtgeel, bijna wit, aan de basis van de vlam, via fel oranje, naar diep rood aan de toppen, en dan de donkerte van rook of nacht in. Volg die volgorde en het kleurverloop leest meteen als hitte. Draai hem om, met geel bovenaan, en het lijkt een zonsondergang. Hieronder staan de vlamzones als kleuren, kopieerbare codes van smeulende gloed tot een volledig laaiend vuur en een zachte CSS-flikkering.

Lees een vlam van onder naar boven

Gloeiend materiaal verandert van kleur met de temperatuur: hoe heter, hoe bleker en witter het eruitziet, en bij afkoeling glijdt het via geel en oranje naar een doffe rode kleur. In een houtvuur betekent dat dat het bleekste licht laag zit, bij de brandstof, en het rood bij de flikkerende toppen. Een gasvlam brandt schoon, met bijna geen gloeiend roet, en toont daarom het blauwe licht van het brandende gas zelf.

Vlamkleurverloopcodes: van kampvuur tot laaiend vuur

Deze zijn verticaal en beginnen onderaan. In CSS wijst 0deg omhoog, dus de eerste stop is de basis van de vlam. Een kampvuur houdt een zachte gouden basis en een lange rode uitloop; een laaiend vuur is korter, luider en verzadigder; witte hitte is hoe de binnenkant van een oven eruitziet.

Gloed-, kolen- en lavakleurverlopen

Niet elk vuurontwerp heeft vlammen nodig. Gloed en kolen zijn vuur in rust: grotendeels donker, met een hete kern die erdoorheen schijnt. Ze voelen sfeervol en premium, en laten meer rustige ruimte voor woorden dan een volledig laaiend vuur. Lava zit ertussenin, een donkere korst gespleten door een heldere naad. Deze werken het best als radiale kleurverlopen, die naar buiten gloeien zoals hitte dat doet.

Wil je warmte zonder het drama, dan nemen de aparte collecties rood kleurverloop, oranje kleurverloop en geel kleurverloop elk één deel van de vlam en gaan er verder mee.

Waarom sommige vuurkleurverlopen er verkeerd uitzien

Vuur is een van de weinige kleurverlopen die mensen meteen beoordelen, omdat iedereen naar een echt vuur heeft gestaard. Drie fouten verraden het: de volgorde klopt niet, het donkere uiteinde wordt bruin, of het geel is zo groenig dat het als zuur leest in plaats van als hitte. Modderige kleurverlopen legt uit waarom rood dat in zwart overgaat bruin kan worden, en hoe een karmozijnrode stop dat voorkomt.

Een geanimeerd vuurkleurverloop in CSS

Een langzame opwaartse drift verkoopt het idee van vlam beter dan welke snelle flikkering ook. Maak het kleurverloop twee keer zo hoog als het element en beweeg het zachtjes op en neer. Houd rekening met bezoekers die om minder beweging hebben gevraagd, zoals beschreven in beperkte beweging.

.fire {
  background: linear-gradient(0deg, #fff3b0 0%, #ffd23f 15%, #ff8c1a 35%, #e8361c 55%, #5c0d0d 80%, #1c0606 100%);
  background-size: 100% 200%;
  animation: flicker 6s ease-in-out infinite alternate;
}

@keyframes flicker {
  from { background-position: 50% 100%; }
  to   { background-position: 50% 70%; }
}

@media (prefers-reduced-motion: reduce) {
  .fire { animation: none; }
}

Meer lussen en hun afwegingen staan in CSS-geanimeerd kleurverloop.

Woorden en aanbiedingen op een vuurkleurverloop

Vuur zegt urgentie, energie en hitte, dus het draagt vanzelf flitsacties, pittige menu's, sportuitdagingen en alles met een deadline. De letterkleur hangt af van waar de woorden landen: diep houtskool of gloedbruin leest op de gouden basis, en wit of warm crème op de rode en donkere delen. Vermijd woorden over het oranje midden, waar geen van beide bijzonder goed werkt.

Voor meer over lay-outs die verkopen, zie actiepost ontwerpen. Wil je het liever niet met de hand opmaken, dan kan de Designer van Gradiently een briefing van één regel als "winteropruiming eindigt zondag" aannemen, vragen wat hij nodig heeft, de woorden schrijven en de post in jouw Mark zetten, en ook de story- en vierkante versies maken.