# Pantone ja hex: brändivärit painossa ja näytöllä

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

Brändivärin pitää toimia käyntikortissa, liikekyltissä, verkkosivulla ja Instagram-tarinassa. Pantone ja hex ratkaisevat kumpikin osan tehtävästä. Näin saat ne sopimaan yhteen.

## The short version

- Pantone ja hex eroavat esitystavassaan: Pantone-väri on tietty esisekoitettu painomuste, hex-koodi taas näyttöjen RGB-väri.
- Pantone-värit painetaan spottiväreinä, yksi täsmällinen muste kutakin väriä kohti. Tavallisessa painatuksessa värit rakennetaan neljästä CMYK-prosessiväristä.
- Pantone julkaisee väriensä RGB-, hex- ja CMYK-vastineet, mutta ne ovat likiarvoja. Joitakin Pantone-musteita ei voi toistaa täsmälleen näytöllä tai CMYK-väreillä.
- Sama Pantone-numero näyttää erilaiselta päällystetyllä ja päällystämättömällä paperilla. Siksi koodin lopussa on C tai U.
- Täydellinen brändivärin määrittely sisältää Pantone-viitteen, CMYK-arvot, RGB-arvon ja hex-koodin. Jokainen tarkistetaan silmämääräisesti, ei pelkällä muunnoksella.

**Pantone ja hex** tarkoittavat pohjimmiltaan mustetta ja valoa. Pantone-väri on numeroitu, esisekoitettu painomuste, jota voit katsella fyysisenä värinäytteenä. Hex-koodi, kuten `#1d4ed8`, määrittää punaisen, vihreän ja sinisen määrät ja kertoo näytölle, kuinka paljon valoa sen pitää tuottaa. Kumpikaan ei muunnu täydellisesti toiseksi. Pantonen julkaisemat hex- ja CMYK-vastineet ovat hyödyllisiä lähtökohtia. Kaikkialla oikealta näyttävä brändi valitsee silti jokaisen version silmämääräisesti ja kirjaa ne kaikki talteen.

## Mikä Pantone-väri oikeastaan on

Pantone Matching System on luettelo vakioiduista musteresepteistä, joilla kullakin on numero. Painotalo voi missä tahansa sekoittaa saman reseptin ja saada toleranssien rajoissa saman värin. Pääteliite kertoo, mille paperille väri on suunniteltu: **C** tarkoittaa päällystettyä ja **U** päällystämätöntä paperia. Sama muste näyttää päällystetyllä paperilla kirkkaammalta ja terävämmältä, päällystämättömällä pehmeämmältä, tummemmalta ja tasaisemmalta. Siksi esimerkiksi *PMS 186 C* ja *PMS 186 U* esitetään tarkoituksella erillisinä värinäytteinä.

## Spottiväri ja prosessiväri

### Spottiväri (Pantone)

- Yksi esisekoitettu muste kutakin väriä kohti
- Erittäin tasainen tulos painoerästä toiseen
- Toistaa värejä, joihin CMYK ei yllä, myös metalli- ja fluoresoivia värejä
- Jokainen lisäspottiväri vaatii oman painolevyn ja lisää kustannuksia
- Sopii logoihin, kirjepapereihin, pakkauksiin ja kyltteihin

### Prosessiväri (CMYK)

- Värit muodostuvat neljän musteen pienistä pisteistä
- Tulos voi vaihdella enemmän painokoneen ja paperin mukaan
- Suppeampi väriavaruus vaimentaa kirkkaimpia värejä
- Toistaa helposti valokuvia ja liukuvärejä
- Sopii esitteisiin, lehtiin ja julisteisiin

Monet brändit käyttävät molempia: logo painetaan Pantone-spottivärillä kirjepapereihin ja pakkauksiin, CMYK-vastineella taas neliväriesitteisiin. [RGB ja CMYK](https://gradiently.design/fi/guide/rgb-vs-cmyk) kertoo, miksi prosessiväreillä menetetään osa kirkkaimmista sävyistä.

## Hex ja RGB: väri valona

Hex-koodi on RGB-arvo kuusitoistajärjestelmässä: punaiselle, vihreälle ja siniselle on kullekin kaksi merkkiä väliltä `00` ja `ff`. `#1d4ed8` tarkoittaa punaista 29, vihreää 78 ja sinistä 216. Luku on täsmällinen, mutta ulkoasu ei, sillä jokainen näyttö toistaa sen hieman eri tavalla paneelinsa, kirkkautensa ja asetustensa mukaan. [Värikoodien opas](https://gradiently.design/fi/guide/color-codes-explained) käy läpi hexin, RGB:n, HSL:n ja muut esitystavat.

| Järjestelmä | Mitä se kuvaa | Käyttö | Esimerkkimerkintä |
| --- | --- | --- | --- |
| Pantone | Fyysinen esisekoitettu muste | Logot, pakkaukset, kyltit | PMS 186 C |
| CMYK | Neljän prosessimusteen prosenttiosuudet | Useimmat kaupalliset painotyöt | C0 M60 Y90 K0 |
| RGB | Punaisen, vihreän ja sinisen valon määrät | Näytöt, videot, sovellukset | rgb(29 78 216) |
| Hex | RGB kuusitoistajärjestelmässä | Verkkosivut, suunnittelutyökalut | #1d4ed8 |

Neljä tapaa määrittää yksi brändiväri. Jokainen kuuluu eri esitystapaan.

## Miksi Pantonen hex-muunnokset ovat likiarvoja

- **Eri väriavaruudet:** jotkin Pantone-musteet, etenkin kirkkaat oranssit ja vihreät sekä fluoresoivat ja metallivärit, jäävät tavallisen näytön toistoalueen ulkopuolelle.
- **Paperi ja valo:** mustenäytteen ulkoasu muuttuu paperin ja katseluvalon mukaan. Näyttö tuottaa oman valonsa.
- **Näyttöjen erot:** sama hex näyttää erilaiselta kahdella näytöllä, joten yksikään hex-arvo ei vastaa fyysistä mustetta kaikkialla.
- **Päivitykset:** Pantone on muuttanut digitaalisia arvojaan vuosien mittaan. Vanhoissa brändiohjeissa voi siksi olla samalle musteelle eri hex-vastine.

> **Käytä muuntimia lähtökohtana** Verkon Pantone-hex-muuntimet antavat luvun, eivät taattua vastaavuutta. Aloita Pantonen julkaisemista arvoista tai Pantone Connectista ja säädä väriä sitten silmämääräisesti fyysisen näytteen rinnalla.

## Brändivärin sovittaminen painoon ja näytölle

1. **Päätä ensisijainen käyttötapa** Jos brändi näkyy enimmäkseen painettuna, esimerkiksi pakkauksissa tai liiketilan julkisivussa, valitse Pantone ensin. Jos se näkyy pääosin näytöillä, valitse ensin hex ja etsi lähin Pantone.
2. **Valitse fyysisestä väriviuhkasta** Valitse muste painetusta Pantone-viuhkasta päivänvalossa tai neutraalissa valossa. Käytä paperiasi vastaavaa päällystetyn tai päällystämättömän paperin viuhkaa.
3. **Etsi lähin näyttöväri silmämääräisesti** Aloita Pantonen julkaisemasta hex-arvosta. Pidä sitten värinäytettä kalibroidun tai laadukkaan näytön vieressä ja säädä, kunnes värit tuntuvat samoilta.
4. **Pyydä painotalolta CMYK-arvot** Pyydä painotalon koneelle ja paperille paras CMYK-versio niitä töitä varten, joissa spottimustetta ei käytetä.
5. **Tarkista vedokset** Tulosta CMYK-version koevedos ja vertaa sitä värinäytteeseen ennen suurta painoerää.
6. **Kirjaa kaikki neljä arvoa** Tallenna Pantone-, CMYK-, RGB- ja hex-arvot [brändiohjeistoon](https://gradiently.design/fi/guide/brand-style-guide), jotta kenenkään ei tarvitse muuntaa niitä lennossa.

```json
{
  "brand-blue": {
    "pantone": "Chosen from the coated guide, e.g. PMS xxxx C",
    "pantoneUncoated": "Matched separately in the uncoated guide",
    "cmyk": "From your printer, checked on a proof",
    "rgb": "rgb(29 78 216)",
    "hex": "#1d4ed8"
  }
}
```

Brändivärin tiedot yhdessä paikassa. Täytä painoarvot värinäytteistä ja vedoksista, älä muuntimesta. [Design-tokenit](https://gradiently.design/fi/guide/design-tokens) näyttävät, miten tiimit tallentavat nämä tiedot.

Northside Physio -fysioterapiaklinikan käyntikortti

Käyntikortti koossa 1050×600 px. Painossa brändiväri toistetaan yhtenä spottimusteena, jotta uusintapainokset vastaavat toisiaan.

Saman fysioterapiaklinikan Instagram-pystyjulkaisu, joka ilmoittaa iltavastaanotoista

Sama brändi Instagramissa koossa 1080×1350. Täällä käytetään hex-väriä, joka on valittu sopimaan painetun musteen rinnalle.

## Brändivärit värinäytettä laajemmin

Tasainen brändiväri on helppo määritellä ja kopioida. Näytöillä monet brändit lisäävät siihen nyt syvyyttä valolla, liukuväreillä ja tekstuureilla. Ne toimivat RGB-avaruudessa: rakenna ne brändin hex-väristä ja sen lähisävyistä. Säilytä tasainen Pantone niihin painotöihin, joissa yksi täsmällinen muste on tärkeä. [Brändin värikoodit](https://gradiently.design/fi/guide/brand-color-codes) ja [brändivärien valinta](https://gradiently.design/fi/guide/how-to-choose-brand-colors) kertovat lisää.

- Brändisininen valosta tummaksi: `linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 100%)`
- Brändisininen ja valonlähde: `radial-gradient(circle at 75% 25%, #3b82f6 0%, #1d4ed8 45%, #0b1a4a 100%)`

Näyttöversiot yhden brändin hex-värin ympärillä. Painossa tällainen liukuväri toistetaan yleensä CMYK-väreillä, ei spottimusteella.

Gradientlyn Mark vie ajatuksen pidemmälle: elävä tausta omine väreineen, valoineen ja rakeisuuksineen kuuluu yhdelle brändille kerrallaan. Etsi Markkinoilta värisanoilla, kuten ”deep blue”, brändiväriäsi lähellä oleva Mark.

## FAQ

### Mitä eroa on Pantonella ja hexillä?

Pantone määrittää fyysisen esisekoitetun painomusteen. Hex on RGB-arvo, joka kertoo näytölle punaisen, vihreän ja sinisen valon määrät.

### Voiko Pantonen muuntaa hexiksi täsmällisesti?

Ei. Pantone julkaisee hex-vastineita, mutta ne ovat likiarvoja, koska musteet, paperi ja näytöt käyttäytyvät eri tavoin. Osa musteista jää näytön toistoalueen ulkopuolelle.

### Mitä C ja U tarkoittavat Pantone-koodeissa?

C tarkoittaa päällystetylle ja U päällystämättömälle paperille tarkoitettua näytettä. Sama muste näyttää niillä erilaiselta, joten näytteet esitetään erikseen.

### Mikä on spottiväri?

Spottiväri painetaan omalla esisekoitetulla musteellaan sen sijaan, että se rakennettaisiin CMYK-pisteistä. Se toistuu tasaisemmin ja yltää väreihin, joita CMYK ei voi toistaa.

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

Vain jos painat materiaaleja, joissa täsmällinen väri on tärkeä, kuten pakkauksia, kylttejä tai kirjepapereita. Digitaalinen brändi voi aloittaa hexistä ja RGB:stä sekä tarkistetusta CMYK-versiosta satunnaisia painotöitä varten.