# 60-30-10-regeln: färgproportioner för design och varumärke

[Canonical HTML page](https://gradiently.design/sv/guide/60-30-10-rule)

De flesta paletter misslyckas på proportionerna, inte på valet. Tre siffror visar hur mycket av varje färg du ska använda, och de fungerar lika bra på en mobilskärm som i vardagsrummen där de kommer ifrån.

## The short version

- 60-30-10-regeln säger att en balanserad design använder en dominant färg på ungefär 60 % av ytan, en sekundär färg på ungefär 30 % och en accentfärg på ungefär 10 %.
- Regeln kommer från inredning, där väggar, möbler och accessoarer av sig själva delar upp sig i just de tre rollerna.
- På skärmar är de 60 % oftast bakgrunden, de 30 % bär paneler, former eller text, och de 10 % går till det enda du vill att folk ska lägga märke till eller trycka på.
- I en gradient avgör regeln hur stor del av ytan varje färg får, och därför bör accenten synas på en liten yta och inte som ett helt band.
- Siffrorna är en startpunkt: neutrala toner kan räknas som de 60 %, och många starka designer ligger närmare 70-25-5 eller 90-10.

**60-30-10-regeln** är en enkel tumregel för färgproportioner: använd en **dominant** färg på ungefär 60 % av en design, en **sekundär** färg på ungefär 30 % och en **accent** på de sista 10 %. Den kommer från inredning, där väggar, möbler och accessoarer av sig själva får de rollerna. Den fungerar lika bra för inlägg i sociala medier, bildspel, webbplatser och varumärkespaletter, eftersom den hindrar färgerna från att tävla om samma uppmärksamhet.

60 sand, 30 marinblått, 10 korall: `linear-gradient(90deg, #f3efe6 0% 60%, #1f3a5f 60% 90%, #e76f51 90% 100%)`

Regeln ritad som ett band. Accenten är liten, och det är precis därför den är det första du ser.

## Vad varje andel gör

De tre andelarna har olika uppgifter. De 60 % sätter stämningen och är oftast lugna: en bakgrund, ett underlag, en vägg. De 30 % ger struktur och kontrast och bär paneler, former eller stor text. De 10 % är dit blicken går först, så de hör hemma på det allra viktigaste: en knapp, ett pris, ett datum, en logotyp.

| Andel | Roll | Typisk färg | Var den används |
| --- | --- | --- | --- |
| 60 % | Dominant | Stilla: en neutral ton, en blek nyans eller en djup mörk | Bakgrunder, stora ytor, sidans underlag |
| 30 % | Sekundär | Kontrasterande men inte högljudd | Paneler, kort, stor text, bildytor |
| 10 % | Accent | Den mest mättade färgen du har | Knappar, priser, nyckelord, små former |

Accenten fungerar för att den är sällsynt. Dubbla den och den slutar vara en accent.

- 60 Sand: #f3efe6
- 30 Hamnblå: #1f3a5f
- 10 Korall: #e76f51

En palett skriven med sina proportioner. När andelen står bredvid varje färg är det svårare för ett team att använda korallen överallt.

## 60-30-10-regeln i ett inlägg i sociala medier

I ett inlägg är den dominanta färgen bakgrunden, den sekundära är rubriken eller en form bakom den, och accenten är en liten detalj som ett datum, ett pris eller ett enda understruket ord. Det vanliga misstaget är att ge accenten till hela rubriken. Då skriker 30 % av inlägget, och ingenting sticker ut eftersom allt gör det.

Ett event-inlägg i stående format för en grafikmässa, med lugn bakgrund, kraftig rubrik och en liten accent på tiden

Dominant yta, sekundär text och accenten sparad till datumraden.

Samma grafikmässa-design uppställd som en bred 16:9-bild med samma färgbalans

Samma proportioner på en bred bild. Andelarna håller även när formatet ändras.

## Använd regeln i bildspel och på webbplatser

I bildspel sätter du de 60 % en gång, som bakgrund på varje bild, och behåller den. Använd de 30 % till rubriker, diagram och bildramar. Spara de 10 % till den enda siffra eller det enda ord per bild som publiken måste komma ihåg. [Bakgrunder till presentationer](https://gradiently.design/sv/guide/presentation-backgrounds) går djupare in på underlag som inte konkurrerar med innehållet.

På en webbplats är sidans bakgrund och de stora sektionerna de 60 %, navigering, kort, sidfot och brödtext är de 30 %, och de 10 % går till knappar och länkar. Om din primära knapp har samma färg som dina rubriker finns det ingen accent kvar som kan leda besökaren.

```css
:root {
  --dominant: #f3efe6;  /* 60%: page and section backgrounds */
  --secondary: #1f3a5f; /* 30%: headings, cards, navigation, footer */
  --accent: #e76f51;    /* 10%: buttons, links, key numbers */
}

body { background: var(--dominant); color: var(--secondary); }
.card { background: var(--secondary); color: var(--dominant); }
.button { background: var(--accent); color: #1a0f0b; }
```

Om du namnger färger efter roll i stället för nyans blir proportionerna svåra att bryta. Mörk text på den korallfärgade knappen ger en kontrast på cirka 6:1.

> **Kisatestet** Kisa mot din färdiga design tills detaljerna suddas ut. Du ska se en stor färg, en tydlig andra färg och en liten ljus punkt. Ser du tre lika stora block, eller om accenten är utspridd över hela layouten, flytta tillbaka andelarna mot 60, 30 och 10.

För ett varumärke skriver du in andelarna i [varumärkets stilguide](https://gradiently.design/sv/guide/brand-style-guide) bredvid hexkoderna. En palett utan proportioner bjuder in varje designer att välja sin favoritfärg till bakgrunden, och inom en månad ser varumärket ut som tre olika varumärken.

## 60-30-10-regeln i en gradient

Gradienter bryter lätt mot proportionerna, eftersom en jämn blandning ger varje färg samma andel. Använd regeln genom att flytta färgstoppen: låt den dominanta färgen hålla större delen av ytan, tona över i den sekundära under ungefär en tredjedel och låt accenten komma in först vid en kant eller som ett litet sken.

- Tre lika delar: ingen dominant färg: `linear-gradient(135deg, #1f3a5f 0%, #e76f51 50%, #f3efe6 100%)`
- 60-30-10: marinblå leder, korall glimtar: `linear-gradient(160deg, #13253f 0%, #1f3a5f 50%, #4f7cac 78%, #e76f51 100%)`
- Mörk: bläck, skiffer, guld: `linear-gradient(90deg, #0f172a 0% 60%, #475569 60% 90%, #fbbf24 90% 100%)`
- Mjuk: salvia, grädde, plommon: `linear-gradient(90deg, #8fa98f 0% 60%, #f5efe0 60% 90%, #6b2d5c 90% 100%)`

Den första blandningen ger tre färger lika stor vikt och känns rörig. Den andra behåller samma idé i rätt proportioner. De två sista är färdiga 60-30-10-scheman.

## När du kan böja eller bryta regeln

### Bryt den när

- Du jobbar i en enda nyans: ett [monokromt färgschema](https://gradiently.design/sv/guide/monochromatic-color-scheme) ligger närmare 60-30-10 i ljushet än i nyans
- Designen mest är text på en neutral yta, där 90-10 blir renare
- Ett foto står för färgen och din palett bara ramar in det
- Varumärkesfärgen måste dominera, som en affisch helt i varumärkets röda

### Behåll den när

- Färgerna börjar tävla och ingenting sticker ut
- Ett team delar en palett och behöver en regel att följa
- Du har tre eller fler starka färger att balansera
- Knappar och viktiga siffror försvinner i bilden

Siffrorna är ungefärliga. Vitt utrymme räknas också. Neutrala toner som off-white, koksgrått och sand kan vara dina 60 %, medan två verkliga färger delar på resten. Det som räknas är ordningen: en tydlig ledare, ett stöd, en sällsynt accent. För själva färgvalet, se [så väljer du varumärkesfärger](https://gradiently.design/sv/guide/how-to-choose-brand-colors) och [grunderna i färglära](https://gradiently.design/sv/guide/color-theory-basics).

## FAQ

### Vad är 60-30-10-regeln?

Det är en riktlinje för färgproportioner: ungefär 60 % av en design i en dominant färg, 30 % i en sekundär färg och 10 % i en accentfärg.

### Var kommer 60-30-10-regeln ifrån?

Det är en gammal tumregel inom inredning, där väggar, möbler och accessoarer av sig själva får de tre andelarna.

### Räknas vitt i 60-30-10-regeln?

Ja. Neutrala toner som vitt, off-white, sand eller koksgrått utgör ofta de dominanta 60 %, så att de 30 % och 10 % kan gå till riktiga färger.

### Vilken färg ska accenten på 10 % ha?

Oftast din mest mättade färg, använd på det enda du vill ska synas först, som en knapp, ett pris eller ett datum.

### Hur använder jag 60-30-10-regeln i en gradient?

Flytta färgstoppen så att den dominanta färgen täcker större delen av ytan, den sekundära tonar över under ungefär en tredjedel och accenten bara syns i ett litet område eller vid en kant.