# Oranssi liukuväri: 25 lämmintä koodia persikasta ruosteeseen

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

Oranssi on näytön lämpimimpiä värejä ja helpoimpia käyttää väärin. Tässä 25 kopioitavaa liukua tunnelman mukaan sekä toimivat väriyhdistelmät ja tekstisäännöt.

## The short version

- Oranssi liukuväri tuntuu lämpimältä, ystävälliseltä ja energiseltä, ja sen tunnelma muuttuu paljon oranssien vaaleuden tai tummuuden mukaan.
- Oranssi sekoittuu puhtaasti naapuriväreihinsä keltaiseen, meripihkaan, punaiseen, vaaleanpunaiseen ja ruskeaan.
- Suora liuku oranssista siniseen tai sinivihreään tuottaa yleensä harmaan tai samean keskikohdan, joten pidä vastavärit erillisinä tehosteina.
- Valkoinen teksti ei täytä kontrastivaatimuksia kirkkaalla oranssilla kuten #f97316. Käytä lähes mustaa tai syvänruskeaa tekstiä, tai siirrä valkoinen poltetulle oranssille tai tummemmalle.
- Tumma pohja yhdellä oranssilla valolla näyttää arvokkaalta, vaaleat persikkaliu’ut sopivat lempeille arkibrändeille.

**Oranssi liukuväri** sekoittaa kahta tai useampaa oranssia, usein viereisen keltaisen, punaisen tai vaaleanpunaisen kanssa. Harva liuku tuntuu lämpimämmältä. Vaalea persikka ja aprikoosi ovat pehmeitä ja kutsuvia, kirkas mandariini voimakas ja leikkisä, poltettu oranssi ja ruoste maanläheisiä ja aikuisia. Alla on 25 tunnelmittain ryhmiteltyä koodia, sopivat rinnakkaisvärit ja ohjeet luettavaan tekstiin.

## Pehmeät oranssit liukuvärit: persikka ja aprikoosi

Vaaleat oranssit ovat ystävällisin tapa lähestyä väriä. Ne muistuttavat ihoa, leipää ja iltapäivän valoa, joten leipomot, ihonhoito- ja lastenbrändit käyttävät niitä. Pidä vaalein piste lähes kermanvärisenä, jotta liu’ussa on rauhallinen lepopaikka. Vaaleinta päätä käsittelee [persikkaliukuvärit](https://gradiently.design/fi/guide/peach-gradient).

- Kermasta aprikoosiin: `linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%)`
- Pehmeä aprikoosi: `linear-gradient(160deg, #ffedd5 0%, #fdba74 100%)`
- Persikan kuori: `linear-gradient(135deg, #fde2cf 0%, #fbb995 55%, #f6a07a 100%)`
- Aamun hehku: `radial-gradient(circle at 30% 25%, #fff1e0 0%, #fcd5b0 50%, #f8b98a 100%)`
- Voista meloniin: `linear-gradient(180deg, #fef3c7 0%, #fed7aa 50%, #fdba74 100%)`

Viisi vaaleaa oranssia liukuväriä. Jokainen alkaa läheltä kermaa, joten tummalle tekstille on aina rauhallinen alue.

## Kirkkaat oranssit liukuvärit: mandariini ja sitrus

Kylläinen oranssi on puhdasta energiaa. Se sopii tarjouksiin, ruokalähetyksiin, urheiluun, festivaaleihin ja kaikkeen, mikä pitää huomata pienoiskoossa. Riskinä on värin latistuminen yhdeksi voimakkaaksi pinnaksi. Lisää siksi vaaleampi piste kohti keltaista tai syvempi kohti punaista. Pieni muutos saa sen näyttämään valolta maalin sijaan.

- Mandariini: `linear-gradient(135deg, #fdba74 0%, #f97316 100%)`
- Sitruspurskahdus: `linear-gradient(135deg, #fbbf24 0%, #f97316 60%, #ea580c 100%)`
- Oranssista vesimeloniin: `linear-gradient(120deg, #fb923c 0%, #f43f5e 100%)`
- Kuumapiste: `radial-gradient(circle at 70% 30%, #fed7aa 0%, #fb923c 40%, #ea580c 100%)`
- Oranssista sitruunaan: `linear-gradient(90deg, #f97316 0%, #facc15 100%)`

Kirkkaat oranssit toimivat parhaiten, kun yksi piste taittuu keltaiseen tai vaaleanpunaiseen. Liuku näyttää silloin valolta, ei tasaiselta täytöltä.

## Auringonlaskun ja meripihkan oranssit liukuvärit

Pystysuuntainen liuku yläosan kullasta alaosan punaiseen tai luumuun tekee auringonlaskun, ehkä tutuimman liukuvärin. Meripihkaliu’ut ovat hiljaisempi sukulainen: hunajan, marmeladin ja viskin sävyt tuntuvat rikkailta huutamatta. Kokonaista taivasratkaisua käsittelee [auringonlaskuliukuvärit](https://gradiently.design/fi/guide/sunset-gradient).

- Klassinen auringonlasku: `linear-gradient(180deg, #fcd34d 0%, #f97316 50%, #be123c 100%)`
- Hämärä: `linear-gradient(180deg, #fdba74 0%, #f472b6 55%, #7c3aed 100%)`
- Hunajainen meripihka: `linear-gradient(135deg, #fde68a 0%, #f59e0b 50%, #b45309 100%)`
- Marmeladi: `linear-gradient(160deg, #fb923c 0%, #c2410c 60%, #7c2d12 100%)`
- Viimeinen valo: `linear-gradient(180deg, #f59e0b 0%, #dc2626 60%, #450a0a 100%)`

Pystysuuntaiset liu’ut näyttävät taivaalta. Aseta vaalein väri ylös ja horisonttiväri alas.

## Poltetun oranssin ja ruosteen liukuvärit

Vie oranssia kohti ruskeaa, niin siitä tulee terrakottaa, ruostetta ja kuparia: saviruukkujen, syyslehtien ja vanhan nahan värejä. Ne tuntuvat käsityöltä ja harkituilta, joten ne sopivat sisustukseen, kahviin, keramiikkaan, ulkoilubrändeille ja käsin tekemisen tarinoihin. Niillä myös valkoinen teksti erottuu paljon kirkasta oranssia paremmin.

- Poltettu oranssi: `linear-gradient(135deg, #ea580c 0%, #9a3412 100%)`
- Terrakotta: `linear-gradient(160deg, #e07a4f 0%, #b4532a 55%, #7a3419 100%)`
- Kupari: `linear-gradient(135deg, #d97706 0%, #92400e 60%, #451a03 100%)`
- Ruoste: `linear-gradient(180deg, #c2410c 0%, #7c2d12 100%)`
- Savesta kaarnaan: `linear-gradient(135deg, #f4c7a1 0%, #c8703f 50%, #6b2f14 100%)`

Poltetut oranssit ovat lähellä ruskeaa. Ne ovat rauhallisempia, lämpimämpiä ja parempia valkoisen tekstin takana.

## Oranssi valo tummalla pohjalla

Arvokkain tapa käyttää oranssia on säästeliäästi. Aloita lähes mustasta, syvänruskeasta tai tummansinisestä ja anna yhden oranssin hehkua kulmasta hiilloksen tai katuvalon tavoin. Se sopii yötilaisuuksiin, ravintoloihin, musiikkiin ja kaikkeen, jonka pitää tuntua lämpimältä pimeällä. Tummat liu’ut porrastuvat helposti, joten lue [tummat liukuväritaustat](https://gradiently.design/fi/guide/dark-gradient-backgrounds) ennen vientiä.

- Hiillos: `radial-gradient(circle at 80% 20%, #f97316 0%, #7c2d12 35%, #120806 75%)`
- Tulen äärellä: `radial-gradient(circle at 20% 80%, #fb923c 0%, #431407 45%, #0c0a09 85%)`
- Katuvalo tummansinisellä: `radial-gradient(circle at 75% 25%, #fdba74 0%, #ea580c 20%, #1e1b4b 65%, #0b0a1f 100%)`
- Hiili ja kupari: `linear-gradient(200deg, #c2410c 0%, #3b1407 45%, #0c0a09 100%)`
- Horisontin hehku: `radial-gradient(ellipse at 50% 110%, #f97316 0%, #9a3412 30%, #1c0f0a 70%)`

Yksi oranssi valo ja paljon pimeää. Pohja tekee tunnelman, oranssin tarvitsee vain hehkua.

## Oranssiin liukuväriin sopivat värit

Oranssilla on kahdenlaisia hyviä kumppaneita. Naapurit keltainen, vaaleanpunainen ja punainen sekoittuvat siihen suoraan. Vastakkaiset syvä sininen ja sinivihreä saavat sen värisemään, mutta niiden pitää olla vieressä tehosteina eikä samassa liu’ussa, koska keskikohta muuttuu harmaaksi. [Sameat liukuvärit](https://gradiently.design/fi/guide/muddy-gradients) selittää syyn, ja [vastavärit](https://gradiently.design/fi/guide/complementary-colors) näyttää turvallisen käytön.

- Kerma: #fff7ed
- Aprikoosi: #fdba74
- Mandariini: #f97316
- Ruoste: #9a3412
- Kaarnan muste: #431407
- Syvänsininen tehoste: #1e3a8a
- Sinivihreä tehoste: #0f766e

Toimiva oranssi paletti: kermanvärinen pohja, kolme oranssia, tummanruskea tekstille ja kaksi viileää tehostetta erillään liu’usta.

## Teksti oranssilla liukuvärillä

Tässä useimmat oranssit designit epäonnistuvat. Valkoinen kirkkaalla mandariinilla näyttää vahvalta, mutta kontrasti on noin 2,8:1, selvästi alle WCAG:n leipätekstiltä vaatiman 4,5:1:n. Lähes musta samalla oranssilla ylittää 6:1:n. Sääntö on selvä: tumma teksti vaalealla ja kirkkaalla oranssilla, valkoinen vasta poltetusta oranssista tummempaan. Koko menetelmä on oppaassa [värikontrasti ja saavutettavuus](https://gradiently.design/fi/guide/color-contrast-accessibility).

| Tausta | Valkoinen teksti | Tumma teksti #1c1917 |
| --- | --- | --- |
| Aprikoosi `#fdba74` | Ei läpäise | Läpäisee helposti |
| Mandariini `#f97316` | Noin 2,8:1, ei läpäise | Noin 6,2:1, läpäisee |
| Syvä oranssi `#ea580c` | Noin 3,6:1, vain suuri teksti | Läpäisee |
| Poltettu oranssi `#c2410c` | Noin 5,2:1, läpäisee | Heikko |
| Ruoste `#9a3412` | Noin 7,3:1, läpäisee | Ei läpäise |

Kontrasti mitattu tasaisesta väristä. Liukuvärillä testaa vaalein kohta sanojesi takana.

Leipomon tarjousjulkaisu, jonka lämmin oranssi liukuväri kulkee vaikeasti luettavan otsikon takana

Kun kirkkain oranssi kulkee suoraan otsikon takana, sanat alkavat kilpailla värin kanssa.

Sama leipomon tarjousjulkaisu, jossa rauhallisempi ja syvempi liukuvärialue on selkeän otsikon takana

Sama julkaisu rauhallisemmalla alueella sanojen takana ja sille valitulla tekstivärillä.

Gradiently hoitaa tämän puolestasi. Mark tietää sanojen paikan: se siirtää rauhallisimman alueensa niiden taakse. Automaattinen muste valitsee vaalean tai tumman tekstin riveittäin Markin omasta paletista, joten oranssi design pysyy luettavana kaikissa ko’oissa ilman laatikoita tai varjoja.

## Oranssi liukuväri CSS:llä

Jokainen yllä oleva koodi on yksi CSS-arvo, jonka voit liittää `background`-määritykseen. Jos osio tarvitsee sekä lämpöä että syvyyttä, kerrosta säteittäinen valo lineaarisen pohjan päälle ja aseta aina tasainen varaväri. [CSS:n lineaariset liukuvärit](https://gradiently.design/fi/guide/css-linear-gradient) kertoo koko syntaksin.

```css
.hero {
  background-color: #9a3412; /* fallback */
  background-image:
    radial-gradient(circle at 78% 22%, #fdba74 0%, transparent 40%),
    linear-gradient(160deg, #f97316 0%, #c2410c 55%, #7c2d12 100%);
  color: #ffffff; /* safe here: the words sit on the darker lower half */
}
```

Kirkas aprikoosivalo mandariinista ruosteeseen kulkevan pohjan päällä. Aseta otsikko alas vasemmalle, missä väri on syvin.

Jos haluat oranssin ilmeen, jota kukaan muu ei julkaise, selaa Markkinoiden lämpimiä Markeja. Hae esimerkiksi ”burnt orange” tai ”apricot”, suunnittele lunastamattomalla Markilla ilmaiseksi ja lunasta se, jos siitä tulee brändisi.

## FAQ

### Mitkä värit sopivat oranssiin liukuväriin?

Keltainen, vaaleanpunainen, punainen ja ruskea sekoittuvat oranssiin suoraan. Syvä sininen ja sinivihreä ovat vahvoja tehosteita, mutta pidä ne vieressä, älä samassa liu’ussa.

### Mikä on poltetun oranssin hex-koodi?

Yhtä virallista koodia ei ole, mutta `#c2410c` ja `#cc5500` ovat yleisiä. Poltetun oranssin liuku kuten `linear-gradient(135deg, #ea580c, #9a3412)` tuo syvyyttä.

### Voinko käyttää valkoista tekstiä oranssilla liukuvärillä?

Vain tummemmilla oransseilla. Valkoinen kirkkaalla mandariinilla ei täytä kontrastivaatimuksia. Käytä siinä lähes mustaa ja säästä valkoinen poltetulle oranssille, ruosteelle ja tummemmille.

### Miksi oranssista siniseen liuku näyttää keskeltä harmaalta?

Oranssi ja sininen ovat väriympyrän vastapuolilla, joten välivärit menettävät kylläisyyttä. Lisää niiden väliin vaaleanpunainen tai violetti piste tai pidä ne erillisinä alueina.

### Mitä oranssi liukuväri kertoo brändistä?

Oranssi tuntuu yleensä lämpimältä, ystävälliseltä, leikkisältä ja edulliselta. Tummemmat poltetut versiot vievät mielikuvaa kohti käsityötä ja varmuutta.