Tuliliukuväri: liekin värikoodit hiilloksesta roihuun

Tuliliukuväri kulkee liekin tyven vaaleankeltaisesta, lähes valkoisesta, kirkkaan oranssin kautta kärjen syvänpunaiseen ja lopulta savun tai yön pimeyteen. Kun seuraat järjestystä, liukuväri tuntuu heti kuumalta. Käännä järjestys niin, että keltainen on ylhäällä, ja tulos näyttää auringonlaskulta. Alta löydät liekin vyöhykkeet väreinä, kopioitavat koodit kytevästä hiilloksesta täyteen roihuun sekä lempeän CSS-väreilyn.

Lue liekkiä alhaalta ylöspäin

Hehkuvan aineen väri muuttuu lämpötilan mukana: mitä kuumempi se on, sitä vaaleammalta ja valkoisemmalta se näyttää. Jäähtyessään väri kulkee keltaisen ja oranssin kautta himmeänpunaiseen. Puutulessa vaalein valo on alhaalla lähellä polttoainetta ja punainen väreilevissä kärjissä. Kaasuliekki palaa puhtaasti lähes ilman hehkuvaa nokea, joten siinä näkyy itse palavan kaasun sininen valo.

Liekkiliukuvärin koodit nuotiosta roihuun

Nämä liukuvärit ovat pystysuuntaisia ja alkavat alhaalta. CSS:ssä 0deg osoittaa ylöspäin, joten ensimmäinen väripiste on liekin tyvi. Nuotiossa on pehmeä kultainen tyvi ja pitkä punainen häivytys. Roihu on lyhyempi, räikeämpi ja kylläisempi. Valkoinen kuumuus muistuttaa uunin sisusta.

Hiillos-, hiili- ja laavaliukuvärit

Kaikki tuliaiheiset suunnitelmat eivät tarvitse liekkejä. Hiillos ja hiilet ovat lepäävää tulta: enimmäkseen tummaa, jonka läpi kuuma ydin hehkuu. Ne tuntuvat tunnelmallisilta ja laadukkailta sekä jättävät sanoille enemmän rauhallista tilaa kuin täysi roihu. Laava sijoittuu niiden väliin: tummaa kuorta halkoo kirkas sauma. Näihin sopii parhaiten säteittäinen liukuväri, joka hehkuu ulospäin kuten lämpö.

Jos haluat lämpöä ilman draamaa, punaisen, oranssin ja keltaisen liukuvärin kokoelmat vievät kukin liekin yhtä osaa pidemmälle.

Miksi jotkin tuliliukuvärit näyttävät vääriltä

Tuliliukuvärin uskottavuuden huomaa heti, koska jokainen on katsellut oikeaa tulta. Kolme virhettä paljastaa keinotekoisuuden: väärä järjestys, ruskeaksi muuttuva tumma pää tai niin vihertävä keltainen, että se näyttää hapolta eikä kuumuudelta. Sameat liukuvärit selittää, miksi punaisen häivytys mustaan voi muuttua ruskeaksi ja miten karmiininpunainen väripiste estää sen.

Animoitu tuliliukuväri CSS:llä

Hidas kohoava liike luo liekin vaikutelman paremmin kuin nopea välke. Tee liukuväristä kaksi kertaa elementin korkuinen ja liikuta sitä kevyesti ylös ja alas. Kunnioita kävijöiden toivetta vähäisemmästä liikkeestä vähennetyn liikkeen ohjeiden mukaisesti.

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

Lisää silmukoita ja niiden kompromisseja löydät CSS-liukuvärin animoinnista.

Teksti ja tarjoukset tuliliukuvärillä

Tuli kertoo kiireestä, energiasta ja kuumuudesta, joten se sopii pikatarjouksiin, tulisiin ruokalistoihin, treenihaasteisiin ja kaikkeen, jolla on määräaika. Tekstin väri riippuu paikasta: syvä hiilenharmaa tai hiilloksenruskea erottuu kultaisella tyvellä, valkoinen tai lämmin kerma punaisissa ja tummissa osissa. Vältä sanojen sijoittamista oranssin keskiosan yli, jossa kumpikaan ei toimi erityisen hyvin.

Lisää myyviä sommitteluja löydät alennusjulkaisun suunnittelusta. Jos et halua sommitella käsin, Gradientlyn Designer voi ottaa vastaan yhden rivin ohjeen, kuten ”talvityhjennys päättyy sunnuntaina”, kysyä tarvitsemansa, kirjoittaa tekstit ja sommitella julkaisun Markiisi. Se voi tehdä myös tarina- ja neliöversiot.