# Tekoälyn väripalettigeneraattori: toimivat kehotteet

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

”Kiva paletti” antaa viisi kaunista väriä, muttei kerro tekstin väriä. Pyydä tehtävät, perustelut ja kontrasti, niin saat paletin, jolla voit suunnitella heti.

## The short version

- Tekoälyn väripalettigeneraattori antaa käyttökelpoisia tuloksia, kun pyydät väreille tehtävät, kuten pohjan, tekstin, korostuksen ja pinnan, pelkän heksakoodilistan sijaan.
- Paletin taustalla olevan paikan, materiaalin tai tunteen kuvaaminen tuottaa erottuvampia värejä kuin tyylin nimeäminen pastelliksi tai minimalistiseksi.
- Avustajat laskevat kontrastisuhteet usein väärin, joten tarkista itse jokainen teksti- ja taustapari kontrastityökalulla.
- WCAG edellyttää leipätekstiltä vähintään 4,5:1-kontrastisuhdetta ja suurelta tekstiltä 3:1.
- Paletti osoittaa toimivuutensa vasta oikeissa suunnitelmissa oikeassa koossa, myös tummana ja vaaleana versiona, jos tarvitset molemmat.

Osaava keskusteluavustaja toimii **tekoälyn väripalettigeneraattorina**. Kauniin listan ja käytettävän paletin ero on kehotteessa. Pyydä viidestä seitsemään väriä, joille annetaan tehtävä, kuten pohja, teksti, korostus, pinta tai reuna, sekä nimi ja heksakoodi. Kuvaile oikeaa paikkaa tai materiaalia tyylin sijaan. Tarkista sitten jokainen tekstipari kontrastityökalulla, koska avustajat kertovat usein suhteita, joita eivät laskeneet. Alla olevat kehotteet ja tarkistukset vievät noin kymmenen minuuttia.

## Miksi yleiset palettikehotteet tuottavat yleisiä paletteja

”Anna moderni pastellipaletti” pyytää mallilta tavallisinta vastausta hyvin yleiseen pyyntöön. Saat samat mintun, puuteripinkin ja lilan kuin ilmaistyökaluista. Kaksi muutosta auttaa: anna väreille tehtävät ja avustajalle jotakin täsmällistä kuviteltavaa.

### Pettymyksen tuottava kehote

- ”Kiva paletti brändilleni”
- Vain tyylisanoja: moderni, selkeä, pastelli
- Viisi heksakoodia ilman tehtäviä
- Luottaa avustajan kontrastiväitteisiin
- Arvioidaan värinäytteinä keskustelussa

### Toimiva kehote

- Yritys, yleisö ja tunnelma yhdellä rivillä
- Oikea lähde: paikka, materiaali tai vuorokaudenaika
- Jokaisella värillä tehtävä ja nimi
- Kontrasti tarkistetaan työkalulla
- Arvioidaan oikeassa julkaisussa oikeassa koossa

## Kopioitava palettikehote

```text
Luo väripaletti yritykselle [yritys yhdellä rivillä], jonka yleisö on [yleisö].
Tunnelma: [kolme sanaa]. Inspiraatio: [oikea paikka, materiaali tai hetki].
Vältä: [värit tai kliseet, joita et halua].

Palauta 6 väriä taulukkona: tehtävä, nimi, heksakoodi.
Tehtävät: pohja, tumma teksti, vaalea teksti, pääväri, säästeliäs korostus, pehmeä pinta.
Kerro sitten tekstille tarkoitetut väriparit.
Älä ilmoita kontrastisuhteita, tarkistan ne itse.
```

Viimeinen rivi estää lukujen keksimistä. Mittaat kontrastin oikein seuraavassa vaiheessa.

Inspiraatiorivi tekee tärkeimmän työn. ”Satama aamukuudelta”, ”terrakottalaatat sateen jälkeen” tai ”vanhan kirjakaupan sisätila” antavat mallille oikeita värisuhteita. Siksi ne voittavat tyylinimet. [Väripaletti kuvasta](https://gradiently.design/fi/guide/color-palette-from-image) käyttää samaa ajatusta valokuvalla sanojen sijaan.

## Käytännön esimerkki

Tällaista tulosta voit odottaa pienen kukkakaupan kehotteesta, jonka inspiraatio on ”kylmä kasvihuone varhain keväällä” ja tunnelmasanat rauhallinen, raikas ja hiljaisen ylellinen.

- Kasvihuoneen yö: #0f1f1a
- Saniaisen varjo: #1f3b32
- Varren vihreä: #4d7c66
- Leinikki: #e8a0a8
- Huurtunut lasi: #eef2ec
- Huurteinen ruutu: #c9d6cc

Pohja, tumma teksti, pääväri, korostus, vaalea teksti ja pehmeä pinta. Pinkki korostus kuuluu yhteen pieneen kohtaan suunnitelmassa.

Muuta paletti taustaksi ennen arviointia. Rivi värinäytteitä näyttää aina siistiltä. Yhdessä sekoittuvat värit paljastavat, kuuluuko perhe yhteen vai muuttuuko kohtaaminen mutaiseksi.

Kasvihuoneen yö, varren valo: `radial-gradient(circle at 80% 15%, #4d7c66 0%, #1f3b32 40%, #0f1f1a 80%)`

Tumma pohja ja oikeasta yläkulmasta valaistu päävihreä. Huurtuneen lasin värinen teksti asettuisi rauhalliseen vasempaan alakulmaan.

## Näin tarkistat paletin kontrastin oikein

Kielimallit ennustavat tekstiä, eivät laske. Malli voi väittää parin läpäisevän testin, vaikka niin ei ole. Liitä jokainen tekstipari esimerkiksi [WebAIMin kontrastityökaluun](https://webaim.org/resources/contrastchecker/) ja käytä WCAG-rajoja.

| Käyttö | WCAG AA -vähimmäisraja | Esimerkkipari paletista |
| --- | --- | --- |
| Leipäteksti ja pienet merkinnät | 4,5:1 | Huurtunut lasi `#eef2ec` Kasvihuoneen yön `#0f1f1a` päällä |
| Suuri teksti eli otsikot | 3:1 | Leinikki `#e8a0a8` Saniaisen varjon `#1f3b32` päällä |
| Kuvakkeet ja käyttöliittymän osat | 3:1 | Varren vihreä `#4d7c66` Huurtuneen lasin `#eef2ec` päällä |
| Vain koristelu | Ei vähimmäisrajaa | Huurteinen ruutu `#c9d6cc` pehmeänä pintana |

WCAG 2:n rajat. Mittaa jokainen käyttämäsi pari. Taulukko kertoo testattavat parit, ei tuloksia.

Jos pari ei läpäise testiä, pyydä avustajalta rajattu muutos: ”Tummenna tummaa tekstiväriä, kunnes se saavuttaa 4,5:1 pehmeällä pinnalla, sävyä muuttamatta.” Mittaa uudelleen. [Värikontrasti ja saavutettavuus](https://gradiently.design/fi/guide/color-contrast-accessibility) selittää suhteet. [Värisokeus suunnittelussa](https://gradiently.design/fi/guide/color-blindness-design) käsittelee kontrastin läpäiseviä mutta hämmentäviä pareja, kuten yhtä vaaleaa punaista ja vihreää.

> **Liukuvärit vaikeuttavat kontrastin arviointia** Liukuvärillä tai valokuvalla tausta vaihtuu kirjaimesta toiseen. Tarkista vaalean tekstin takaa vaalein kohta ja tumman tekstin takaa tummin, älä keskiarvoa.

## Palettia parantavat jatkokehotteet

- ”Anna vaalea versio tästä paletista samoilla tehtävillä ja samalla luonteella.”
- ”Mikä väri muistuttaa eniten kilpailijoitani? Korvaa se erottuvalla.”
- ”Kirjoita värit heksakoodin lisäksi `oklch()`-muodossa ja pidä vihreiden vaaleusvälit tasaisina.”
- ”Ehdota 60, 30, 10 -jakoa somejulkaisuun tällä paletilla.”
- ”Kirjoita näille väreille CSS-muuttujat tehtävän, ei sävyn mukaan nimettyinä.”

Viimeinen auttaa verkkotyössä: tehtävänimet (`--ground`, `--text-deep`) sallivat paletin vaihdon muuttamatta joka sääntöä. [60 30 10 -sääntö](https://gradiently.design/fi/guide/60-30-10-rule) selittää jaon, ja [OKLCH selitettynä](https://gradiently.design/fi/guide/oklch-explained) näyttää, miksi tasaiset vaaleusvälit tekevät sekoituksista puhtaampia.

```css
:root {
  --ground: #0f1f1a;
  --text-deep: #1f3b32;
  --main: #4d7c66;
  --accent: #e8a0a8;
  --text-light: #eef2ec;
  --surface-soft: #c9d6cc;
}
```

Kukkakaupan paletti CSS-muuttujina tehtävien mukaan nimettynä.

## Testaa paletti oikeissa suunnitelmissa

Paletti todistaa toimivuutensa vilkkaassa syötteessä, ei keskustelussa. Tee sillä kolme oikeaa työtä: ilmoitus, lainaus ja alejulkaisu todellisissa julkaisuko’oissa. Jos korostus leviää kaikkialle, se ei enää ole korostus.

Kukkakaupan Instagram-pystyjulkaisu kevätkukista vaalealla tekstillä syvänvihreällä taustalla

Ensimmäinen testijulkaisu: tumma pohja, vaalea teksti ja yksi värin pilkahdus.

Gradientlyssä paletit sijaitsevat brändipaketissa. Mark pitää sanat itse luettavina: rauhallisin alue siirtyy tekstin taakse ja Automaattinen muste valitsee riville vaalean tai tumman tekstin Markin omista väreistä. Sanat pysyvät luettavina joka koossa. [Väripalettigeneraattori](https://gradiently.design/fi/guide/color-palette-generator) esittelee muita kuin tekoälykeinoja, jos aloitat mieluummin käsin.

## FAQ

### Voiko ChatGPT luoda väripaletin?

Kyllä. Pyydä väreille tehtävät, nimet ja heksakoodit sekä kuvaile inspiraatioksi oikea paikka tai materiaali. Tarkista kontrasti itse, koska avustaja voi ilmoittaa laskemattomia suhteita.

### Mikä on paras kehote tekoälyn väripalettigeneraattorille?

Anna yritys, yleisö, kolme tunnelmasanaa, oikea inspiraatiolähde ja vältettävät värit. Pyydä sitten kuusi väriä taulukkona tehtävineen, nimineen ja heksakoodeineen.

### Miten tarkistan paletin saavutettavuuden?

Testaa jokainen teksti- ja taustapari kontrastityökalulla. WCAG AA edellyttää leipätekstiltä 4,5:1 ja suurelta tekstiltä sekä käyttöliittymän osilta 3:1.

### Kuinka monta väriä brändipaletissa kannattaa olla?

Viidestä seitsemään riittää useimmille: pohja, yksi tai kaksi tekstiväriä, pääväri, säästeliäs korostus ja pehmeä pinta.