# Brändin värikoodit: hex, RGB, CMYK ja Pantone talteen

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

Brändiväri pysyy yhtenäisenä vain, jos jokaisella sitä käyttävällä on oikea koodi omaan mediaansa. Tässä tyylioppaan taulukko, koodien käyttötarkoitukset ja määritysjärjestys.

## The short version

- Brändin värikoodien pitäisi antaa jokainen väri neljässä muodossa: hex verkkoon, RGB näytöille, CMYK painoon ja Pantone-viite spottiväreihin sekä fyysisiin tuotteisiin.
- Jokainen tyylioppaan väri tarvitsee myös nimen, roolin ja hyväksytyt tekstiyhdistelmät kontrastisuhteineen.
- Hex ja RGB kuvaavat täsmälleen samaa näyttöväriä, joten muunnos on tarkka. CMYK- ja Pantone-arvot tarvitsevat värihallitun muunnoksen ja painetun tarkistuksen.
- Jos brändi esiintyy enimmäkseen painotuotteissa tai tuotteissa, valitse Pantone-viite ensin ja sovita näyttökoodit siihen.
- Nimeä värit roolin mukaan, kuten pääväri tai muste, jotta opas pysyy ymmärrettävänä myöhemmän sävymuutoksen jälkeenkin.

**Brändin värikoodit** kuuluvat tyylioppaan yhteen taulukkoon, jossa jokaisella värillä on oma rivi ja jokaisella medialla sarake: hex verkkosivuille, RGB näytöille ja videoon, CMYK painoon ja Pantone-viite spottiväreihin, kyltteihin ja oheistuotteisiin. Lisää nimi, rooli ja hyväksytyt tekstiyhdistelmät, niin kehittäjä tai kyltintekijä voi toistaa värin arvaamatta. Useimmat epäjohdonmukaisuudet syntyvät itse keksityistä muunnoksista, koska opas antoi vain yhden koodin.

## Brändivärien kooditaulukko

Tässä valmis esimerkki kuvitteelliselle brändille, jolla on punainen pääväri, sininen toissijainen väri, muste ja kaksi neutraalia. Kopioi rakenne ja korvaa arvot omillasi.

| Nimi ja rooli | Hex | RGB | CMYK | Pantone |
| --- | --- | --- | --- | --- |
| Huomiopunainen, pääväri | `#C8102E` | 200 16 46 | 0 92 77 22 | 186 C |
| Satamansininen, toissijainen | `#0047BB` | 0 71 187 | 100 62 0 27 | 2728 C |
| Muste, teksti | `#101820` | 16 24 32 | Painon antama syvämusta | Black 6 C |
| Usva, neutraali | `#D9D9D6` | 217 217 214 | 0 0 1 15 | Cool Gray 1 C |
| Paperi, tausta | `#F5F3EE` | 245 243 238 | 0 1 3 4 | Painamaton paperi |

Tyylioppaan väritaulukko. CMYK-luvut ovat esimerkin yksinkertaisia laskennallisia muunnoksia. Korvaa ne painon värihallitulla muunnoksella antamilla arvoilla.

- Huomiopunainen: #c8102e
- Satamansininen: #0047bb
- Muste: #101820
- Usva: #d9d9d6
- Paperi: #f5f3ee

Samat viisi väriä näytteinä. Oppaan pitäisi aina näyttää väri koodien vieressä, jotta väärä numero erottuu.

## Mihin kukin värikoodi on tarkoitettu

- **Hex** (`#C8102E`) on verkon lyhyt tapa kirjoittaa RGB-väri. Kehittäjät, Figma ja useimmat suunnittelutyökalut käyttävät sitä. [Hex-värikoodit](https://gradiently.design/fi/guide/color-codes-explained) selittää lukutavan.
- **RGB** (200 16 46) on sama väri punaisen, vihreän ja sinisen arvoina 0-255. Videoeditorit ja osa sovelluksista pyytävät sitä. Hexin ja RGB:n muunnos on tarkka. Katso [hex RGB:ksi](https://gradiently.design/fi/guide/hex-to-rgb).
- **CMYK** (0 92 77 22) on syaanin, magentan, keltaisen ja mustan painovärin sekoitus neliväripainoon. Se riippuu painokoneesta ja paperista, joten arvon pitäisi tulla painolta tai värihallitusta muunnoksesta.
- **Pantone** (186 C) nimeää fyysisen väriviuhkan esisekoitetun spottivärin. Se on luotettavin tapa saada sama väri käyntikortteihin, kyltteihin, kankaaseen ja pakkauksiin. Loppukirjain on tärkeä: C on päällystetty paperi, U päällystämätön.
- **Valinnaiset oklch- tai HSL-arvot** auttavat verkkotiimejä rakentamaan vaaleita sävyjä ja tumman tilan versioita. Lisää ne, jos kehittäjät työskentelevät näin.

> **Kaikkia näyttövärejä ei voi painaa** Hyvin kylläiset siniset, vihreät ja oranssit ovat CMYK-painovärien toistoalueen ulkopuolella. Jos brändivärisi on tällainen, päätä nyt, käytetäänkö painossa Pantone-spottiväriä vai hieman himmeämpää CMYK-versiota, ja kirjaa päätös. [RGB ja CMYK](https://gradiently.design/fi/guide/rgb-vs-cmyk) näyttää syyn.

## Näin määrität brändisi värikoodit

1. **Päätä päämedia** Jos brändi elää enimmäkseen näytöllä, aloita hexistä. Jos se elää pakkauksissa, univormuissa tai kylteissä, aloita fyysisestä Pantone-näytteestä ja sovita näyttöväri siihen.
2. **Valitse Pantone-vastaavuus paikan päällä** Katso aitoa Pantone-opasta päivänvalossa, älä näyttöesikatselua. Valitse lähimmät päällystetyn ja päällystämättömän paperin näytteet ja kirjaa molemmat.
3. **Hanki CMYK painolta** Lähetä hex- ja Pantone-viite, pyydä painon värihallitut CMYK-arvot ja hyväksy painettu vedos.
4. **Vahvista näyttöarvot viimeiseksi** Säädä hexiä, jotta se näyttää painetulta näytteeltä muutamalla kalibroidulla näytöllä. Hex ja RGB vastaavat sitten toisiaan täsmälleen.
5. **Kirjaa hyväksytyt yhdistelmät** Listaa, mitä värejä saa asettaa minkä päälle, kontrastisuhteineen. Silloin kukaan ei laita punaista tekstiä laivastonsiniselle.

[Pantone ja hex](https://gradiently.design/fi/guide/pantone-colors) käsittelee sovittamista tarkemmin ja selittää, miksi Pantone-näytteen näyttöesikatselu ei ole koskaan aivan oikea.

## Kirjaa sallitut yhdistelmät ja kontrasti

Koodit kertovat, miten väri tehdään. Yhdistelmät kertovat, miten sitä käytetään. Lyhyt kontrastitaulukko estää tavallisimman virheen: kaksi vahvalta näyttävää brändiväriä yhdistetään, mutta ne eivät toimi tekstinä ja taustana.

| Teksti | Tausta | Kontrasti | Käyttö |
| --- | --- | --- | --- |
| Valkoinen | Huomiopunainen | 5,9:1 | Painikkeet ja bannerit, kaikki koot |
| Valkoinen | Satamansininen | 8,0:1 | Kaikki koot |
| Muste | Paperi | 16,1:1 | Leipäteksti |
| Huomiopunainen | Paperi | 5,3:1 | Otsikot ja linkit |
| Huomiopunainen | Muste | 3,0:1 | Vain suuri otsikkoteksti |

Kontrastisuhteet WCAG-kaavalla laskettuina. Leipäteksti tarvitsee vähintään 4,5:1, suuri teksti 3:1.

Lukujen taustalla olevan menetelmän löydät oppaasta [värikontrasti ja saavutettavuus](https://gradiently.design/fi/guide/color-contrast-accessibility).

## Värikoodien jakaminen kehittäjille

Anna kehittäjille värit nimettyinä tokeneina, älä uudelleen kirjoitettavana PDF:nä. Roolinimet pitävät koodin luettavana ja kestävät sävyn muutoksen.

```css
:root {
  --brand-primary: #c8102e;   /* Signal red, Pantone 186 C */
  --brand-secondary: #0047bb; /* Harbour blue, Pantone 2728 C */
  --brand-ink: #101820;       /* Ink, Pantone Black 6 C */
  --brand-mist: #d9d9d6;      /* Mist, Pantone Cool Gray 1 C */
  --brand-paper: #f5f3ee;     /* Paper */
}
```

Sama taulukko CSS:n mukautettuina ominaisuuksina, Pantone-viite säilytettynä kommentissa sitä tarvitseville.

### Vältä

- Yksi hex-koodi eikä muuta
- Värinimet ”punainen 2” ja ”uusi sininen”
- Verkkomuuntimesta kopioitu CMYK
- Näyttöesikatselusta valittu Pantone

### Tee näin

- Hex, RGB, CMYK ja Pantone jokaiselle värille
- Nimet, jotka kertovat värin käyttötarkoituksen
- Painon antama CMYK tarkistettuna vedoksessa
- Fyysisestä oppaasta valittu Pantone

## Pidä koodit siellä, missä suunnitellaan

PDF:n väritaulukko auttaa vain, jos se avataan. Laita sama paletti kaikkiin todellisiin suunnittelupaikkoihin. Gradientlyn Pro-tilauksen brändipaketti pitää väripaletit logojen ja fonttien rinnalla. Designer käyttää niitä suunnitelman asettelussa, joten oikeat koodit kulkevat jokaisessa postauksessa. Oppaan muita osia typografiasta äänensävyyn käsittelee [brändin tyyliopas](https://gradiently.design/fi/guide/brand-style-guide).

## FAQ

### Mitkä värikoodit brändin tyylioppaassa pitäisi olla?

Jokaisen värin hex, RGB, CMYK ja Pantone-viite sekä nimi, rooli ja hyväksytyt tekstiyhdistelmät kontrastisuhteineen.

### Onko hex sama kuin RGB?

Kyllä. Hex on RGB kirjoitettuna kuusitoistajärjestelmässä, joten `#C8102E` ja 200 16 46 ovat täsmälleen sama väri.

### Miten muunnan hex-värin CMYK:ksi?

Verkkomuuntimet antavat karkean lähtökohdan, mutta CMYK riippuu painokoneesta ja paperista. Pyydä painolta värihallittu muunnos ja hyväksy painettu vedos.

### Tarvitseeko brändini Pantone-värin?

Jos brändi näkyy kylteissä, pakkauksissa, vaatteissa tai oheistuotteissa, kyllä. Pantone-viite on luotettavin tapa saada sama väri eri materiaaleihin.

### Mitä C tai U Pantone-numeron jälkeen tarkoittaa?

C tarkoittaa päällystettyä paperia, U päällystämätöntä. Sama painoväri näyttää erilaiselta niissä, joten kirjaa molemmat, jos painat molemmille.