# Tuliliukuväri: liekin värikoodit hiilloksesta roihuun

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

Liekin värit etenevät tietyssä järjestyksessä, ja tuliliukuväri näyttää kuumalta vain sitä seuraamalla. Tässä järjestys, eri tulien koodit ja muutamalla rivillä animoitava väreily.

## The short version

- Tuliliukuväri seuraa oikean liekin järjestystä: vaaleankeltainen tyvessä, sitten oranssi ja punainen kärjissä, lopuksi tumma savu.
- Tulen kuumimmat osat näyttävät vaaleimmilta, joten kirkkain väripiste kuuluu lämmön lähteeseen, ei reunaan.
- CSS:n `linear-gradient(0deg, …)` alkaa alhaalta, mistä liekkikin alkaa.
- Hiillokseen ja hiiliin sopii säteittäinen liukuväri, joka hehkuu kuumasta keskuksesta lähes mustaan.
- Tumma teksti erottuu tuliliukuvärin keltaisessa osassa, valkoinen tai kermanvärinen punaisissa ja tummissa osissa.

**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.

| Vyöhyke | Väri | Hex |
| --- | --- | --- |
| Kaasuliekin ydin | Sininen | `#38bdf8` → `#1d4ed8` |
| Puuliekin tyvi | Vaaleankeltainen, lähes valkoinen | `#fff3b0` |
| Alaosa | Kullankeltainen | `#ffd23f` |
| Keskiosa | Oranssi | `#ff8c1a` |
| Kärjet | Liekinpunainen | `#e8361c` |
| Jäähtyvä reuna | Karmiininpunaisesta hiillokseen | `#b3001b` → `#7f1d1d` |
| Savu ja yö | Hiiltynyt | `#1c0606` |

Liekki väripisteiden listana. Useimmissa tuliliukuväreissä käytetään näistä neljää tai viittä tässä järjestyksessä.

- Valkoinen kuumuus: #fff3b0
- Kultainen liekki: #ffd23f
- Oranssi liekki: #ff8c1a
- Liekinpunainen: #e8361c
- Karmiininpunainen: #b3001b
- Hiillos: #7f1d1d
- Hiiltynyt: #1c0606

Tulipaletti kuumimmasta viileimpään. Ruskeaa ei ole: siirtymä punaisesta tummaksi syvän karmiinin kautta säilyttää hehkun.

## 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.

- Nuotio tyvestä kärkeen: `linear-gradient(0deg, #fff3b0 0%, #ffd23f 18%, #ff8c1a 45%, #e8361c 72%, #5c0d0d 100%)`
- Roihu: `linear-gradient(0deg, #ffe066 0%, #ff9f1c 35%, #ff4d00 70%, #b3001b 100%)`
- Valkoinen kuumuus: `radial-gradient(circle at 50% 70%, #ffffff 0%, #fff7cc 20%, #ffc53d 45%, #ff6a00 75%, #a11a00 100%)`
- Kaasuliekin sininen: `linear-gradient(0deg, #e0f7ff 0%, #38bdf8 25%, #1d4ed8 60%, #0b1033 100%)`

Neljä liekkiä. Sininen rikkoo lämpimien värien sääntöä tarkoituksella: puhdas kaasuliekki palaa yleensä keltaista kuumempana ja sopii tekniikkaan ja tieteeseen oranssia paremmin.

## 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ö.

- Hehkuva hiillos: `radial-gradient(ellipse at 50% 100%, #ff7a18 0%, #c2410c 20%, #7f1d1d 45%, #1c0606 80%)`
- Kuuma hiili: `radial-gradient(circle at 50% 60%, #ff4d00 0%, #9a1b0b 25%, #2b0a05 55%, #0a0303 85%)`
- Laavavirta: `linear-gradient(135deg, #1a0505 0%, #7a0f0f 35%, #ff3d00 60%, #ffb000 80%, #2a0808 100%)`

Tuli levossa. Hiillosliukuväri hehkuu alareunasta ylöspäin ja tarjoaa hyvän pohjan sen yläpuoliselle tuotteelle tai otsikolle.

Jos haluat lämpöä ilman draamaa, [punaisen](https://gradiently.design/fi/guide/red-gradient), [oranssin](https://gradiently.design/fi/guide/orange-gradient) ja [keltaisen liukuvärin](https://gradiently.design/fi/guide/yellow-gradient) 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](https://gradiently.design/fi/guide/muddy-gradients) selittää, miksi punaisen häivytys mustaan voi muuttua ruskeaksi ja miten karmiininpunainen väripiste estää sen.

### Näyttää keinotekoiselta

- Keltainen ylhäällä, punainen alhaalla
- Punainen häipyy suoraan ruskehtavaan mustaan
- Viileä sitruunankeltainen, jossa on vihreä vivahde
- Tasainen väri reunasta reunaan ilman kuumaa kohtaa
- Liekin värit valkoisella taustalla

### Näyttää kuumalta

- Vaalein väri lähteessä, punainen kärjissä
- Punaisesta karmiiniin ja sitten hiiltyneeseen
- Lämmin kullankeltainen, kuten #ffd23f
- Yksi kirkas ydin, josta kaikki häipyy
- Pimeydestä hehkuva tuli

## 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](https://gradiently.design/fi/guide/reduced-motion) ohjeiden mukaisesti.

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

Liekki nousee ja asettuu kuuden sekunnin välein. `background-position`-arvon animointi on kevyttä. Raskaampiin tehosteisiin löydät suorituskykyohjeet animoitujen liukuvärien oppaasta.

Lisää silmukoita ja niiden kompromisseja löydät [CSS-liukuvärin animoinnista](https://gradiently.design/fi/guide/css-animated-gradient).

## 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.

Pystysuuntainen somejulkaisu lämpimällä punaisella ja oranssilla taustalla sekä kermanvärisellä otsikolla Viimeiset 48 tuntia

Pystyjulkaisu alennusmyynnistä. Kiireellinen viesti on tummassa hiillospäässä, ja lämpimin valo jää sanojen ulkopuolelle.

Lisää myyviä sommitteluja löydät [alennusjulkaisun suunnittelusta](https://gradiently.design/fi/guide/sale-post-design). 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.

## FAQ

### Mitä värejä tuliliukuvärissä on?

Vaaleankeltainen (#fff3b0), kullankeltainen (#ffd23f), oranssi (#ff8c1a), liekinpunainen (#e8361c) ja lopuksi syvä karmiini tai hiiltynyt sävy. Käytä niitä tässä järjestyksessä liekin tyvestä alkaen.

### Mihin suuntaan liekkiliukuvärin pitäisi kulkea?

Alhaalta ylöspäin, vaalein väri tyvessä. CSS:n `linear-gradient(0deg, …)` luettelee alimman väripisteen ensin.

### Miten estän tuliliukuväriä muuttumasta ruskeaksi?

Siirry punaisesta syvään karmiiniin, kuten #b3001b, ennen lähes mustaa sen sijaan, että häivyttäisit suoraan punaisesta mustaan.

### Mihin sininen liekkiliukuväri sopii?

Sininen kaasuliekki palaa yleensä keltaista puuliekkiä kuumempana, joten se sopii tekniikkaan, tieteeseen, energiaan ja kaikkeen, jonka halutaan tuntuvan voimakkaalta mutta viileältä. Vie se tyven lähes valkoisesta taivaansinisen kautta syvään laivastonsiniseen.

### Voinko animoida tuliliukuvärin ilman JavaScriptiä?

Kyllä. Tee taustasta kaksi kertaa korkeampi arvolla `background-size: 100% 200%`, animoi `background-position` hitaasti ja kytke liike pois `prefers-reduced-motion`-asetuksella.