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

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

En varumärkesfärg är bara konsekvent om alla som rör den har rätt kod för sitt medium. Här är tabellen som varje varumärkesmanual behöver, vad varje kod är till för och i vilken ordning du tar fram dem.

## The short version

- Varumärkets färgkoder ska ange varje färg i fyra format: hex för webben, RGB för skärmar, CMYK för tryck och en Pantone-referens för spotfärg och fysiska varor.
- Varje färg i en varumärkesmanual behöver också ett namn, en roll och en lista med godkända textpar med deras kontrastvärden.
- Hex och RGB beskriver exakt samma skärmfärg, så de kan omvandlas exakt, medan CMYK- och Pantone-värden kräver en färghanterad omvandling och en tryckt kontroll.
- Om ditt varumärke mest syns i tryck eller på produkter, välj Pantone-referensen först och anpassa skärmkoderna efter den.
- Namnge färger efter roll, som primär eller bläck, så att manualen fortfarande är begriplig om en nyans ändras senare.

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

| Namn och roll | Hex | RGB | CMYK | Pantone |
| --- | --- | --- | --- | --- |
| Signalrött, primär | `#C8102E` | 200 16 46 | 0 92 77 22 | 186 C |
| Hamnblått, sekundär | `#0047BB` | 0 71 187 | 100 62 0 27 | 2728 C |
| Bläck, text | `#101820` | 16 24 32 | Rikt svart från tryckeriet | Black 6 C |
| Dis, neutral | `#D9D9D6` | 217 217 214 | 0 0 1 15 | Cool Gray 1 C |
| Papper, bakgrund | `#F5F3EE` | 245 243 238 | 0 1 3 4 | Obehandlat papper |

En färgtabell för en varumärkesmanual. CMYK-värdena är enkla matematiska omvandlingar som visas som illustration. Byt ut dem mot de värden ditt tryckeri ger dig från en färghanterad omvandling.

- Signalrött: #c8102e
- Hamnblått: #0047bb
- Bläck: #101820
- Dis: #d9d9d6
- Papper: #f5f3ee

Samma fem färger som färgprover. En manual ska alltid visa själva färgen bredvid sina koder, så att en fel siffra syns direkt.

## 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](https://gradiently.design/sv/guide/color-codes-explained) 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](https://gradiently.design/sv/guide/hex-to-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å.

> **Alla skärmfärger går inte att trycka** Mycket mättade blå, gröna och orange toner ligger utanför det CMYK-färg kan återge. Om din varumärkesfärg är en av dem, bestäm nu om tryck använder en Pantone-spotfärg eller en något tråkigare CMYK-version och skriv ner det. [RGB mot CMYK](https://gradiently.design/sv/guide/rgb-vs-cmyk) visar varför.

## Så tar du fram varumärkets färgkoder

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. **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. **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. **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. **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](https://gradiently.design/sv/guide/pantone-colors) 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.

| Text | Bakgrund | Kontrast | Använd |
| --- | --- | --- | --- |
| Vit | Signalrött | 5,9:1 | Knappar, banners, alla storlekar |
| Vit | Hamnblått | 8,0:1 | Alla storlekar |
| Bläck | Papper | 16,1:1 | Brödtext |
| Signalrött | Papper | 5,3:1 | Rubriker och länkar |
| Signalrött | Bläck | 3,0:1 | Bara stor displaytext |

Kontrastvärden beräknade med WCAG-formeln. Brödtext behöver minst 4,5:1, stor text 3:1.

Metoden bakom de siffrorna finns i [färgkontrast och tillgänglighet](https://gradiently.design/sv/guide/color-contrast-accessibility).

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

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

Samma tabell som anpassade CSS-egenskaper, med Pantone-referensen kvar i en kommentar för den som behöver den.

### Undvik

- En hexkod och inget annat
- Färger som heter ”röd 2” och ”ny blå”
- CMYK kopierad från en nätomvandlare
- Pantone vald från en skärmförhandsvisning

### Gör

- Hex, RGB, CMYK och Pantone för varje färg
- Namn som säger vad färgen är till för
- CMYK från ditt tryckeri, kontrollerad på en korrektur
- Pantone vald från en fysisk karta

## 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](https://gradiently.design/sv/guide/brand-style-guide).

## FAQ

### Vilka färgkoder ska en varumärkesmanual innehålla?

Hex, RGB, CMYK och en Pantone-referens för varje färg, plus ett namn, en roll och godkända textpar med deras kontrastvärden.

### Är hex samma sak som RGB?

Ja. Hex är RGB skrivet i bas sexton, så `#C8102E` och 200 16 46 är exakt samma färg.

### Hur omvandlar jag en hexfärg till CMYK?

Omvandlare på nätet ger en grov startpunkt, men CMYK beror på tryckpress och papper. Be ditt tryckeri om en färghanterad omvandling och godkänn en tryckt korrektur.

### Behöver jag en Pantone-färg för mitt varumärke?

Om ditt varumärke syns på skyltar, förpackningar, kläder eller profilprodukter, ja: en Pantone-referens är det mest pålitliga sättet att få samma färg på olika material.

### Vad betyder C eller U efter ett Pantone-nummer?

C betyder bestruket papper och U betyder obestruket. Samma färg ser olika ut på vardera, så notera båda om du trycker på båda.