# Väripalettigeneraattorit: näin saat toimivan paletin

[Canonical HTML page](https://gradiently.design/fi/guide/color-palette-generator)

Generaattori osaa tehdä viisi kaunista värinäytettä, mutta kertoo huonosti, mitä niillä tehdään. Hyödyllinen työ alkaa painikkeen painamisen jälkeen.

## The short version

- Väripalettigeneraattori luo värit säännöstä, satunnaissiemenestä, kuvasta tai tekstikehotteesta, mutta ei päätä kunkin värin tehtävää.
- Useimmat luodut paletit antavat väreille saman painon ja kylläisyyden, mikä näyttää hyvältä näytteissä mutta äänekkäältä suunnitelmassa.
- Käyttökelpoinen paletti tarvitsee vaalean tai tumman pohjan, tekstivärin, yhden tai kaksi pääväriä ja pienen korostuksen.
- Tarkista paletin laaja vaaleusjakauma, sillä lähellä toisiaan olevat vaaleudet sulautuvat ja epäonnistuvat kontrastitesteissä.
- Testaa luotu paletti aina oikealla asettelulla ja oikeilla sanoilla ennen sitoutumista.

**Väripalettigeneraattori** ehdottaa yhteen sopivia värejä väriteorian, sattuman, kuvan tai kirjallisen kehotteen avulla. Käytä sitä päästäksesi alkuun ja muokkaa sitten tulosta: lisää neutraali pohja ja tekstiväri, anna jokaiselle värille tehtävä ja testaa oikeassa suunnitelmassa. Generaattorin viisi näytettä ovat lähtökohta. Toimiva paletti on niistä itse muotoilemasi.

## Palettigeneraattorien päätyypit

Jokainen generaattori tekee taustalla yhtä neljästä asiasta. Tyypin tunteminen kertoo vahvuuden ja sen, mitä joudut korjaamaan.

| Tyyppi | Toiminta | Sopii | Huomioi |
| --- | --- | --- | --- |
| Harmoniaympyrä | Valitsee sävyt tietyissä kulmissa pohjasävystä: vastavärit, lähivärit, kolmisointu | Oppiminen ja olemassa olevan värin ympärille rakentaminen | Viisi yhtä kylläistä väriä näyttää keinotekoiselta |
| Satunnaistus ja lukitukset | Sekoittaa värit; lukitset mieluisat ja sekoitat uudelleen | Löytäminen ja tottumusten rikkominen | Mukavat yhdistelmät ilman rakennetta |
| Kuvasta | Poimii kuvan hallitsevat värit | Tuotteeseen, paikkaan tai kampanjakuvaan sovittaminen | Mutaiset keskisävyt ja tekstiin kelpaamattomat värit |
| Kehotteesta | Tekoäly ehdottaa värejä sanoille, kuten rauhallinen leipomo | Nopeat tunnelma- tai brändi-ideat | Suositut kliseet ja tarkistamattomat kontrastit |

Adobe Color on tunnettu harmoniaympyrä; Coolors tunnettu lukittava satunnaisgeneraattori. Useimmat työkalut yhdistävät useita tapoja.

Harmoniaympyrän säännöistä kertoo [väriharmonia](https://gradiently.design/fi/guide/color-harmony). [Väripaletti kuvasta](https://gradiently.design/fi/guide/color-palette-from-image) selittää parempien näytteiden poiminnan, ja [tekoälyn väripalettigeneraattorit](https://gradiently.design/fi/guide/ai-color-palette-generator) käsittelee kehotteita.

## Miksi luodut paletit epäonnistuvat suunnitelmissa

Generaattori näyttää värit viitenä yhtä suurena raitana. Todellisessa suunnitelmassa yksi peittää eniten tilaa, yksi kantaa sanat ja loput näkyvät pieninä määrinä. Tässä on tyypillinen satunnaistulos ja sama ajatus muokattuna.

- Punainen: #e63946
- Keltainen: #f1c40f
- Vihreä: #2ecc71
- Sininen: #3498db
- Purppura: #9b59b6

Generaattorin tulos: viisi yhtä vahvaa kylläistä sävyä. Ei tekstipohjaa, ei rauhaa eikä johtavaa väriä.

- Pohja #f7f3ec: #f7f3ec
- Muste #1c2321: #1c2321
- Pääpetrooli #2a6f68: #2a6f68
- Tukisalvia #a8c5b8: #a8c5b8
- Korallikorostus #e07a5f: #e07a5f

Muokattuna: lämmin luonnonvalkoinen pohja, lähes musta teksti kontrastilla 14,5:1, petrooli pohjaväriselle tekstille suhteessa 5,3:1, rauhallinen tuki ja yksi korostus.

## Viisi muutosta käyttökelpoiseen palettiin

1. **Säilytä se yksi mieluisa väri** Lukitse se pääväriksi. Kaikki muu tukee sitä. Jos mikään ei erotu, luo uusi tulos tyytymisen sijaan.
2. **Lisää pohja ja muste** Generaattorit sisältävät ne harvoin. Valitse vaalea pohja, lämmin tai viileä luonnonvalkoinen, tai tumma pohja ja vahvasti erottuva tekstiväri. Sävytä molempia hieman päävärillä yhdistääksesi ne.
3. **Laajenna vaaleusjakaumaa** Muuta näytteet harmaaksi mielessäsi tai näytöllä. Tarvitset vaaleaa, keskisävyistä ja tummaa, et viittä keskisävyä. Säädä vaaleutta, kunnes värit erottuvat selvästi.
4. **Vähennä kaikkien paitsi yhden kylläisyyttä** Jätä korostus kirkkaaksi ja rauhoita muut. Pääväriä pehmeämpi tukiväri saa päävärin tuntumaan rikkaammalta.
5. **Määritä osuudet** Hyvä lähtöjako on [60 30 10 -sääntö](https://gradiently.design/fi/guide/60-30-10-rule): pohja noin 60 %, pääväri noin 30 % ja korostus noin 10 %. Säädä silmämääräisesti asettelun nähtyäsi.

Tee muutokset tarkasti muodossa, joka erottaa vaaleuden sävystä. [HSL](https://gradiently.design/fi/guide/hsl-colors) on helppo lukea; [OKLCH](https://gradiently.design/fi/guide/oklch-explained) pitää vaaleuden tasaisempana eri sävyjen välillä.

## Testaa paletti oikealla asettelulla

Värinäytteet peittävät ongelmia, jotka ilmestyvät sanojen mukana. Käytä palettia oikeassa julkaisussa, ruokalistassa tai pääosiossa ja katso todellisessa näyttökoossa. Tarkista sitten jokainen tekstipari [kontrastityökalulla](https://gradiently.design/fi/guide/color-contrast-accessibility).

Instagram-pystyjulkaisu uudesta ruokalistasta rauhallisessa väriperheessä selkeällä luettavalla tekstillä

Paletti ansaitsee paikkansa oikeassa muodossa oikeilla sanoilla. Jos otsikko ei erotu, muuta palettia, älä otsikkoa.

Liukuväri on nopea lisätesti. Sekoita pohja, pääväri ja tukiväri: jos keskelle syntyy harmaata, kaksi väriä riitelee. [Mutaiset liukuvärit](https://gradiently.design/fi/guide/muddy-gradients) selittää miksi.

Muokattu paletti liukuvärinä: `linear-gradient(160deg, #f7f3ec 0%, #a8c5b8 45%, #2a6f68 85%, #1c2321 100%)`

Pohjasta salviaan, petrooliin ja musteeseen ilman harmaata väliä. Koralli jää ulos pieniksi korostuksiksi.

## Tallenna tokeneina, älä kuvakaappauksena

Kun paletti toimii, nimeä värit tehtävän, älä sävyn mukaan, jotta voit vaihtaa petroolin nimeämättä kaikkea uudelleen. Koodissa tämä tarkoittaa CSS-muuttujia, suunnittelutyökaluissa nimettyjä tyylejä ja Gradientlyssä brändipakettia, jossa paletit, fontit ja ääni elävät yhdessä ja Designer soveltaa niitä töihinsä.

```css
:root {
  --color-ground:  #f7f3ec;
  --color-ink:     #1c2321;
  --color-main:    #2a6f68;
  --color-support: #a8c5b8;
  --color-accent:  #e07a5f;
}

.button {
  background: var(--color-main);
  color: var(--color-ground);
}
```

Roolinimet kestävät brändiuudistuksen. Muuttuja --teal ei.

## Värillä hakeminen luomisen sijaan

Joskus et tarvitse viittä koodia vaan valmiin taustan tietyssä väriperheessä. Gradientlyn Markkinoilla voit hakea Markeja värisanoilla, kuten ”deep teal” tai ”warm peach”, ja suodattaa ilmettä. Jokainen Mark on elävä liukuväri- ja materiaalitausta omalla paletilla ja typografisella äänellä. Se tarkistetaan kaikkia muita vasten, jotta kaksi ei näytä samalta, ja lunastamattomalla voit suunnitella ilmaiseksi. Se on eri reitti samaan tavoitteeseen: yhteen kuuluvat värit valmiissa tehtävissään.

## FAQ

### Mikä on paras väripalettigeneraattori?

Se riippuu työskentelytavasta: harmoniaympyrät sopivat yhden värin ympärille rakentamiseen, lukittavat satunnaisgeneraattorit löytämiseen ja kuvapoiminta valokuvaan sovittamiseen. Kaikki tarvitsevat jälkimuokkausta.

### Montako väriä paletissa pitäisi olla?

Useimmille brändeille sopivat pohja, muste, yksi tai kaksi pääväriä ja korostus, yhteensä neljä tai viisi. Suurempaa määrää on vaikea pitää yhtenäisenä.

### Miksi luotu paletti näyttää huonolta suunnitelmassani?

Yleensä väreillä on samanlainen vaaleus ja kylläisyys eikä selkeitä rooleja. Lisää neutraali pohja ja tekstiväri, laajenna vaaleusjakaumaa ja pidä vain yksi kirkas korostus.

### Miten tarkistan paletin saavutettavuuden?

Testaa jokainen tekstin ja taustan pari kontrastityökalulla tavoitellen leipätekstille vähintään 4,5:1. Katso paletti harmaasävyisenä varmistaaksesi värien erottumisen.