# Oranssi ja vaaleanpunainen liukuväri ilman kliseitä

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

Oranssi ja vaaleanpunainen ovat naapureita, joten niiden liuku on lämpimimpiä ja helpoimpia. Haasteena ei ole sekoittaminen vaan jokaisen auringonlaskupohjan kaltaisen ilmeen välttäminen.

## The short version

- Oranssin ja vaaleanpunaisen liukuväri sekoittaa lämpimiä naapurisävyjä, kuten mandariinia #f97316, korallia #fb7185 ja pinkkiä #ec4899, joten siirtymä pysyy kirkkaana ilman siltaväriä.
- Pari liittyy niin vahvasti auringonlaskuihin, että tavallinen vino oranssi-pinkki-liuku näyttää valmiilta pohjalta. Pohjan tai valoisuuden muuttaminen välttää tämän.
- Kirkas oranssi ja voimakas pinkki ovat liian vaaleita pienelle valkoiselle tekstille. Syvä ruoste tai poltettu ruskea erottuu pehmeillä versioilla hyvin.
- Maanläheiset terrakotan ja murretun roosan versiot ovat rauhallisia ja aikuisia, hiilloksen ja vadelman tummat versiot lämpimiä ja öisiä.
- Oranssi ja vaaleanpunainen sopivat ruokaan, juomaan, kauneuteen, kesäkampanjoihin, matkailuun ja lämpimille, kutsuville brändeille.

**Oranssi ja vaaleanpunainen liukuväri** yhdistää lämpimät naapurit: mandariinin kuten `#f97316` tai persikan kuten `#fed7aa` toisessa päässä ja pinkin kuten `#ec4899` tai puuterisen `#fda4af` toisessa, yleensä koralli välissä. Vierekkäiset sävyt eivät samennu sekoittuessaan. Lopputulos voi silti olla ennalta arvattava, koska pari tarkoittaa usein auringonlaskua. Alla olevat koodit on ryhmitelty pehmeästä persikasta tummaan hiillokseen, jotta löydät omalta tuntuvan version puhelintaustakuvan sijaan.

## Oranssin ja vaaleanpunaisen väliset värit

Oranssista vaaleanpunaiseen kuljet korallin, lohenpunaisen ja vesimelonin kautta, kaikki kylläisiä ja lämpimiä. Vaalennettuna reitillä ovat aprikoosi, persikka ja puuteri. Tummennettuna ruoste, terrakotta ja vadelma. Useimmat hyvät liu’ut käyttävät kolmea saman valoisuusalueen pistettä vaaleasta persikasta voimakkaaseen pinkkiin hyppäämisen sijaan.

- Kerma: #fff7ed
- Persikka: #fed7aa
- Puuteri: #fda4af
- Aprikoosi: #fb923c
- Koralli: #fb7185
- Mandariini: #f97316
- Voimakas pinkki: #ec4899
- Ruoste: #9a3412
- Poltettu umbra: #431407

Oranssin ja vaaleanpunaisen asteikko sekä kerma ja kaksi tummanruskeaa pohjia ja tekstiä varten.

## Pehmeän persikan ja puuterin liukuvärit

Vaalea oranssi ja vaaleanpunainen muistuttavat ihoa, pellavaa ja aamun valoa. Ne sopivat luontevasti ihonhoitoon, häihin, hyvinvointiin ja leipomoihin. Ne myös näyttävät hyviltä tuotekuvien takana, koska ne imartelevat lämpimiä sävyjä. Käytä tekstissä syvää ruostetta mustan sijaan säilyttääksesi lämmön.

- Persikkapellava: `linear-gradient(135deg, #fff7ed 0%, #fed7aa 50%, #fecdd3 100%)`
- Aprikoosipuuteri: `radial-gradient(circle at 70% 30%, #ffe4e6 0%, #fed7aa 60%, #fdba74 100%)`
- Ensivalo: `linear-gradient(180deg, #fde68a 0%, #fecaca 55%, #fbcfe8 100%)`

Pehmeä oranssi ja vaaleanpunainen. Ruoste tai poltettu umbra erottuu kaikilla kolmella. [Persikkaliukuvärit](https://gradiently.design/fi/guide/peach-gradient) tarjoaa lisää saman perheen sävyjä.

## Korallin, greipin ja vesimelonin liukuvärit

Kylläinen oranssi ja pinkki on puhdasta kesää: greippimehua, rantapyyhkeitä ja festivaalijulisteita. Ne pysäyttävät selaamisen mutta ovat riittävän ystävällisiä välttääkseen aggressiivisuuden. Pidä ne poissa hyvin pienen tekstin takaa ja anna niille rauhallinen kulma.

- Mandariinista vaaleanpunaiseen: `linear-gradient(135deg, #f97316 0%, #fb7185 50%, #ec4899 100%)`
- Greippi: `radial-gradient(circle at 25% 75%, #fdba74 0%, #fb7185 45%, #e11d48 100%)`
- Vesimeloni: `linear-gradient(160deg, #fb923c 0%, #f43f5e 70%, #be185d 100%)`
- Mangosmoothie: `linear-gradient(90deg, #fbbf24 0%, #fb923c 35%, #f472b6 100%)`

Kirkkaat oranssin ja pinkin liu’ut. Kukin piste on seuraavan lähinaapuri, joten keskikohta pysyy elävänä. [Koralliliukuvärit](https://gradiently.design/fi/guide/coral-gradient) käsittelee lisää.

## Maanläheinen terrakotta ja murrettu roosa

Murra molemmat värit, niin pari muuttuu rauhalliseksi ja vakaaksi: saviruukkujen, kuivakukkien ja auringon paahtamien seinien paletiksi. Tämä on vähiten käytetty ja usein tyylikkäin versio. Se sopii oliivin, hiekan ja kerman rinnalle sekä [maanläheisiin väripaletteihin](https://gradiently.design/fi/guide/earth-tone-colors).

- Savi ja roosa: `linear-gradient(135deg, #f5e6d8 0%, #d9967a 55%, #c27c7c 100%)`
- Terrakottahämärä: `radial-gradient(circle at 80% 20%, #e8a598 0%, #b4644a 50%, #6b2f22 100%)`
- Kuivat terälehdet: `linear-gradient(180deg, #faf3ec 0%, #e7b9a8 50%, #b97a6f 100%)`

Murrettu oranssi ja vaaleanpunainen tuntuvat käsintehdyiltä ja rauhallisilta. Ne sopivat sisustukseen, keramiikkaan, kukkakaupoille ja hitaan elämän brändeille.

> **Tuotekuvien takana** Lämpimät murretut liu’ut imartelevat ihoa, puuta, leipää ja keramiikkaa toistamalla niiden värejä. Valitse väripiste itse tuotteesta ja rakenna liukuväri sen ympärille. [Tuotekuvien taustat](https://gradiently.design/fi/guide/product-photo-backgrounds) näyttää miten.

## Tumman hiilloksen ja vadelman liukuvärit

Aloita syvänruskeasta tai luumunpohjasta ja anna oranssin ja pinkin hehkua siitä. Iloinen pari muuttuu intiimiksi: kynttilänvalo, hiillos, cocktailmenu. Vaalea teksti erottuu niillä helposti, joten ne sopivat tapahtumajulisteisiin ja iltatarjouksiin.

- Hiillos: `radial-gradient(circle at 75% 80%, #fb923c 0%, #9f1239 35%, #1c0708 80%)`
- Ruosteesta vadelmaan: `linear-gradient(160deg, #1f0a0a 0%, #7c2d12 45%, #db2777 100%)`
- Viimeinen valo: `radial-gradient(ellipse at 50% 100%, #fdba74 0%, #be185d 40%, #2a0a14 85%)`

Tumman oranssin ja pinkin liu’ut. Lisää rakeisuutta, koska lämpimät tummat liu’ut porrastuvat helposti.

## Näin vältät auringonlaskukliseen

Oranssista pinkkiin 45 asteen kulmassa kulkevaa liukua näkee kaikkialla puhelintaustakuvista sovelluskuvakkeisiin, joten se näyttää oletusvalinnalta. Jos haluat lämmön ilman valmispohjan tuntua, muuta vähintään yhtä alla olevista asioista. [Auringonlaskuliukuvärit](https://gradiently.design/fi/guide/sunset-gradient) käsittelee kirjaimellista versiota, jos haluat sen.

### Valmispohja

- Voimakkaasta oranssista voimakkaaseen pinkkiin, kaksi pistettä
- Suora 45 asteen vino liuku
- Väri tasaisesti koko kuvalla
- Valkoinen teksti kirkkaimmalla kohdalla

### Harkittu

- Pohja ensin: kerma, savi tai hiillos
- Valoa yhdestä kulmasta säteittäisellä liukuvärillä
- Epätasaiset väripisteet, yksi väri johtaa
- Ruosteteksti pehmeille versioille, kerma tummille

## Tekstivärit oranssilla ja vaaleanpunaisella

Oranssi on vaaleimpia kylläisiä värejä, joten valkoinen teksti mandariinilla tai aprikoosilla on heikompi kuin näyttää. Syvä ruoste tai poltettu umbra on luotettava teksti pehmeillä ja kirkkailla versioilla, kerma sopii tummiin. Suhteet perustuvat WCAG-kaavaan, jossa 4,5:1 on tavallinen leipätekstin minimi. [Värikontrasti](https://gradiently.design/fi/guide/color-contrast-accessibility) selittää loput.

| Tausta | Teksti | Kontrasti | Arvio |
| --- | --- | --- | --- |
| Aprikoosi `#fb923c` | Valkoinen | 2,3:1 | Ei läpäise |
| Mandariini `#f97316` | Valkoinen | 2,8:1 | Ei riitä useimpiin teksteihin |
| Persikka `#fed7aa` | Poltettu umbra `#431407` | 11,6:1 | Erinomainen |
| Koralli `#fb7185` | Poltettu umbra `#431407` | 5,8:1 | Hyvä |
| Syvä oranssi `#c2410c` | Valkoinen | 5,2:1 | Hyvä |
| Vadelma `#be185d` | Valkoinen | 6,0:1 | Hyvä |

Jos valkoinen teksti on designillesi tärkeää, tummenna sen takaiset pisteet syvän oranssiksi tai vadelmaksi.

Baarin pystymainos kermanvärisellä tekstillä ja oranssina sekä vadelmaisena hehkuvalla tummalla liukuvärillä

Baarin mainos hiilloksesta vadelmaan, kermanvärinen teksti tummalla puolella.

Ihonhoidon neliöjulkaisu tummanruskealla tekstillä pehmeällä persikan ja puuterin liukuvärillä

Ihonhoitojulkaisu persikalla ja puuterilla, poltetun umbran tekstillä.

## Oranssin ja pinkin liukuväri CSS:llä

```css
.warm-hero {
  background-color: #fff7ed;
  background-image:
    radial-gradient(circle at 85% 20%, #fb7185 0%, transparent 45%),
    radial-gradient(circle at 10% 90%, #fdba74 0%, transparent 50%),
    linear-gradient(160deg, #fff7ed 0%, #fed7aa 100%);
  color: #431407;
}
```

Kermapohja, korallivalo oikeassa yläkulmassa, aprikoosi vasemmassa alakulmassa ja poltetun umbran teksti.

Kaksi pehmeää säteittäistä valoa vaalealla pohjalla tuottavat paljon luonnollisemman lämmön kuin yksi vino liuku. Jos haluat selvästi omaa lämpöä, Gradientlyn Markkinoilla voit hakea Markeja värisanoilla kuten ”coral” tai ”peach”. Jokainen Mark on ainutlaatuinen ja sillä on täsmälleen yksi omistaja kerrallaan. Lunastamisen jälkeen vain sinä voit viedä sillä tiedostoja.

## FAQ

### Mikä on hyvä oranssin ja pinkin liukuvärikoodi?

Kirkas klassikko on `linear-gradient(135deg, #f97316 0%, #fb7185 50%, #ec4899 100%)`. Pehmeämpään versioon kokeile `linear-gradient(135deg, #fff7ed 0%, #fed7aa 50%, #fecdd3 100%)`.

### Sopivatko oranssi ja vaaleanpunainen yhteen?

Kyllä. Ne ovat väriympyrän naapureita, joiden välissä on koralli, joten ne sekoittuvat puhtaasti ja tuntuvat lämpimiltä.

### Mikä tekstiväri sopii oranssin ja pinkin liukuvärille?

Syvä ruoste tai poltettu umbra kuten `#431407` erottuu pehmeillä ja kirkkailla versioilla. Valkoinen toimii vain syvemmillä pisteillä, kuten `#c2410c` tai `#be185d`.

### Miten oranssin ja pinkin liuku näyttää vähemmän auringonlaskulta?

Aloita kerman, saven tai tumman hiilloksen kaltaisesta pohjasta, valaise yhdestä kulmasta vinon liu’un sijaan ja anna yhden värin johtaa.

### Mikä väri on oranssin ja vaaleanpunaisen välissä?

Koralli, noin `#fb7185`, jonka lähisukulaisia ovat lohenpunainen ja vesimeloni.