# Punainen liukuväri: energiaa ilman hälytystä

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

Punainen saa huomion nopeammin kuin mikään muu väri, ja juuri siksi se menee pieleen. Näin rakennat punaisia liukuvärejä, jotka tuntuvat eläviltä, lämpimiltä ja varmoilta eivätkä äänekkäiltä.

## The short version

- Punainen liukuväri on sekoitus, joka rakentuu punaisten sävyjen, kuten karmiinin, helakanpunaisen, häränveren tai korallin, ympärille, ja sitä käytetään suunnitelmissa, jotka tarvitsevat lämpöä ja kiireen tuntua.
- Punaiset liukuvärit näyttävät parhailta, kun vain yksi pysäytyspiste on täysin kylläinen ja muut siirtyvät kohti syvempää viininpunaista tai lämpimämpää oranssia ja pinkkiä.
- Puhtaan #ff0000:n ja valkoisen tekstin kontrastisuhde on 4:1, mikä jää alle tavallisen leipätekstin 4,5:1:n vähimmäisvaatimuksen.
- Kun punainen pidetään lämpimien naapuriensa eikä kylläisen sinisen vieressä, vältetään välkyntä ja hälytyksen tuntu, jotka tekevät punaisista suunnitelmista kovia.
- Syvät punaiset, kuten häränveri ja viininpunainen, vaikuttavat laadukkailta ja rauhallisilta, kun taas kirkas helakanpunainen ja koralli vaikuttavat energisiltä ja leikkisiltä.

**Punainen liukuväri** on sekoitus, joka rakentuu punaisen ympärille kirkkaasta helakanpunaisesta ja karmiinista syvään häränvereen ja pehmeään koralliin, ja se on energisin liukuväri, jonka näytölle voi laittaa. Sen hyvän käytön salaisuus on pidättyvyys: anna yhden pysäytyspisteen kantaa täysi kylläisyys, siirrä loput kohti syvempää viininpunaista tai lämpimämpää oranssia ja pinkkiä ja pidä punainen poissa paikoista, joissa ihmiset odottavat varoituksia. Niin tehtynä punainen näyttää lämmöltä ja ruokahalulta eikä virheilmoitukselta.

Alta löydät kolme punaista palettia, yhdeksän kopioitavaa punaisen liukuvärin koodia, kontrastiluvut tekstille punaisen päällä ja sen, missä punainen toimii parhaiten. Siitä, miten värit ylipäätään kantavat merkityksiä, kertoo [väripsykologia](https://gradiently.design/fi/guide/color-psychology).

## Miksi punaisella on vaikeampi suunnitella kuin miltä näyttää

Punainen on äänekäs monesta syystä yhtä aikaa. Näytön punainen yltää hyvin korkeaan kylläisyyteen, joten se hallitsee kaikkea vieressään. Käyttöliittymät ovat opettaneet ihmiset lukemaan sen vaaraksi: virhetilat, poistopainikkeet, alhainen akku ja lukemattomien merkit ovat lähes aina punaisia. Lisäksi kirkas punainen aivan kylläisen sinisen vieressä voi näyttää väreilevän tai olevan eri syvyydellä. Ilmiön nimi on kromostereopsia, ja se tekee tekstistä tuossa yhdistelmässä raskasta lukea.

### Näyttää hälytykseltä

- Tasainen `#ff0000`, joka täyttää koko kankaan
- Punainen teksti tai reunukset valkoisella sivulla ilman muuta lämmintä väriä
- Punainen suoraan kylläistä sinistä vasten
- Punainen sekä brändin että virheilmoitusten värinä

### Näyttää energialta

- Yksi kirkas punainen pysäytyspiste, joka laskee syvään viininpunaiseen tai häränvereen
- Punainen sekoitettuna lämpimiin naapureihinsa, oranssiin ja pinkkiin
- Punainen tummalla, lämpimällä pohjalla ja pehmeä luonnonvalkoinen tekstille
- Erillinen, selvästi erilainen väri varattuna virheille

## Kolme punaista palettia: karmiini, häränveri ja koralli

Useimmat onnistuneet punaiset liukuvärit tulevat yhdestä kolmesta perheestä. Karmiini taittuu hieman siniseen ja tuntuu rohkealta ja klassiselta. Häränveri ja viininpunainen ovat syviä, tummia punaisia, jotka tuovat mieleen nahan, sametin ja punaviinin. Koralli on oranssin ja pinkin suuntaan nostettua punaista, pehmeämpää ja ystävällisempää. Valitse perhe ennen kuin valitset liukuvärin, koska kaikkien kolmen sekoittaminen yhteen näyttää yleensä sameelta.

- Karmiini: #e11d48
- Syvä karmiini: #b91c1c
- Häränveri: #7f1d1d
- Viininpunainen: #4a0e0e
- Koralli: #ff6f61
- Puuteriroosa: #fecaca

Karmiini ylimpänä, häränveri ja viininpunainen syvyyteen, koralli ja puuteriroosa vaaleuteen. Jokainen perhe rakentaa omanlaisensa punaisen liukuvärin.

## Kopioitavat punaisen liukuvärin koodit

Jokainen näistä liukuväreistä pitää punaisen pääosassa, mutta ne eroavat lämpötilaltaan ja syvyydeltään. Tummemmat toimivat kokonaisina taustoina, ja kirkkaammat sopivat paremmin painikkeisiin, merkkeihin, kortteihin ja lyhyisiin huomion välähdyksiin.

- Karmiinituli: `linear-gradient(135deg, #7f1d1d 0%, #dc2626 55%, #f97316 100%)`
- Häränveri: `linear-gradient(160deg, #2a0708 0%, #4a0e0e 50%, #7f1d1d 100%)`
- Korallista karmiiniin: `linear-gradient(135deg, #ff6f61 0%, #e11d48 100%)`
- Kirsikkahehku: `radial-gradient(80% 80% at 30% 20%, #ef4444 0%, #991b1b 55%, #3b0a0a 100%)`
- Punaisesta pinkkiin: `linear-gradient(135deg, #dc2626 0%, #ec4899 100%)`
- Helakanpunaisesta viiniin: `linear-gradient(90deg, #ff3b30 0%, #b91c1c 50%, #5b0f1f 100%)`
- Terrakotta: `linear-gradient(180deg, #c2410c 0%, #9a3412 50%, #6b1f0e 100%)`
- Pehmeä puuteri: `linear-gradient(135deg, #fee2e2 0%, #fca5a5 50%, #f87171 100%)`
- Punaisesta mustaan: `linear-gradient(180deg, #b91c1c 0%, #450a0a 70%, #120404 100%)`

Yhdeksän punaista liukuväriä kirkkaasta syvään. Jokainen sekoittuu vain lämpimien naapurien tai syvempien punaisten kautta, ei koskaan harmaan kautta.

Huomaa, mikä koodeja yhdistää. Kirkas pysäytyspiste on yhdessä päässä tai yhdessä kohdassa, ei koskaan koko kentällä. Tummat pysäytyspisteet ovat tummia *punaisia*, eivät mustaa tai harmaata, joten sekoitus säilyttää värinsä laskiessaan. Jos punainen liukuväri muuttuu keskeltä ruskeaksi, olet luultavasti sekoittanut sen kohti vihreää tai harmaata. Oppaamme [sameat liukuvärit](https://gradiently.design/fi/guide/muddy-gradients) selittää syyn.

## Miten punaisen voimakkuutta hallitaan

1. **Valitse yksi kirkas pysäytyspiste** Päätä, missä kylläisin punainen on, yleensä lähellä otsikkoa tai kiintopistettä. Kaikki muu laskee siitä vaaleudessa tai kylläisyydessä.
2. **Anna sille tummat naapurit** Syvät punaiset, kuten `#7f1d1d` ja `#4a0e0e`, saavat kirkkaan pysäytyspisteen hehkumaan kontrastin ansiosta, kuten yksittäinen hiili hehkuu tummassa nuotiossa.
3. **Sekoita kohti lämpimiä värejä** Oranssi, koralli ja pinkki ovat väriympyrässä punaisen vieressä, joten ne sekoittuvat puhtaasti. [Analogiset värit](https://gradiently.design/fi/guide/analogous-colors) kertoo, miksi naapurit käyttäytyvät aina hyvin.
4. **Pidä punainen osana suunnitelmaa** Punainen on luonteeltaan korostusväri. Punaisen johtamassakin suunnitelmassa suuri rauhallinen alue auttaa, ja [60-30-10-sääntö](https://gradiently.design/fi/guide/60-30-10-rule) on hyvä lähtösuhde.
5. **Pidä virheet eri värisinä** Jos brändisi on punainen, anna virheilmoituksille selvästi erilainen käsittely, esimerkiksi kuvake ja tummempi tai oranssiin taittuva punainen, jottei varoitus koskaan näytä markkinoinnilta.

## Teksti punaisen liukuvärin päällä

Punainen on tekstille hankalasti keskellä. Puhdas näytön punainen on liian tumma, jotta musta teksti olisi miellyttävää, ja liian vaalea, jotta valkoinen teksti täyttäisi leipätekstin vähimmäisvaatimuksen. Ratkaisu on viedä taustaa tummemmaksi, kun haluat valkoista tekstiä, tai vaaleammaksi, kun haluat tummaa tekstiä, ja tarkistaa liukuvärin vaalein kohta sanojesi takana.

| Tausta | Teksti | Kontrasti | Arvio |
| --- | --- | --- | --- |
| `#ff0000` puhdas punainen | Valkoinen | 4.0:1 | Vain suuri teksti |
| `#dc2626` punainen | Valkoinen | 4.8:1 | Kelpaa leipätekstille |
| `#b91c1c` syvä karmiini | Valkoinen | 6.5:1 | Miellyttävä |
| `#7f1d1d` häränveri | `#fff1f0` luonnonvalkoinen | 9.1:1 | Erinomainen |
| `#ff6f61` koralli | Valkoinen | 2.7:1 | Ei kelpaa |
| `#ff6f61` koralli | `#1a0505` lähes musta | 7.2:1 | Erinomainen |

Suhteet on laskettu WCAG-kaavalla. 4,5:1 on tavallisen tekstin ja 3:1 suuren tekstin vähimmäisarvo. Lisätietoa oppaassa [värikontrasti](https://gradiently.design/fi/guide/color-contrast-accessibility).

Pystysuuntainen alejulkaisu, jossa sana Talviale on valkoisella syvän karmiininpunaisen liukuvärin päällä

Otsikko punaisen syvimmän kohdan päällä, jossa valkoinen teksti on miellyttävää lukea.

Pystysuuntainen tarina, joka kertoo myöhäisistä aukioloajoista lämpimällä punaisella liukuvärillä, jonka yläosassa on kirkas hehku

Sama punainen tarinassa, kirkas pysäytyspiste poissa sanojen tieltä.

## Missä punaiset liukuvärit toimivat parhaiten

Punainen kuuluu sinne, missä energia ja ruokahalu ovat itse asia. Se on yleinen ruoassa ja juomassa, urheilussa, viihteessä ja alennusmyynneissä sekä juhlasuunnittelussa. Kiinalaisessa perinteessä punainen liittyy vahvasti onneen ja juhlaan, minkä vuoksi se hallitsee kiinalaisen uudenvuoden ilmettä. Merkitykset vaihtelevat kulttuurista toiseen, joten tarkista omasi oppaasta [värien merkitykset eri puolilla maailmaa](https://gradiently.design/fi/guide/color-meanings-around-the-world).

- **Ruoka, kahvilat ja ravintolat:** koralli- ja terrakottaliukuvärit tuntuvat lämpimiltä ja herkullisilta
- **Urheilu ja kuntoilu:** karmiinituli ja helakanpunaisesta viiniin kantavat vauhtia ja ponnistusta
- **Muoti ja kauneus:** häränveri, viininpunainen ja puuteri tuntuvat harkituilta ja laadukkailta
- **Alennusmyynnit ja julkaisut:** yksi kirkas pysäytyspiste syvän punaisella kentällä vetää katseen huutamatta
- **Musiikki ja yöelämä:** punaisesta mustaan ja kirsikkahehku sopivat tummiin, valaistuihin tiloihin

Jos haluat punaista rakentamatta sitä uudelleen joka formaattiin, Gradientlyn Markkinoilla voit hakea Markeja sanoilla kuten ”deep red” tai ”coral”. Jokainen Mark siirtää rauhallisimman alueensa sanojesi taakse, mikä ratkaisee yllä kuvatun punaisen ja tekstin ongelman puolestasi.

## FAQ

### Mitkä värit sopivat punaisen kanssa liukuväriin?

Sen lämpimät naapurit sekoittuvat puhtaimmin: oranssi, koralli, pinkki ja syvä viininpunainen. Punaisen sekoittaminen kohti vihreää tai harmaata tekee keskikohdasta helposti ruskean.

### Voiko punaiselle taustalle laittaa valkoista tekstiä?

Voi, jos punainen on tarpeeksi syvä. Valkoinen `#dc2626`:n päällä on 4,8:1 ja kelpaa leipätekstille, mutta valkoinen puhtaan `#ff0000`:n päällä on vain 4:1, joten käytä sitä vain suureen tekstiin.

### Mikä on tummanpunaisen liukuvärin heksakoodi?

Kokeile koodia `linear-gradient(160deg, #2a0708 0%, #4a0e0e 50%, #7f1d1d 100%)`, häränverisekoitusta, joka pysyy punaisena päästä päähän.

### Miksi punainen liukuvärini näyttää aggressiiviselta?

Yleensä siksi, että koko kenttä on täysin kylläistä punaista. Pidä yksi kirkas pysäytyspiste, anna lopun laskea syvempiin punaisiin ja vältä punaisen sijoittamista suoraan kylläistä sinistä vasten.