# Rakenna brändille liukuväripaletti

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

Yksi hyvä liukuväri on helppo. Kuusi yhteen kuuluvaa, kaikki brändin tehtävät kattavaa ja rinnakkain toimivaa on järjestelmä. Näin rakennat sen.

## The short version

- Liukuväripaletti on pieni nimetty liukuväriperhe, joka perustuu yhteen pohjapalettiin ja muutamaan yhteiseen sääntöön.
- Useimmat brändit tarvitsevat neljästä kuuteen liukuväriä: pääkuva, syvä versio, rauhallinen vaalea, säteittäinen hohto, korostus ja rauhallinen tekstitausta.
- Liukuvärit tuntuvat samalta perheeltä, kun pohjaväri, suunta, pysäkkien paikat ja vaaleusaskelten rytmi ovat yhteisiä.
- Nimetyt CSS-mukautetut ominaisuudet pitävät liukuvärit samoina verkkosivulla, sovelluksessa ja suunnittelutiedostoissa.
- Testaa liukuväripaletti oikeissa kuvamuodoissa oikeilla sanoilla ennen brändiohjeisiin kirjaamista.

**Liukuväripaletti** on pieni nimetty liukuväriperhe yhdestä väripaletista ja muutamasta yhteisestä säännöstä, jolloin kaikki brändin liukuvärit näyttävät sukulaisilta. Aloita viidestä tai kuudesta pohjaväristä, anna jokaiselle liukuvärille tehtävä (pääkuva, syvä, rauhallinen, hohto, korostus, teksti) ja määritä sukulaisuus: sama pohja, kulma, pysäkkipaikat ja tasaiset vaaleusaskeleet. Tallenna ne nimetyiksi suunnitteluarvoiksi ja testaa oikeissa suunnitelmissa ennen muiden käyttöä.

## Miksi brändi tarvitsee useamman liukuvärin

Yksittäinen liukuväri joutuu tehtäviin, joihin se ei sovi. Lanseerausjulkaisun kirkas pääliukuväri on liian äänekäs kappaleen taakse, liian tumma vaaleaan verkkosivuosioon ja liian levoton numerodiaan. Tiimit improvisoivat, joku valitsee läheisen sinisen ja vuoden päästä brändillä on viisitoista lähes yhteensopivaa liukuväriä. Paletti estää tämän päättämällä muunnelmat etukäteen.

### Liukuvärikasa

- Jokainen tehty erikseen yhteen suunnitelmaan
- Eri kulmat joka sivulla
- Lähes brändiin sopivat värit
- Ei nimeä, joten kukaan ei osaa pyytää tiettyä
- Kopioitu silmämääräisesti vanhoista tiedostoista

### Liukuväripaletti

- Rakennettu yhdestä pohjapaletista
- Yksi suunta kaikkialla
- Tarkat heksakoodit ja pysäkkipaikat
- Nimet tehtävän mukaan: pääkuva, syvä, rauhallinen
- Tallennettu suunnitteluarvoiksi koodiin ja tiedostoihin

## Aloita pohjaväripaletista

Jokainen perheen liukuväri tehdään vain näistä väreistä tai niiden vaaleista ja tummista muunnelmista. Jos brändivärit eivät ole selvillä, aloita [brändivärien valinnasta](https://gradiently.design/fi/guide/how-to-choose-brand-colors). Hyödyllinen pohja sisältää tumman pohjavärin, kaksi tai kolme pääsävyn askelta, lähes valkoisen ja yhden korostuksen muualta ympyrältä.

- Muste: #14112b
- Yöluumu: #2e1065
- Luumu: #4c1d95
- Violetti: #7c3aed
- Orkidea: #c084fc
- Simpukka: #faf5ff
- Hiillos: #f97316

Esimerkkipohja: yksi tumma pohja, neljä violetin askelta, lähes valkoinen ja yksi lämmin korostus. Kaikki alla olevat liukuvärit käyttävät näitä seitsemää koodia.

## Anna jokaiselle liukuvärille tehtävä

Nimeä liukuvärit toiminnan, älä ulkonäön mukaan. ”Pääkuva” kestää väriuudistuksen, ”violetti auringonlasku” ei. Kuusi tehtävää kattaa lähes kaikki brändit.

| Tehtävä | Käyttö | Ero |
| --- | --- | --- |
| Pääkuva | Lanseeraukset, kannet, mieleen jäävä hetki | Koko alue tummasta vaaleaan |
| Syvä | Tummat osiot, diat, iltakampanjat | Vain kaksi tai kolme tumminta väriä |
| Rauhallinen | Vaaleat sivut, dokumentit, pitkät tekstit | Simpukka ja vaalein sävy, tuskin muutosta |
| Hohto | Tuotekuvat ja yksittäiset sanat | Säteittäinen, valo yhdessä kulmassa |
| Korostus | Painikkeet, merkit, yksi korostus suunnitelmassa | Pääsävystä korostusväriin |
| Teksti | Kappaleiden ja kuvatekstien taakse | Vähän sisäistä kontrastia, paljon tekstiin nähden |

Kuusi brändin liukuväripaletin tehtävää. Pienelle brändille riittävät aluksi pääkuva, syvä ja rauhallinen.

- Pääkuva: `linear-gradient(135deg, #14112b 0%, #4c1d95 45%, #7c3aed 75%, #c084fc 100%)`
- Syvä: `linear-gradient(135deg, #14112b 0%, #2e1065 60%, #4c1d95 100%)`
- Rauhallinen: `linear-gradient(135deg, #faf5ff 0%, #f3e8ff 60%, #e9d5ff 100%)`
- Hohto: `radial-gradient(circle at 80% 20%, #c084fc 0%, #7c3aed 30%, #14112b 75%)`
- Korostus: `linear-gradient(135deg, #7c3aed 0%, #c084fc 55%, #f97316 100%)`
- Teksti: `linear-gradient(135deg, #2e1065 0%, #14112b 100%)`

Yllä olevasta pohjasta rakennettu perhe. Sama pohja, 135 asteen kulma ja värit: kaikki sopivat vierekkäin yhdelle sivulle.

## Säännöt, jotka tekevät liukuväreistä perheen

- **Yksi pohja.** Jokainen tumma liukuväri päättyy samaan musteeseen, vaalea samaan simpukkaan. Silmä ryhmittelee ne pohjan mukaan.
- **Yksi suunta.** Valitse kulma, esimerkiksi 135 tai 160 astetta, ja pidä se. Eri kulmat saavat sivun tuntumaan sattumanvaraiselta. [Liukuvärin kulma](https://gradiently.design/fi/guide/gradient-angle) kertoo valinnasta.
- **Yhteiset pysäkit.** Käytä samoja sijainteja, esimerkiksi 0, 45, 75 ja 100 prosenttia, jotta siirtymien rytmi säilyy. [Liukuväripysäkit](https://gradiently.design/fi/guide/gradient-stops) käsittelee välejä.
- **Tasaiset vaaleusaskeleet.** Jokainen sekoituksen väri on selvästi viereistä vaaleampi tai tummempi. Epätasaiset askeleet tuottavat kirkkaan raidan keskelle.
- **Yksi säästeliäs korostus.** Korostusväri esiintyy vain yhdessä liukuvärissä. Kaikkiin levitettynä se ei enää korosta.
- **Kiinteä interpolointi koodissa.** Jos sivu sekoittaa oklch:ssa, kaikkien liukuvärien pitää, muuten samat koodit näyttävät eri osioissa erilaisilta.

## Tallenna liukuväripaletti suunnitteluarvoiksi

Pelkässä PDF:ssä elävä paletti kirjoitetaan uudelleen ja muuttuu. Tallenna kukin liukuväri kerran nimettynä mukautettuna ominaisuutena ja viittaa siihen kaikkialla. Suunnittelijat voivat liittää samat arvot tiedostoihin, ja tuleva uudistus muuttaa yhtä riviä liukuväriä kohden. [Suunnitteluarvot](https://gradiently.design/fi/guide/design-tokens) käsittelee laajempaa käytäntöä.

```css
:root {
  --ink: #14112b;
  --plum: #4c1d95;
  --violet: #7c3aed;
  --orchid: #c084fc;
  --shell: #faf5ff;
  --ember: #f97316;

  --gradient-hero: linear-gradient(135deg, var(--ink) 0%, var(--plum) 45%, var(--violet) 75%, var(--orchid) 100%);
  --gradient-deep: linear-gradient(135deg, var(--ink) 0%, #2e1065 60%, var(--plum) 100%);
  --gradient-quiet: linear-gradient(135deg, var(--shell) 0%, #f3e8ff 60%, #e9d5ff 100%);
  --gradient-glow: radial-gradient(circle at 80% 20%, var(--orchid) 0%, var(--violet) 30%, var(--ink) 75%);
  --gradient-accent: linear-gradient(135deg, var(--violet) 0%, var(--orchid) 55%, var(--ember) 100%);
  --gradient-text: linear-gradient(135deg, #2e1065 0%, var(--ink) 100%);
}

.hero { background: var(--gradient-hero); }
.section-light { background: var(--gradient-quiet); }
```

Koko perhe CSS-mukautettuina ominaisuuksina. Värit määritetään kerran ja kaikki liukuvärit rakennetaan niistä.

## Testaa oikeissa kuvamuodoissa

Värinäytteet valehtelevat. Pienenä neliönä tasapainoinen liukuväri voi asettaa kirkkaimman kaistan otsikon taakse 1080×1920-tarinassa. Tee ennen paletin julkaisua kolme oikeaa suunnitelmaa oikeilla sanoilla: pystyjulkaisu, tarina ja verkkosivun pääkuva. Tarkista tekstitaustan luettavuus [värikontrastin ja saavutettavuuden](https://gradiently.design/fi/guide/color-contrast-accessibility) avulla sekä pääkuvan ja syvän version sukulaisuus rinnakkain.

Pystysuuntainen lanseerausjulkaisu syvällä koko sävyalueen liukuväritaustalla

Pääkuvarooli 1080×1350-pystyjulkaisussa.

Pystytarina samalla otsikolla saman perheen sukulaisliukuvärin päällä

Sama perhe 1080×1920-tarinassa. Tarkista, että kirkkain kaista pysyy pois otsikon alta korkeammassa kuvassa.

Gradiently Prossa brändipaketti säilyttää väripalettisi logon ja fonttien rinnalla, ja Designer käyttää niitä uusissa suunnitelmissa. Jos pääliukuväri on tunnistettava piirteesi, [brändiliukuvärit](https://gradiently.design/fi/guide/brand-gradient-system) kertoo sen muuttamisesta tunnusmerkiksi.

## FAQ

### Mikä on liukuväripaletti?

Pieni nimetty liukuvärijoukko yhdestä väripaletista yhteisillä säännöillä, jolloin se näyttää yhdeltä perheeltä kaikkialla.

### Montako liukuväriä brändi tarvitsee?

Neljästä kuuteen kattaa useimmat tarpeet: pääkuva, syvä ja rauhallinen versio, säteittäinen hohto, korostus ja rauhallinen tekstitausta. Pieni brändi voi aloittaa kolmesta.

### Miten saan liukuvärit näyttämään yhteen kuuluvilta?

Käytä kaikissa samaa pohjaväriä, kulmaa, pysäkkipaikkoja ja tasaisia vaaleusaskeleita.

### Miten tallennan brändiliukuvärit verkkosivulle?

Määritä värit ja jokainen liukuväri kerran CSS-mukautettuina ominaisuuksina ja viittaa nimiin jokaisessa komponentissa.