Färgkoder för varumärket: dokumentera hex, RGB, CMYK och Pantone

Varumärkets färgkoder hör hemma i en enda tabell i din varumärkesmanual, med en rad per färg och en kolumn för varje medium: hex för webbplatser, RGB för skärmar och video, CMYK för tryck och en Pantone-referens för spotfärg, skyltar och profilprodukter. Lägg till ett namn, en roll och de godkända textparen, så kan alla från en utvecklare till en skyltmakare återskapa färgen utan att gissa. Det mesta av inkonsekvensen kommer av att folk hittar på sin egen omvandling eftersom manualen bara gav dem en kod.

Tabellen med varumärkets färgkoder

Här är ett fullständigt exempel för ett fiktivt varumärke med en röd primärfärg, en blå sekundärfärg, ett bläck och två neutrala toner. Kopiera strukturen och byt ut värdena mot dina egna.

Vad varje färgkod är till för

• Hex (#C8102E) är webbens förkortning för en RGB-färg. Utvecklare, Figma och de flesta designverktyg vill ha den. Hexkoder för färg förklarar hur du läser en.
• RGB (200 16 46) är samma färg skriven som röda, gröna och blå värden från 0 till 255. Videoredigerare och en del appar ber om den. Omvandling mellan hex och RGB är exakt, se hex till RGB.
• CMYK (0 92 77 22) är blandningen av cyan, magenta, gult och svart färg för fyrfärgstryck. Den beror på tryckpress och papper, så den ska komma från ditt tryckeri eller en färghanterad omvandling.
• Pantone (186 C) namnger en färdigblandad spotfärg från en fysisk färgkarta. Det är det mest pålitliga sättet att få samma färg på visitkort, skyltar, tyg och förpackningar. Suffixet spelar roll: C är bestruket papper, U är obestruket.
• Valfritt: oklch- eller HSL-värden hjälper webbteam att bygga gradienter och mörka lägen. Ta med dem om dina utvecklare arbetar så.

Så tar du fram varumärkets färgkoder

1. 1

   Bestäm ditt ledande medium

   Om varumärket mest lever på skärmar, börja från hex. Om det lever på förpackningar, uniformer eller skyltar, börja från ett fysiskt Pantone-prov och anpassa skärmfärgen efter det.

2. 2

   Välj Pantone-matchningen på plats

   Titta på en riktig Pantone-karta i dagsljus, inte en förhandsvisning på skärm. Välj de närmaste bestrukna och obestrukna proven och notera båda.

3. 3

   Hämta CMYK från ditt tryckeri

   Skicka hex och Pantone-referensen och be om deras färghanterade CMYK-värden, godkänn sedan en tryckt korrektur.

4. 4

   Fastställ skärmvärdena sist

   Justera hex så att den ser ut som det tryckta provet på några kalibrerade skärmar. Hex och RGB följer sedan exakt av varandra.

5. 5

   Registrera godkända par

   Lista vilka färger som får ligga på vilka, med kontrastvärden, så att ingen sätter röd text på marinblått.

Pantone mot hex tar upp matchningssteget mer ingående, inklusive varför en skärmförhandsvisning av ett Pantone-prov aldrig blir helt rätt.

Dokumentera godkända par och kontrast

Koder säger hur man gör en färg. Par säger hur den används. En kort kontrasttabell förhindrar den vanligaste felanvändningen, nämligen att sätta två varumärkesfärger tillsammans som båda ser starka ut men fungerar dåligt som text och bakgrund.

Metoden bakom de siffrorna finns i färgkontrast och tillgänglighet.

Dela färgkoder med utvecklare

Ge utvecklare färgerna som namngivna variabler, inte en PDF de måste skriva av. Rollnamn håller koden läsbar och överlever ett byte av nyans.

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

Håll koderna där folk designar

En färgtabell i en PDF hjälper bara om folk öppnar den. Lägg samma palett där designerna faktiskt görs. I Gradiently rymmer varumärkespaketet (en del av Pro) dina färgpaletter bredvid dina logotyper och teckensnitt, och Designer använder dem när den lägger ut en design, så rätt koder följer med varje inlägg. Resten av guiden, från typografi till tonalitet, tas upp i varumärkesmanual.