# Kaksivärinen suunnittelu: vahva ilme kahdella värillä

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

Kaksi hyvin valittua väriä voi kantaa koko brändiä: julisteita, ruokalistoja, julkaisuja ja valokuvia. Näin valitset parin, laajennat sen käyttöä ja pidät ilmeen elävänä.

## The short version

- Kaksivärinen suunnittelu rakentaa kaikki elementit kahdesta väristä, yleensä yhdestä tummasta ja yhdestä vaaleasta. Mukana saa olla niiden vaaleampia sävyjä, muttei kolmatta väriä.
- Värien vaaleuseron pitää olla selkeä, jotta teksti ja muodot pysyvät luettavina riippumatta siitä, kumpi väri on päällä.
- Kahden värin vaalennukset ja tummennukset antavat palettiin riittävästi vaihtelua taustoille, paneeleille ja toissijaiselle tekstille.
- Duotone-kuva muuttaa kuvan varjot tummaksi väriksi ja valokohdat vaaleaksi, jolloin valokuva sopii kaksiväriseen asetteluun.
- Kaksiväriset asettelut erottuvat kiireisessä syötteessä harkitulla ilmeellään. Ne voi myös painaa edullisesti kahdella spottivärillä.

**Kaksivärinen suunnittelu** tarkoittaa, että kaikki, teksti, muodot, taustat ja jopa valokuvat, rakennetaan vain kahdesta väristä. Yleensä toinen on tumma ja toinen vaalea, ja niiden vaaleusero on vahva. Koboltti ja mandariini, metsänvihreä ja puuteriroosa, muste ja voinkeltainen. Rajoitus on koko ajatus. Kaksi väriä näyttää harkitulta, toimii luettavasti kaikissa ko’oissa ja tekee brändistä tunnistettavan nopeammin kuin laaja paletti.

## Kaksivärinen, duotone ja yksivärinen tarkoittavat eri asioita

Sanoja käytetään väljästi, joten niiden erottaminen auttaa. Ne limittyvät, ja moni hyvä asettelu käyttää kaikkia kolmea samalla kertaa.

| Termi | Merkitys | Tavallinen käyttö |
| --- | --- | --- |
| Kaksivärinen | Koko design tehty kahdesta erillisestä väristä | Julisteet, ruokalistat, pakkaukset ja brändijärjestelmät |
| Duotone | Kuva, jonka varjot muunnetaan yhdeksi väriksi ja valokohdat toiseksi | Valokuvat kaksivärisessä asettelussa |
| Yksivärinen | Vain yhden värisävyn vaalennukset ja tummennukset | Rauhalliset yhden värin brändit |
| Kahden värin liukuväri | Kaksi väriä sulautuu pehmeästi toisiinsa | Taustat ja verkkosivun aloitusosiot |

Kaksivärinen asettelu pitää värit erillään, liukuväri sekoittaa ne. Molemmat voivat kuulua samaan brändiin.

Jos haluat sekoituksen jaon sijaan, [kahden värin liukuvärit](https://gradiently.design/fi/guide/two-color-gradients) käsittelee sitä. [Monokromaattiset värimaailmat](https://gradiently.design/fi/guide/monochromatic-color-scheme) kertoo yhden sävyn versiosta.

## Kaksitoista kaksiväristä palettia

Jokaisen alla olevan parin toinen väri on riittävän tumma tekstiksi toisen päälle. Sävyjen ero on vähemmän tärkeä kuin vaaleusero. Pari voi olla lämmin ja viileä tai kaksi lähisävyä, kunhan toinen on selvästi tummempi.

- Koboltti ja mandariini: `linear-gradient(135deg, #172e70 0%, #172e70 50%, #ff7a1a 50%, #ff7a1a 100%)`
- Metsänvihreä ja puuteriroosa: `linear-gradient(135deg, #14532d 0%, #14532d 50%, #fbcfe8 50%, #fbcfe8 100%)`
- Muste ja voinkeltainen: `linear-gradient(135deg, #111827 0%, #111827 50%, #fde68a 50%, #fde68a 100%)`
- Kleinin sininen ja paperi: `linear-gradient(135deg, #002fa7 0%, #002fa7 50%, #f4f1ea 50%, #f4f1ea 100%)`
- Kilpa-auton vihreä ja sinappi: `linear-gradient(135deg, #004225 0%, #004225 50%, #e1ad01 50%, #e1ad01 100%)`
- Munakoiso ja lime: `linear-gradient(135deg, #3b0a45 0%, #3b0a45 50%, #d9f99d 50%, #d9f99d 100%)`
- Julistepunainen ja kerma: `linear-gradient(135deg, #b8261a 0%, #b8261a 50%, #f7ecd9 50%, #f7ecd9 100%)`
- Syvä petrooli ja persikka: `linear-gradient(135deg, #134e4a 0%, #134e4a 50%, #fdba8c 50%, #fdba8c 100%)`
- Suklaa ja taivaansininen: `linear-gradient(135deg, #3e2723 0%, #3e2723 50%, #bae6fd 50%, #bae6fd 100%)`
- Häränveri ja vaaleanpunainen: `linear-gradient(135deg, #5c1a1b 0%, #5c1a1b 50%, #f6d1cf 50%, #f6d1cf 100%)`
- Musta ja huomioväri: `linear-gradient(135deg, #0a0a0a 0%, #0a0a0a 50%, #dfff00 50%, #dfff00 100%)`
- Syvä violetti ja lila: `linear-gradient(135deg, #2e1065 0%, #2e1065 50%, #c4b5fd 50%, #c4b5fd 100%)`

Kaksitoista paria vinosti jaettuina. Jokaisessa voit vaihtaa pohjaväriä, jolloin asetteluvaihtoehdot kaksinkertaistuvat.

Osa pareista on vastavärejä, kuten koboltti ja mandariini, ja tuo maksimaalista energiaa. Syvä violetti ja lila taas ovat lähisävyjä, jotka tuntuvat rauhallisemmilta ja ylellisemmiltä. [Vastavärit](https://gradiently.design/fi/guide/complementary-colors) selittää, miksi vastakkaiset sävyt värähtelevät kohdatessaan.

## Näin valitset kaksi väriä

1. **Valitse tumma väri ensin** Kaikki otsakkeet ja kappaleet käyttävät sitä, joten sen pitää näkyä vaalealla värillä. Tummansininen, metsänvihreä, munakoiso, suklaa ja lähes musta toimivat.
2. **Valitse vaalea tunnelman mukaan** Tämä väri jää mieleen. Lämpimät vaaleat sävyt, kuten persikka ja voinkeltainen, tuntuvat ystävällisiltä. Viileät vaaleat, kuten taivaansininen ja lila, ovat hiljaisempia.
3. **Tarkista kontrasti molempiin suuntiin** Tumman leipätekstin kontrastin vaalealla värillä pitää olla vähintään 4,5:1. Jokainen yllä olevan ruudukon pari täyttää tämän vaatimuksen.
4. **Kokeile kolmessa formaatissa** Neliöjulkaisu, 1080×1920-tarina ja A5-esite. Jos pari tuntuu omaltasi kaikissa kolmessa, säilytä se.

## Näin saat kahdesta väristä enemmän vaihtelua

Kaksi tasaista väriä voi tuntua niukalta, kun tarvitset toissijaisen paneelin, kuvatekstin tai käytöstä poistetun painikkeen. Ratkaisuksi riittävät vaalean värin vaalennukset ja tumman tummennukset. Jokainen uusi sävy kuuluu yhä samaan pariin.

- Koboltti: #172e70
- Koboltti 75: #516294
- Koboltti 40: #a2abc6
- Mandariini 10: #fdf0e6
- Mandariini 55: #ffb780
- Mandariini: #ff7a1a

Yksi pari, kuusi sävyä. 10 %:n mandariini tekee lämpimän paperipohjan ja 40 %:n koboltti sopii toissijaiseen tekstiin tummilla paneeleilla.

- **Pohja:** vaalein sävy suurille alueille ja tekstisivuille.
- **Pääväri:** tumma väri otsakkeisiin, leipätekstiin ja umpinaisiin lohkoihin.
- **Tehoste:** täysivahvuinen vaalea väri yhdelle muodolle, sanalle tai hinnalle.
- **Välisävyt:** kummankin värin keskisävy jakoviivoihin, kuvateksteihin ja kuvitusten täyttöihin.

## Kaksiväriset valokuvat duotone-käsittelyllä

Valokuvat rikkovat usein kaksivärisen asettelun: täysvärikuva tuo sivulle kolmannen, neljännen ja viidennen värin. Duotone-käsittely muuttaa varjot tummaksi väriksesi ja valokohdat vaaleaksi. [Duotone-efekti](https://gradiently.design/fi/guide/duotone-effect) käsittelee asiaa tarkemmin. Verkossa voit toteuttaa sen sekoitustiloilla.

```css
.duotone {
  position: relative;
  background-color: #ff7a1a; /* light tone: the highlights */
}

.duotone img {
  display: block;
  width: 100%;
  filter: grayscale(100%) contrast(1.15);
  mix-blend-mode: multiply;
}

.duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #172e70; /* dark tone: the shadows */
  mix-blend-mode: lighten;
  pointer-events: none;
}
```

Koboltin ja mandariinin duotone. Kuva muutetaan harmaaksi ja kerrotaan vaalean värin päälle. Tumma väri nostaa sitten varjot koboltiksi.

Gradientlyssä voit sävyttää minkä tahansa valokuvan Markin väreillä yksiväriseksi, duotoneksi tai laveeraukseksi. Kuva liittyy silloin designiin eikä riitele sen kanssa.

## Kokeile näitä kaksivärisiä ideoita

Kahteen värilohkoon jaettu pystyjulkaisu, jonka toisella puolella lukee Perjantaisin myöhään auki

Jaettu asettelu: yksi väri kantaa sanoja, toinen tunnelmaa.

Minimalistinen pystyjulkaisu tekstillä Kevätmenu tummalla värillä vaalealla pohjalla

Minimalistinen asettelu, jossa vaalea väri on pohja ja kaikki teksti käyttää tummaa väriä.

- **Keikka- ja tapahtumajulisteet:** kaksi spottiväriä painetaan edullisesti ja näyttävät harkituilta kadun toiselle puolelle.
- **Ravintolan ruokalistat:** tumma väri annoksille, vaalea paperille ja välisävy hinnoille.
- **Instagram-karusellit:** vaihda pohjaväriä dioittain, jolloin selaamiseen syntyy rytmi.
- **Pakkaukset:** yksi väri kullekin tuotesarjalle ja toinen koko valikoiman yhteiseksi.
- **Esitykset:** osioiden aloitusdiat tummalla värillä ja sisältödiat vaalealla sävyllä.
- **Käyntikortit:** kummallekin puolelle oma väri.

### Vältä

- Kaksi yhtä vaaleaa väriä
- Kolmannen värin lisääminen yhdelle painikkeelle
- Käsittelemättömät täysvärikuvat
- Vaalea teksti vaalealla värillä

### Tee näin

- Toinen selvästi tumma ja toinen vaalea
- Parin vaalennukset ja tummennukset
- Kaikki valokuvat duotoneksi kahdella värillä
- Kontrastin tarkistus kumpaankin suuntaan

Mittaa kontrasti molempiin suuntiin [värikontrastin ja saavutettavuuden oppaan](https://gradiently.design/fi/guide/color-contrast-accessibility) työkaluilla. Jos kahden värin kurinalaisuus miellyttää, sama ajattelu näkyy [minimalistisessa graafisessa suunnittelussa](https://gradiently.design/fi/guide/minimalist-design-ideas) ja voimakkaampana [rohkeassa graafisessa suunnittelussa](https://gradiently.design/fi/guide/bold-design-ideas).

## FAQ

### Mitä kaksivärinen suunnittelu tarkoittaa?

Design rakennetaan kokonaan kahdesta väristä, yleensä yhdestä tummasta ja yhdestä vaaleasta. Näiden sävyvaihtelut sallitaan, mutta kolmatta väriä ei lisätä.

### Mitkä kaksi väriä sopivat hyvin yhteen designissa?

Mikä tahansa selkeän vaaleuseron pari, kuten koboltti ja mandariini, metsänvihreä ja puuteriroosa tai muste ja voinkeltainen. Tummemman pitää näkyä vaaleamman päällä.

### Mikä ero on kaksivärisellä ja duotonella?

Kaksivärinen kuvaa koko asettelua, joka käyttää kahta väriä. Duotone kuvaa valokuvaa, jonka varjot ja valokohdat muutetaan kahdeksi väriksi.

### Miten teen duotone-kuvan CSS:llä?

Muuta kuva harmaasävyiseksi, sekoita se vaalean värin päälle asetuksella `mix-blend-mode: multiply` ja lisää tumma väri päälle asetuksella `mix-blend-mode: lighten`.

### Onko kaksivärinen painatus edullisempi?

Silkki- ja offsetpainossa vähemmän spottivärejä tarkoittaa yleensä vähemmän seuloja tai levyjä. Siksi kaksivärinen työ on tavallisesti täysväristä edullisempi.