# Valkoinen tausta: milloin tyhjä tila toimii parhaiten

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

Valkoinen tausta on suunnittelun tavallisin valinta ja yllättävän helppo pilata. Näin valitset oikean valkoisen ja teet tyhjästä tilasta tarkoituksellista.

## The short version

- Valkoinen tausta toimii parhaiten, kun sisältö on pääasia: tuotekuva, pitkä teksti, hinnasto tai yksi vahva otsikko.
- Puhdas valkoinen #ffffff rasittaa silmiä pitkään näytöltä luettaessa, joten harkituissa ulkoasuissa käytetään yleensä hieman lämmintä tai viileää valkoista.
- Mustan tekstin ja valkoisen taustan kontrasti on erittäin suuri, joten pehmeämpi lähes musta sävy, kuten #1c1917, on yhä helppo lukea.
- Tyhjä tila näyttää harkitulta vain, kun sitä on reilusti ja johdonmukaisesti; ahdas valkoinen sommittelu vaikuttaa keskeneräiseltä.
- Yksi hillitty yksityiskohta, kuten hieno rakeisuus, ohut viiva tai pehmeä kulmavalo, estää valkoista taustaa näyttämästä tyhjältä tiedostolta.

**Valkoinen tausta** on paras valinta, kun sen päällä oleva sisältö ansaitsee kaiken huomion: tuote, valokuva, pitkä kappale tai yksi vaikuttava lause. Oletusvalintana valkoinen voi näyttää sivulta, jota kukaan ei viimeistellyt. Ero syntyy kolmesta päätöksestä: valkoisen sävystä, tilan määrästä ja yhdestä pienestä yksityiskohdasta, joka kertoo tyhjyyden olevan tarkoituksellista.

## Milloin valkoinen tausta on oikea valinta

Valkoisella ei ole omaa tunnelmaa, ja juuri siinä on sen vahvuus. Se antaa sisällölle tilaa. Siksi se sopii luonnostaan sisällölle, jolla on oma väri tai tekstuuri, mutta heikosti sisällölle, joka tarvitsee tunnelmaa tuekseen.

### Valkoinen sopii näihin

- Tuotekuvat, joissa värien tarkkuus on tärkeää
- Pitkät tekstit: artikkelit, ruokalistat, ehdot ja raportit
- Yksi vahva otsikko ilman muuta sisältöä
- Hinnastot ja vertailutaulukot
- Hillityt ja selkeät brändit

### Valkoinen toimii heikommin näissä

- Iltatapahtumat, musiikki ja yöelämä
- Vaaleat kuvat, jotka sulautuvat sivuun
- Syötteet, joissa jokainen kilpailija käyttää jo valkoista
- Lyhyet julkaisut, joiden sisältö ei täytä tilaa
- Ulkoasut, jotka tarvitsevat lämpöä tai dramatiikkaa

Jos ulkoasusi kuuluu taulukon oikealle puolelle, pehmeä väripohja tai hillitty liukuväri palvelee sitä yleensä paremmin. [Minimalistiset taustat](https://gradiently.design/fi/guide/minimalist-backgrounds) esittelee rauhallisia vaihtoehtoja valkoiselle, ja [tumman tilan suunnittelu](https://gradiently.design/fi/guide/dark-mode-design) käsittelee toista ääripäätä.

## Valitse sävytetty valkoinen

Puhdas `#ffffff` on kirkkain väri, jonka näyttö voi esittää. Valokuvan taustana se toimii, mutta kahden minuutin lukemiseen se on häikäisevä. Hieman sävytetty valkoinen laskee kirkkautta ja antaa sivulle lämpötilan. Lämpimät valkoiset tuntuvat painetuilta, rauhallisilta ja inhimillisiltä. Viileät valkoiset ovat kliinisiä, teknisiä ja täsmällisiä. Valitse myymääsi tuotteeseen sopiva sävy.

- Puhdas valkoinen: #ffffff
- Paperi: #faf7f2
- Pellava: #f7f1e8
- Kaura: #f5f0eb
- Pilvi: #f4f6f8
- Usva: #f1f5f4
- Lämmin muste: #1c1917

Viisi sävytettyä valkoista puhtaan valkoisen rinnalla sekä lämmin lähes musta tekstisävy. Pienissä näytteissä erot ovat vähäisiä, koko sivulla selviä.

| Valkoinen | Hex | Tunnelma | Käyttökohde |
| --- | --- | --- | --- |
| Puhdas valkoinen | `#ffffff` | Kirkas, neutraali | Syvätyt tuotekuvat, verkkokaupan tuotesivut |
| Paperi | `#faf7f2` | Painettu, rauhallinen | Julkaisut, uutiskirjeet, ruokalistat |
| Pellava | `#f7f1e8` | Lämmin, käsintehty | Leipomot, kukkakaupat, paperituotteet |
| Pilvi | `#f4f6f8` | Viileä, täsmällinen | Ohjelmistot, rahoitus, klinikat |
| Usva | `#f1f5f4` | Raikas, puhdas | Ihonhoito, hyvinvointi, hammashoito |

Valitse valkoinen lämpötilan mukaan ja käytä sitä kaikkialla. Verkkosivu, esitys ja julkaisu kolmessa eri valkoisessa näyttävät kolmelta eri brändiltä.

## Anna sanoille tilaa

Tyhjä tila ei ole vain ylijäämää. Se on sommittelupäätös, joka näyttää harkitulta vain, jos tilaa on reilusti. Käytännön sääntö: jätä marginaaliksi vähintään 8 prosenttia lyhyemmästä sivusta eli 86 px koossa 1080×1350. Jätä ryhmien väliin enemmän tilaa kuin niiden sisälle. Otsikko, lyhyt rivi sen alla ja pieni yksityiskohta alareunassa riittävät yhteen julkaisuun.

Rauhallinen pystyjulkaisu, jonka lyhyt otsikko on keskellä runsasta tyhjää tilaa

Yksi rivi, pieni yläotsikko ja hillitty yksityiskohta. Tila välittää yhtä paljon merkitystä kuin sanat.

Aukioloaikoja esittävä pystyjulkaisu, jossa lyhyttä tekstiryhmää ympäröivät leveät marginaalit

Myös käytännöllinen julkaisu näyttää rauhalliselta, kun marginaalit ovat leveät ja teksti maltillisen kokoista.

Hierarkia on valkoisella erityisen tärkeää, koska väri ei ohjaa katsetta. Järjestä sanat koon ja vahvuuden avulla, kuten [visuaalisen hierarkian oppaassa](https://gradiently.design/fi/guide/visual-hierarchy) neuvotaan, ja käytä mahdollisuuksien mukaan yhtä kirjasinperhettä.

## Tekstin väri valkoisella taustalla

Puhdas musta puhtaalla valkoisella tuottaa näytön suurimman kontrastin. Lukeminen ei tarvitse niin suurta eroa, ja vaikutelma voi olla kova. Taustan lämpötilaa toistava lähes musta, kuten `#1c1917` lämpimällä valkoisella tai `#0f172a` viileällä, ylittää silti saavutettavuuden raja-arvot reilusti. Leipätekstin kontrastisuhteen on oltava vähintään 4,5:1. [Värikontrasti ja saavutettavuus](https://gradiently.design/fi/guide/color-contrast-accessibility) kertoo, miten tarkistat sen.

> **Vaaleanharmaa teksti on klassinen virhe** Harmaa teksti sävytetyllä valkoisella näyttää suunnittelutiedostossa tyylikkäältä, mutta katoaa puhelimesta auringonvalossa. Pidä tärkeät rivit tummina. Rauhoita toissijaista tekstiä koolla, älä vaaleudella.

## Viimeistele valkoinen tausta

Valkoinen voi näyttää valitun taustan sijaan tyhjältä työpohjalta. Yksi hillitty yksityiskohta riittää korjaamaan vaikutelman. Valitse yksi näistä, älä kaikkia.

- **Hieno rakeisuus** hyvin pienellä voimakkuudella saa valkoisen tuntumaan pinnalta. Katso [rakeinen tekstuuri](https://gradiently.design/fi/guide/textured-background).
- **Pehmeä kulmavalo**: lämmin valkoinen häipyy yhdessä kulmassa hieman syvemmäksi kermansävyksi.
- **Hiuksenhieno viiva** tai muutaman pikselin levyinen reunus tekstin värissä.
- **Yksi korostusväri** kerran käytettynä hinnassa, päivämäärässä tai painikkeessa.
- **Paperin tuntu** painotuotteita tai käsityötä painottaville brändeille. [Paperitekstuuri](https://gradiently.design/fi/guide/paper-texture-background) näyttää keinot.

- Paperi ja lämmin kulma: `radial-gradient(circle at 85% 10%, #fde9d4 0%, #faf7f2 45%, #f7f1e8 100%)`
- Valkoisesta pilveen: `linear-gradient(180deg, #ffffff 0%, #f4f6f8 100%)`
- Usva ja ylävalo: `radial-gradient(ellipse at 50% 0%, #ffffff 0%, #f1f5f4 70%, #e6efec 100%)`

Kolme valkoista, jotka ovat hädin tuskin liukuvärejä. Puhelimella ne näyttävät syviltä valkoisilta pinnoilta, eivät värillisiltä.

## Valkoinen tausta CSS:llä

Määritä verkkosivun sävytetty valkoinen kerran muuttujaksi, jotta jokainen osio käyttää sitä. Sovita myös kuvien taustat siihen, etteivät puhtaan valkoiset tuotekuvat näytä laatikoilta paperinvärisellä sivulla.

```css
:root {
  --paper: #faf7f2;
  --ink: #1c1917;
  --rule: #e7e1d8;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
}

/* Product photos shot on pure white: blend them into the paper */
.product img {
  mix-blend-mode: multiply;
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
}
```

`mix-blend-mode: multiply` saa tuotekuvan ympärillä olevan valkoisen mukautumaan sivun väriin, jolloin syvätyt kuvat asettuvat luontevasti sävytetylle valkoiselle.

Jos haluat valkoiseen ilmeeseen hieman enemmän luonnetta, aloita Gradientlyn vaaleista Markeista. Niissä pehmeään, vaaleaan pohjaan yhdistyvät aito materiaali ja valo. Rauhallisin alue siirtyy sanojen taakse, ja **Automaattinen muste** pitää jokaisen rivin tarpeeksi tummana luettavaksi. Voit suunnitella ilmaiseksi millä tahansa lunastamattomalla Markilla. Lunasta mieleisesi, kun olet valmis viemään työn.

## FAQ

### Mikä on paras sävytetyn valkoisen värikoodi taustalle?

Lämmin paperinvalkoinen, kuten `#faf7f2`, sopii useimmille julkaisu- ja lifestylebrändeille. Viileä valkoinen, kuten `#f4f6f8`, sopii ohjelmistoille ja kliinisille brändeille. Valitse yksi ja käytä sitä kaikkialla.

### Onko puhdas valkoinen huono verkkosivuille?

Ei huono, mutta kirkas. Puhdas valkoinen sopii syvättyjen tuotekuvien taakse. Pitkään lukemiseen hieman sävytetty valkoinen on silmille lempeämpi.

### Minkävärinen teksti näyttää parhaalta valkoisella taustalla?

Lähes musta, kuten `#1c1917` tai `#0f172a`. Se näyttää mustalta, pitää kontrastin selvästi yli suhteen 4,5:1 ja tuntuu pehmeämmältä kuin puhdas musta.

### Miten teen valkoisesta taustasta kiinnostavamman?

Lisää yksi hillitty yksityiskohta: hienoa rakeisuutta, pehmeä kulmavalo, ohut viiva tai yksi korostusväri. Jätä reilut marginaalit, jotta tila näyttää harkitulta.

### Miksi tuotekuvani näyttävät laatikoilta sävytetyllä valkoisella sivulla?

Kuvat on otettu puhtaalla valkoisella taustalla. Käytä kuvissa asetusta `mix-blend-mode: multiply` tai vie ne läpinäkyvällä taustalla.