# Punamusta liukuväri: dramaattiset koodit ilman porrastumista

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

Punainen mustaa vasten on värien dramaattisimpia pareja. Se voi tuntua elokuvateatterilta, mestaruusottelulta tai kauhujulisteelta. Nämä koodit antavat draamaa hallitusti.

## The short version

- Punamusta liukuväri vaihtuu esimerkiksi punaisesta #dc2626 tai #b91c1c lähes mustaan, yleensä syvän verenpunaisen #450a0a kautta.
- Siirtymä tumman karmiinin kautta suoran mustaan häivytyksen sijaan säilyttää täyteläisyyden ja ehkäisee ruskeaa tai harmaata vyöhykettä.
- Punamusta liukuväri porrastuu helposti pakatuissa kuvissa ja videoissa. Lisää rakeisuutta ja vältä suuria sileitä, heikkokontrastisia alueita.
- Valkoinen teksti erottuu syvästä punaisesta ja mustasta. Kylläisellä keskipunaisella valkoinen tarvitsee suuren, vahvan fontin.
- Yhdistelmä sopii elokuvaan, urheiluun, peleihin, muotiin, yöelämään ja halloweeniin. Yksi vahva valonlähde toimii paremmin kuin tasaisesti levitetty punainen.

**Punamusta liukuväri** häivyttää kirkkaan punaisen, kuten `#dc2626`, tai syvemmän karmiinin, kuten `#b91c1c`, lähes mustaan. Verenpunainen `#450a0a` välissä säilyttää siirtymän täyteläisenä. Harva pari on yhtä dramaattinen: punainen vetää huomion, eikä musta kilpaile sen kanssa. Tässä punamustat koodit viiteen tunnelmaan, porrastumisen ehkäisy ja toimivat tekstivärit.

## Punaisesta mustaan ilman ruskeaa

Tavallinen virhe on sekoittaa puhdas punainen suoraan puhtaaseen mustaan kahdella pysäytyksellä. Keskelle syntyy samea ruskeanpunainen, joka näyttää likaiselta eikä tummalta. Kulje tummempien punaisten kautta ja käytä mustaa, jossa on häivähdys punaista. Varjo kuuluu silloin samaan perheeseen kuin valo.

- Luunvalkoinen: #fef2f2
- Vaalea signaalipunainen: #f87171
- Helakanpunainen: #ef4444
- Punainen: #dc2626
- Karmiini: #b91c1c
- Oksidi: #7f1d1d
- Veri: #450a0a
- Musta: #0a0a0a

Sävyasteikko punaisesta mustaan ja luunvalkoinen tekstille. Käytä yhdessä liukuvärissä kolmea tai neljää vierekkäistä sävyä.

- Kaksi pysäytystä: samea keskusta: `linear-gradient(180deg, #dc2626 0%, #000000 100%)`
- Vaiheittain: täyteläinen kauttaaltaan: `linear-gradient(180deg, #dc2626 0%, #7f1d1d 35%, #450a0a 65%, #0a0505 100%)`

Sama punainen ja sama tummuus. Vaiheittainen versio kulkee karmiinin ja verenpunaisen kautta ruskean sijaan.

## Punamustan liukuvärin koodit viiteen dramaattiseen tunnelmaan

### Elokuva ja trilleri

Enimmäkseen mustaa ja yksi sivulta tuleva punainen valo, kuin poistumistiemerkki pimeässä huoneessa. Hillitty ja jännittynyt.

- Sivuvalo: `radial-gradient(circle at 90% 50%, #b91c1c 0%, #450a0a 25%, #0a0505 60%)`
- Punainen reuna: `linear-gradient(90deg, #000000 0%, #0a0505 55%, #7f1d1d 85%, #dc2626 100%)`

### Urheilu ja otteluilta

Kuuma punainen nousee alhaalta kuin valaistulta areenan lattialta. Voimakas, fyysinen ja kiireinen.

- Areenan lattia: `radial-gradient(ellipse at 50% 110%, #ef4444 0%, #991b1b 30%, #1c0505 65%, #000000 90%)`
- Nouseva kuumuus: `linear-gradient(0deg, #dc2626 0%, #7f1d1d 30%, #0a0a0a 75%)`

### Pelit

Terävät vinot linjat ja jyrkät värirajat muistuttavat enemmän grafiikkaa kuin hehkua. Vaikutelma on nopea ja aggressiivinen.

- Terävä jako: `linear-gradient(120deg, #0a0a0a 0%, #0a0a0a 55%, #dc2626 55%, #7f1d1d 100%)`
- Pyyhkäisyviivakuvio: `repeating-linear-gradient(180deg, #0a0a0a 0px, #0a0a0a 14px, #450a0a 14px, #450a0a 16px)`

### Muoti ja ylellisyys

Syvää karmiinia ja lakattua mustaa, tuskin lainkaan kirkasta punaista. Ajattele lakattua rasiaa tai punaista silkkivuorta: kiillotettu, kallis ja hallittu.

- Lakka: `linear-gradient(160deg, #0a0a0a 0%, #2a0606 50%, #7f1d1d 100%)`
- Karmiininpunainen sametti: `radial-gradient(circle at 30% 20%, #991b1b 0%, #3b0707 35%, #0a0a0a 75%)`

### Halloween ja kauhu

Punainen kerääntyy kuvan pohjalle tai tihkuu kulmista. Säästeliäästi käytettynä se tuntuu levottomuutta herättävältä. Liika näyttää naamiaisliikkeeltä.

- Kerääntyvä punainen: `radial-gradient(ellipse at 50% 100%, #7f1d1d 0%, #2a0505 40%, #050202 80%)`
- Punainen vinjetti: `radial-gradient(circle at 50% 50%, #0a0a0a 40%, #450a0a 75%, #991b1b 100%)`

Kymmenen koodia viiteen tunnelmaan. Jokaisessa punainen täyttää yhden alueen ja musta loput. [Halloween-grafiikka](https://gradiently.design/fi/guide/halloween-graphics) tarjoaa lisää kausi-ideoita.

## Miksi punamusta liukuväri porrastuu ja miten estät sen

Tummassa sileässä liukuvärissä on vain vähän erillisiä sävyjä, joten se hajoaa näkyviksi portaiksi etenkin sovelluksen pakatessa sitä uudelleen. Kylläinen punainen pahentaa video-ongelmaa. Useimmat videomuodot tallentavat värin kirkkautta pienemmällä tarkkuudella, jolloin punaiset reunat leviävät. [Liukuvärin porrastuminen](https://gradiently.design/fi/guide/gradient-banding) selittää mekanismin.

1. **Lisää hienoa rakeisuutta** Kevyt kohinakerros hajottaa portaat. [Rakeiset liukuvärit](https://gradiently.design/fi/guide/grainy-gradients) tarjoaa valmiin ohjeen.
2. **Vie täydessä koossa** Lataa alustan omassa koossa, kuten Instagram-julkaisu 1080×1350, jotta kuvaa ei skaalata ja pakata kahdesti.
3. **Suosi PNG:tä still-kuvissa** PNG välttää lohkovirheet, joita JPEG tuottaa tummille sileille alueille.
4. **Säilytä videossa tekstuuria** Täysin sileä punainen häivytys on videopakkaajalle vaikeimpia asioita. Pieni liike tai rakeisuus säilyy paljon paremmin.

## Kuinka paljon punaista mustan rinnalle

Punaisella on vahvoja mielleyhtymiä: vaara, kuumuus, intohimo, kiire sekä monissa paikoissa onni ja juhla. Mustan vieressä ne voimistuvat. Mittasuhde ratkaisee, tuntuuko design dramaattiselta vai hälyttävältä. [Punaisen merkitys](https://gradiently.design/fi/guide/red-color-meaning) käsittelee mielleyhtymiä tarkemmin.

### Hälyttävä

- Punainen tasaisesti koko kuvassa
- Kirkas punainen pienen valkoisen tekstin takana
- Punainen, musta ja kolmas voimakas väri
- Punainen hehku jokaisessa sanassa

### Dramaattinen

- Enimmäkseen mustaa, punaista yhdellä alueella
- Syvä karmiini tekstin takana, kirkas punainen muualla
- Punainen, musta ja hillitty luunvalkoinen
- Selkeä teksti, jonka vaikutelman valo luo

## Tekstivärit punamustalla taustalla

Mustassa päässä lähes mikä tahansa vaalea erottuu. Punaisessa päässä se riippuu sävyn syvyydestä. Kirkas helakanpunainen on luultua vaaleampi, joten valkoisen tekstin on oltava suurta ja vahvaa. Suhteet käyttävät WCAG-kaavaa, jossa pienen tekstin tavoite on 4,5:1.

| Tausta | Teksti | Kontrasti | Arvio |
| --- | --- | --- | --- |
| Musta `#0a0a0a` | Luunvalkoinen `#fef2f2` | 18,1:1 | Erinomainen |
| Musta `#0a0a0a` | Helakanpunainen `#ef4444` | 5,3:1 | Hyvä punaisille otsikoille |
| Helakanpunainen `#ef4444` | Valkoinen | 3,8:1 | Vain suuri ja vahva teksti |
| Punainen `#dc2626` | Valkoinen | 4,8:1 | Hyvä |
| Karmiini `#b91c1c` | Valkoinen | 6,5:1 | Hyvä |
| Oksidi `#7f1d1d` | Valkoinen | 10,0:1 | Erinomainen |

Punainen teksti mustalla on luettavaa, mutta säästä se otsikoihin. Pitkät tekstit kylläisellä punaisella väsyttävät.

Pysty otteluiltajuliste, jossa valkoinen teksti on mustalla ja punainen valo nousee kuvan alareunasta

Nyrkkeilysalin julkaisu, jossa punainen nousee lattiasta ja luunvalkoinen teksti on sen yläpuolella.

Pysty elokuvatarina vaalealla tekstillä mustalla, sivulta tulevan syvän punaisen hehkun valaisemana

Elokuvatarina yhden punaisen sivuvalon valaisemana.

## Punamustan liukuvärin CSS

```css
.drama {
  background-color: #0a0505;
  background-image:
    radial-gradient(ellipse at 50% 110%, #dc2626 0%, transparent 45%),
    linear-gradient(180deg, #0a0a0a 0%, #2a0606 70%, #450a0a 100%);
  color: #fef2f2;
}

.split {
  background: linear-gradient(120deg, #0a0a0a 55%, #b91c1c 55%);
}
```

Tumma osio alhaalta tulevalla punaisella valolla ja terävä vino jako. Kaksi samassa kohdassa olevaa pysäytystä luo terävän reunan.

Lisää syviä punaisia löydät oppaista [punaiset liukuvärit](https://gradiently.design/fi/guide/red-gradient) ja [viininpunaiset liukuvärit](https://gradiently.design/fi/guide/maroon-gradient). Jos punamusta on brändisi ydin, lunasta Gradientlyn Mark, niin kukaan muu ei voi viedä sillä. Se renderöityy joka kokoon tarinasta lähetysbanneriin ja siirtää rauhallisimman tumman alueensa automaattisesti sanojesi taakse.

## FAQ

### Mikä on hyvä punamustan liukuvärin koodi?

Täyteläinen vaihtoehto on `linear-gradient(180deg, #dc2626 0%, #7f1d1d 35%, #450a0a 65%, #0a0505 100%)`. Se kulkee karmiinin ja verenpunaisen kautta ruskean sijaan.

### Miksi punaisesta mustaan liukuvärini näyttää ruskealta?

Kahden pysäytyksen sekoitus puhtaasta punaisesta puhtaaseen mustaan kulkee samean ruskeanpunaisen kautta. Lisää karmiinin ja verenpunaisen pysäytykset sekä käytä hieman punertavaa mustaa.

### Mikä tekstiväri sopii punamustalle liukuvärille?

Valkoinen tai lämmin luunvalkoinen erottuu mustasta ja syvistä punaisista. Kirkkaalla helakanpunaisella käytä valkoista vain suurena ja vahvana.

### Miten teen terävän punamustan jaon CSS:llä?

Aseta kaksi pysäytystä samaan kohtaan: `linear-gradient(120deg, #0a0a0a 55%, #b91c1c 55%)` luo terävän vinon rajan.

### Miten estän tummanpunaisen liukuvärin porrastumisen?

Lisää hienoa rakeisuutta, vie alustan omassa koossa ja käytä still-kuviin PNG:tä. Tumma, sileä punainen häivytys porrastuu enemmän kuin lähes mikään muu liukuväri.