# Brändin liukuväri: tee yhdestä liu’usta tunnusilme

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

Jotkin brändit tunnistaa värin kulmasta jo ennen logoa. Se ei ole sattumaa. Näin rakennat brändin liukuväristä tunnusilmeen pelkän koristeen sijaan.

## The short version

- Brändin liukuväri toimii tunnusilmeenä vain, kun se erottuu, määritellään tarkasti ja sitä käytetään samalla tavalla kaikissa kosketuspisteissä.
- Brändin liukuvärin täydellinen määrittely kattaa pohjavärin, väriperheen, valon suunnan, pintarakenteen, rakeisuuden ja mahdollisen liikkeen.
- Jokainen brändin liukuväri tarvitsee tasaisen varavärin pieniin kokoihin, yksiväripainatukseen ja kirjontaan.
- Tunnistettavuus syntyy toistosta, joten tunnusliukuvärin tulee esiintyä samassa tehtävässä ja suunnilleen samassa määrin julkaisuissa, dioissa ja pakkauksissa.
- Liukuvärien oikeudellinen suojaaminen on vaikeaa, joten erottuvuus ja johdonmukainen käyttö merkitsevät enemmän kuin yksittäinen värivalinta.

**Brändin liukuväri** muuttuu tunnusilmeeksi, kun kolme ehtoa täyttyy: se ei näytä kenenkään muun liukuväriltä, se on määritelty niin tarkasti, että jokainen suunnittelija toistaa sen samalla tavalla, ja se esiintyy aina samassa tehtävässä. Useimmat brändiliukuvärit epäonnistuvat ensimmäisessä kohdassa, koska lähtökohtana on suosittu valmis asetus. Loput kaatuvat toiseen, koska ne ovat yksi viety kuva reseptin sijaan. Rakenna tunnusmerkki harkiten, niin se voi toimia logon tavoin huoneen toiselta puolelta.

## Mikä erottaa tunnusilmeen kauniista liukuväristä

### Koriste

- Violetista pinkkiin, koska se näytti hyvältä
- Rakennetaan silmämääräisesti joka suunnitelmaan
- Kulma ja värit vaihtelevat suunnittelijan mukaan
- Käytetään kaikkialla, joten se ei merkitse mitään
- Hajoaa sivustokuvakkeena ja yksiväripainossa

### Tunnusilme

- Värialue, jota kilpailijat eivät käytä
- Yksi kirjattu resepti, tallennettuna tokeneiksi
- Valo tulee aina samasta suunnasta
- Varattu tiettyihin hetkiin, joten se huomataan
- Suunniteltu tasainen varaversio

Laajemmat perusteet visuaalisten tunnusmerkkien hallinnalle löydät oppaasta [erottuvat brändin tunnusmerkit](https://gradiently.design/fi/guide/distinctive-brand-assets). Tässä artikkelissa keskitytään käytännön rakentamiseen.

## Näin luot brändin liukuvärin vaiheittain

1. **Kartoita toimiala** Ota kuvakaappauksia kymmenen kilpailijan syötteistä, sivustoista ja pakkauksista. Aseta ne rinnakkain ja huomaa toistuvat sävyt ja sekoitukset. Oman liukuvärisi pitäisi sijoittua kohtaan, joka tällä seinällä on tyhjä.
2. **Valitse pohja** Päätä ensin, onko pohja tumma vai vaalea. Syvä pohja saa värin hehkumaan ja tuntuu laadukkaalta, lämmin luonnonvalkoinen taas painetulta ja rauhalliselta. Pohja kantaa tunnelmaa enemmän kuin tehoste.
3. **Valitse pieni väriperhe** Kolmesta viiteen läheistä väriä ja enintään yksi tehoste. Lähisävyt sekoittuvat siististi, vastavärit muuttuvat harmaiksi, kuten [sameat liukuvärit](https://gradiently.design/fi/guide/muddy-gradients) selittää.
4. **Päätä valon suunta** Hehku yhden alakulman lähellä, nauha ylhäällä tai valoläikkä keskuksen takana. Vakioitu valonlähde tekee liukuväristä tunnistettavan myös rajattuna.
5. **Lisää pinta** Rakeisuutta, paperia, silkkiä tai lasia. Materiaali erottaa liukuvärisi näytön oletusilmeestä. [Liukuvärin tekstuuri](https://gradiently.design/fi/guide/gradient-texture) vertailee vaihtoehtoja.
6. **Testaa tunnistettavuus** Tee viisi suunnitelmaa, peitä logot ja näytä ne brändin tuntevalle ihmiselle. Jos hän osaa nimetä sen pelkän värin perusteella, ilme toimii.

Kuparivalo syvällä petroolilla: `radial-gradient(circle at 20% 85%, #f59e0b 0%, #b45309 18%, #134e4a 55%, #042f2e 100%)`

Esimerkkitunnusilme: syvä petroolipohja, jota kuparivalo valaisee vasemmalta alhaalta. Petrooli ja kupari ovat lämmöltään riittävän läheisiä sekoittuakseen ruskean kautta harmaan sijaan. Kulmavalo on se osa, jonka ihmiset muistavat.

## Kirjaa resepti, älä vain värejä

Pelkät heksakoodit eivät määrittele liukuväriä. Kaksi suunnittelijaa saa samoista neljästä väristä kaksi eri tulosta, sillä väripisteiden sijainnit, suunta ja tekstuuri luovat luonteen. Kirjoita määrittely, jota uusi tekijä voi noudattaa kysymättä sinulta.

| Osa | Esimerkkimäärittely |
| --- | --- |
| Pohja | Syvä petrooli `#042f2e`, vähintään puolet pinta-alasta |
| Väriperhe | `#134e4a` petrooli, `#b45309` kupari, `#f59e0b` meripihka |
| Valo | Säteittäinen, keskus vasemmalla alhaalla, ei koskaan otsikon takana |
| Väripisteet | 0%, 18%, 55%, 100% |
| Pinta | Hieno yksivärinen rakeisuus, juuri havaittavissa täydessä koossa |
| Liike | Valo lipuu hitaasti alareunaa pitkin toistuvana silmukkana |
| Varaversio | Tasainen syvä petrooli ja kupari ainoana tehosteena |

Yhden sivun määrittely brändin liukuvärille. Lisää se [brändin tyylioppaaseen](https://gradiently.design/fi/guide/brand-style-guide) ja tallenna arvot koodiksi.

## Suunnittele tasainen varaversio

Liukuväri katoaa sivustokuvakkeen koossa, yksiväripainossa, kirjonnassa ja joissakin sähköpostiohjelmissa. Valitse tasaiset versiot nyt, jotta toimittajat eivät joudu arvaamaan. Yleensä pääväriksi tulee pohjaväri ja ainoaksi tehosteeksi kirkkain valon väri.

- Pohja, tasainen pääväri: #042f2e
- Valo, tasainen tehoste: #f59e0b
- Petrooli, toissijainen: #134e4a
- Paperi, tekstille: #fdf6ec

Tasainen paletti korvaa liukuvärin sivustokuvakkeessa, leimassa, työasussa tai pelkän tekstin sähköpostissa.

## Käytä sitä samassa tehtävässä kaikkialla

Tunnistettavuus rakentuu toistosta samassa tehtävässä. Päätä, missä brändin liukuväri esiintyy: ehkä kansissa, lanseerauksissa ja jokaisen diaesityksen alussa, kun tasaiset värit hoitavat arjen. Kaikkialla käytetty tunnusilme muuttuu tapetiksi. [Brändin yhtenäisyys](https://gradiently.design/fi/guide/brand-consistency) kertoo lisää säännöistä, joita tiimit oikeasti noudattavat.

- Tarina 1080×1920: 1080 × 1920
- Julkaisu 1080×1350: 1080 × 1350
- LinkedIn-banneri 1584×396: 1584 × 396
- Dia 1920×1080: 1920 × 1080
- Käyntikortti 1050×600: 1050 × 600

Viisi kosketuspistettä hyvin erilaisissa muodoissa. Kulmavalon pitää osua kussakin samaan suhteelliseen paikkaan. Siksi liukuväri renderöidään muodon mukaan yhden kuvan rajaamisen sijaan.

## Brändin liukuvärin suojaaminen

Värejä ja liukuvärejä on vaikea suojata lailla. Yksityiskohdat riippuvat maasta sekä pitkästä, todennetusta käytöstä. [Voiko liukuvärillä olla tekijänoikeussuoja](https://gradiently.design/fi/guide/can-you-copyright-a-gradient) kuvaa yleisen tilanteen antamatta oikeudellisia neuvoja. Käytännössä useimpien brändien suoja on erottuvuus ja johdonmukaisuus: ilme liittyy sinuun niin vahvasti, että kopiointi vain muistuttaisi ihmisiä sinusta.

Gradiently rakennettiin tätä aukkoa varten. Mark on valmis värien, materiaalien, valon, rakeisuuden ja liikkeen resepti. Sitä verrataan kaikkiin muihin Markeihin, eikä liian samanlaista hyväksytä. Sillä on täsmälleen yksi omistaja kerrallaan. Lunastaminen lisää nimesi sen julkiseen tietueeseen numeroidun todistuksen kanssa, ja vain sinä voit viedä sillä tehtyjä suunnitelmia. Se on rekisterimerkintä, ei tavaramerkki, mutta tunnusilmeesi ei voi ilmestyä kilpailijan syötteeseen samalla työkalulla tehtynä.

Pystyjulkaisu, jossa on yksi lyhyt lause erottuvalla, valaistulla liukuväritaustalla

Brändin liukuväri tehtävässään: väri ja valo kantavat identiteettiä, joten sanat voivat pysyä lyhyinä.

## FAQ

### Mikä on brändin liukuväri?

Liukuväri, jota brändi käyttää johdonmukaisesti osana identiteettiään. Se määritellään tarkasti, jotta sen voi toistaa samanlaisena kaikkialla.

### Miten luon brändilleni tunnistettavan liukuvärin?

Etsi värialue, jota kilpailijat eivät käytä, valitse pohja ja pieni väriperhe, määritä valon suunta, lisää pintatekstuuri ja testaa, tunnistavatko ihmiset sen ilman logoa.

### Mitä brändin liukuväriohjeisiin kuuluu?

Pohjaväri, väriperhe heksakoodeineen, väripisteiden sijainnit, valon suunta, tekstuuri, mahdollinen liike ja tasainen varaväri.

### Voinko rekisteröidä brändin liukuvärin tavaramerkiksi?

Värien ja liukuvärien oikeudellinen suoja on vaikea ja riippuu maasta sekä todennetusta käytöstä, joten kysy tavaramerkkijuristilta. Useimmat brändit luottavat erottuvaan, johdonmukaiseen käyttöön.

### Tarvitseeko brändin liukuväri tasaisen version?

Kyllä. Sivustokuvakkeet, yksiväripaino, kirjonta ja jotkin sähköpostiohjelmat eivät voi näyttää liukuväriä, joten suunnittele tasaiset värit etukäteen.