# Så väljer du varumärkesfärger: en metod steg för steg

[Canonical HTML page](https://gradiently.design/sv/guide/how-to-choose-brand-colors)

Varumärkesfärger väljs, de hittas inte. En tydlig metod tar dig från ett tomt blad till en palett som är särpräglad, läsbar och fortfarande rätt om två år.

## The short version

- För att välja varumärkesfärger börjar du i varumärkets karaktär och målgrupp och tittar sedan på vilka färger din kategori redan använder.
- En stark varumärkespalett byggs kring en huvudfärg som folk kan förknippa med dig, inte flera likvärdiga färger.
- Det mesta av en varumärkespalett är neutrala toner: en färgad mörk för text, en färgad ljus för bakgrunder och en eller två stillsamma stödfärger.
- En accentfärg, använd sparsamt, ger knappar och markeringar något att sticka ut med.
- Varje varumärkespalett bör testas för textkontrast och i verkliga format, i små storlekar och i tryck, innan den skrivs ner.

**Så väljer du varumärkesfärger**, kort: bestäm hur varumärket ska kännas, titta på de färger dina konkurrenter redan äger, välj en huvudfärg som skiljer dig från dem, omge den med neutrala toner och en liten accent, och testa sedan allt för kontrast och i verkliga designer. Stegen nedan gör det till en metod du kan slutföra på en eftermiddag. Resultatet är en palett där varje färg har en uppgift, i stället för fem färger du råkar gilla.

Om du är ny på nyans, mättnad och ljushet, läs [grunderna i färglära](https://gradiently.design/sv/guide/color-theory-basics) först. Det gör varje steg lättare.

## Metoden i korthet

1. **Skriv varumärkets karaktär i tre ord** Lugnt, exakt, varmt. Djärvt, lekfullt, lokalt. De här orden avgör temperatur, mättnad och kontrast innan du har tittat på en enda färgprov.
2. **Vet vem som tittar** Tänk på din målgrupp, var de kommer att se dig och, om du jobbar över landsgränser, vad färger betyder där. [Färgers betydelse i världen](https://gradiently.design/sv/guide/color-meanings-around-the-world) hjälper.
3. **Kartlägg din kategori** Samla logotyper, webbplatser och förpackningar från tio konkurrenter och notera deras huvudfärger. Du letar efter vad som är trångt och vad som är ledigt.
4. **Välj en huvudfärg** En färg som folk kommer att förknippa med dig. Den ska passa dina tre ord och sticka ut i din kategorikarta.
5. **Lägg till neutrala toner** En färgad nästan svart för text och en färgad nästan vit för bakgrunder, plus en stillsam stödton.
6. **Lägg till en accent** En kontrasterande färg för knappar, priser och markeringar, använd sparsamt.
7. **Testa kontrast** Kontrollera varje par av text och bakgrund mot WCAG-värdena.
8. **Testa i sammanhang och skriv ner det** Lägg paletten på verkliga format och notera sedan varje kod och varje färgs roll.

## Steg 1 till 3: karaktär, målgrupp och kategori

De flesta varumärkespaletter misslyckas innan en färg är vald, eftersom ingen bestämde hur varumärket skulle kännas. Tre ord räcker. *Varmt, hantverksmässigt, lugnt* pekar mot jordiga, dämpade färger med mjuk kontrast. *Skarpt, snabbt, tekniskt* pekar mot kalla, mättade färger med stark kontrast. [Färgpsykologi](https://gradiently.design/sv/guide/color-psychology) går igenom vad färger tenderar att signalera, och varför sammanhanget väger tyngre än regler.

Titta sedan på konkurrenterna. Säg att du är ett litet kafferosteri och rosterierna i närheten mest använder brunt, gräddvitt och svart. Ännu ett brunt försvinner i mängden. En kategorikarta gör det synligt.

| Konkurrent | Huvudfärg | Känns |
| --- | --- | --- |
| Rosteri A | Espressobrun | Traditionellt |
| Rosteri B | Gräddvitt och svart | Minimalt, klassiskt |
| Rosteri C | Kraftbrun | Hantverksmässigt |
| Rosteri D | Skogsgrön | Naturligt |
| Luckan | Varm orange, djup petrol | Ingen i närheten använder dem |

En illustrativ kategorikarta. De överfulla färgerna blir uppenbara när de skrivs på ett ställe.

Att vara annorlunda betyder inte att vara slumpmässig. De bästa luckorna passar fortfarande dina tre ord. Ett varmt, hantverksmässigt rosteri kan ta en rostad orange, medan ett klart elektriskt blått vore annorlunda men fel.

## Steg 4 till 6: huvudfärg, neutrala toner och accent

En **huvudfärg** är den folk kommer att minnas. Ge den de flesta av varumärkets färgögonblick: logotypen, förpackningen, första bilden i varje inlägg. Att välja två eller tre likvärdiga huvudfärger sprider igenkänningen tunt, och en är starkare.

Neutrala toner gör det mesta av jobbet. Rent svart och vitt känns generiskt, så färga dem lite mot din huvudfärg eller mot varmt eller kallt, så känns hela paletten sammanhängande. Lägg sedan till en stillsam stödfärg för ytor och illustration, och en accent för de få saker som måste sticka ut.

- Huvudfärg: rostorange: #c2410c
- Bläck: varmt svart: #1c1917
- Papper: varmt vitt: #faf7f2
- Stöd: havre: #e7dccb
- Accent: djup petrol: #0f766e

Rosteriets palett: en huvudfärg, två färgade neutrala toner, ett stillsamt stöd och en kall accent från andra sidan hjulet.

### Undvik

- Fem färger av lika stor vikt
- Rent `#000000` och `#ffffff` som neutrala toner
- En accent som används överallt
- Att välja efter personlig favoritfärg

### Gör så

- En huvudfärg som tydligt leder
- Neutrala toner färgade mot varumärket
- En accent som sparas för handlingar och markeringar
- Att välja efter karaktär och kategoriluckor

[60-30-10-regeln](https://gradiently.design/sv/guide/60-30-10-rule) är en bra riktlinje för proportioner: ungefär 60 % neutralt, 30 % huvudfärg och stöd, 10 % accent. De exakta siffrorna spelar mindre roll än att ha en tydlig ordning.

## Steg 7: testa kontrast

WCAG kräver ett kontrastvärde på minst 4,5:1 för normal text och 3:1 för stor text. Kontrollera varje par du tänker använda. Varumärkesfärger mitt i ljushetsskalan, som många orange och gröna toner, fungerar ofta med vit text men inte med svart, eller bara i stora storlekar.

| Text på bakgrund | Värde | Använd till |
| --- | --- | --- |
| Bläck på papper | 16,4:1 | All text |
| Papper på rostorange | 4,9:1 | Brödtext och stor text |
| Bläck på rostorange | 3,4:1 | Bara stor text |
| Djup petrol på papper | 5,1:1 | Länkar och brödtext |
| Bläck på havre | 12,9:1 | All text |

Kontrastvärden för exempelpaletten, beräknade med WCAG-formeln.

[Färgkontrast](https://gradiently.design/sv/guide/color-contrast-accessibility) förklarar värdena och hur du mäter dem. Om din huvudfärg faller igenom med både ljus och mörk text, mörka den lite i stället för att ge upp den, för några procent ljushet märks sällan.

## Steg 8: testa i sammanhang och skriv ner det

Färgprover ljuger. En färg som ser förfinad ut som en liten ruta kan bli överväldigande över en hel story, och en subtil neutral ton kan försvinna på en telefon i solljus. Lägg paletten på de format du faktiskt kommer att använda.

- Instagraminlägg: 1080 × 1350
- Story: 1080 × 1920
- Hero på webbplats: 1920 × 1080
- Visitkort: 1050 × 600

Fyra format värda att testa en ny palett på, från högt till litet.

- **Små storlekar:** läses huvudfärgen fortfarande som huvudfärg i en favicon eller profilbild?
- **Tryck:** går huvudfärgen att återge i tryckfärg? Mycket starka skärmfärger blir ofta blekare i tryck. Se [gradienter i tryck](https://gradiently.design/sv/guide/print-gradients).
- **Mörkt läge:** vänder de neutrala tonerna snyggt?
- **Bredvid konkurrenterna:** lägg ditt inlägg bredvid deras. Kan du se vilket som är ditt med en blick?

Skriv slutligen ner det: namn, HEX och RGB för varje färg, CMYK eller specialfärgsmotsvarigheter om du trycker, varje färgs roll och dess godkända textpar. Lägg det i din [varumärkesmanual](https://gradiently.design/sv/guide/brand-style-guide) och ditt varumärkeskit så att det används på samma sätt överallt.

> **Bortom platt färg** En huvudfärg kan bli en huvudgradient eller ett material, vilket är svårare för någon annan att låna. [Gradient som varumärke](https://gradiently.design/sv/guide/gradient-branding) förklarar hur du gör en gradient till din egen.

## FAQ

### Hur många varumärkesfärger bör jag ha?

Vanligtvis en huvudfärg, två neutrala toner, en stödfärg och en accent. Fler än så blir svåra att använda konsekvent.

### Hur väljer jag en varumärkesfärg som sticker ut?

Kartlägg konkurrenternas huvudfärger, hitta en färg som inte är överfull i din kategori och kontrollera att den fortfarande passar varumärkets karaktär.

### Ska varumärkesfärger bygga på färgpsykologi?

Använd associationer som en vägledning, inte en regel. Färgers betydelse beror mycket på kultur, kategori och sammanhang, så att vara särpräglad och konsekvent väger oftast tyngre.

### Vilken kontrast behöver varumärkesfärger för text?

WCAG rekommenderar minst 4,5:1 för normal text och 3:1 för stor text. Kontrollera varje par av text och bakgrund du planerar att använda.

### Kan jag byta varumärkesfärger senare?

Ja, men igenkänning som byggts på de gamla färgerna går gradvis förlorad. Små justeringar av ljushet eller mättnad är enklare än att byta nyans.