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

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.

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 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.
• 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.

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

1. 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. 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. 3

   Hanki CMYK painolta

   Lähetä hex- ja Pantone-viite, pyydä painon värihallitut CMYK-arvot ja hyväksy painettu vedos.

4. 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. 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 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.

Lukujen taustalla olevan menetelmän löydät oppaasta värikontrasti ja saavutettavuus.

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.

: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 */
}

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.