# 60-30-10-reglen: en farvefordeling til design og brands

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

De fleste paletter fejler på proportioner, ikke på valg. Tre tal fortæller dig, hvor meget du skal bruge af hver farve, og de virker lige så godt på en telefonskærm som i de stuer, de stammer fra.

## The short version

- 60-30-10-reglen siger, at et afbalanceret design bruger en dominerende farve til omkring 60 % af fladen, en sekundær farve til omkring 30 % og en accentfarve til omkring 10 %.
- Reglen stammer fra indretning, hvor vægge, møbler og tilbehør helt af sig selv falder i de tre roller.
- På skærme er de 60 % som regel baggrunden, de 30 % bærer paneler, former eller tekst, og de 10 % går til den ene ting, som folk skal lægge mærke til eller trykke på.
- I en gradient afgør reglen, hvor stor en del af fladen hver farve fylder, og derfor bør accenten optræde i et lille område frem for i et helt bånd.
- Tallene er et udgangspunkt: neutrale farver kan udgøre de 60 %, og mange stærke designs ligger tættere på 70-25-5 eller 90-10.

**60-30-10-reglen** er en enkel rettesnor for farveproportioner: brug en **dominerende** farve til omkring 60 % af et design, en **sekundær** farve til omkring 30 % og en **accent** til de sidste 10 %. Den kommer fra indretning, hvor vægge, møbler og tilbehør af sig selv falder i de roller. Den virker lige så godt til opslag på sociale medier, slides, hjemmesider og brandpaletter, fordi den forhindrer, at alle farver kæmper om den samme opmærksomhed.

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

Reglen tegnet som en bjælke. Accenten er lille, og netop derfor er den det første, du ser.

## Hvad hver andel gør

De tre andele har hver sin opgave. De 60 % sætter stemningen og er som regel rolige: en baggrund, en bund, en væg. De 30 % giver struktur og kontrast og bærer paneler, former eller stor tekst. De 10 % er der, hvor øjet lander først, så de hører til på den ene vigtigste ting: en knap, en pris, en dato, et logo.

| Andel | Rolle | Typisk farve | Hvor den bruges |
| --- | --- | --- | --- |
| 60 % | Dominerende | Rolig: en neutral, en lys tone eller en dyb mørk | Baggrunde, store flader, sidens bund |
| 30 % | Sekundær | Kontrasterende, men ikke højlydt | Paneler, kort, stor tekst, billedflader |
| 10 % | Accent | Den mest mættede farve, du har | Knapper, priser, nøgleord, små former |

Accenten virker, fordi den er sjælden. Fordobler du den, holder den op med at være en accent.

- 60 Sand: #f3efe6
- 30 Havnemarine: #1f3a5f
- 10 Koral: #e76f51

En palet skrevet med sine proportioner. Når andelen står ved siden af hver farve, undgår et team at bruge koralen overalt.

## 60-30-10-reglen på et opslag

På et opslag er den dominerende farve baggrunden, den sekundære er overskriften eller en form bag den, og accenten er en enkelt lille detalje som en dato, en pris eller ét understreget ord. Den almindelige fejl er at give accenten til hele overskriften. Så råber 30 % af opslaget, og intet skiller sig ud, fordi alt gør det.

Et opslag i højformat til en trykmesse med rolig baggrund, kraftig overskrift og en lille accent på tidspunktet

Dominerende flade, sekundær tekst og accenten gemt til datolinjen.

Det samme trykmessedesign lagt ud som et bredt 16 gange 9 slide med samme farvebalance

De samme proportioner på et bredt slide. Andelene holder, selv når formen ændrer sig.

## Sådan bruger du den på slides og hjemmesider

På slides sætter du de 60 % én gang som baggrund på hvert slide og holder fast i dem. Brug de 30 % til titler, diagrammer og billedrammer. Gem de 10 % til det ene tal eller ord pr. slide, som publikum skal huske. [Baggrunde til præsentationer](https://gradiently.design/da/guide/presentation-backgrounds) går dybere ind i baggrunde, der ikke konkurrerer med indholdet.

På en hjemmeside er sidens baggrund og de store sektioner de 60 %, navigation, kort, sidefod og brødtekst er de 30 %, og de 10 % går til opfordringer til handling og links. Hvis din primære knap har samme farve som dine overskrifter, er der ingen accent tilbage til at guide folk.

```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; }
```

Når du navngiver farver efter rolle frem for nuance, bliver proportionerne svære at bryde. Mørk tekst på den koralfarvede knap måler omkring 6:1.

> **Knibetesten** Knib øjnene sammen over dit færdige design, til detaljerne flyder ud. Du skal se én stor farve, én tydelig anden farve og et lille lysende punkt. Ser du tre lige store blokke, eller er accenten spredt ud over hele layoutet, så ryk andelene tilbage mod 60, 30 og 10.

Til et brand skriver du andelene ind i din [brandguide](https://gradiently.design/da/guide/brand-style-guide) ved siden af hex-koderne. En palet uden proportioner inviterer hver designer til at vælge sin yndlingsfarve til baggrunden, og inden for en måned ligner brandet tre forskellige brands.

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

Gradienter bryder let proportioner, fordi en jævn overgang giver alle farver den samme andel. Brug reglen ved at flytte stoppene: lad den dominerende farve holde det meste af fladen, bland over i den sekundære henover en tredjedel, og lad først accenten komme ind ved en kant eller som et lille skær.

- Tre lige dele: ingen dominerende farve: `linear-gradient(135deg, #1f3a5f 0%, #e76f51 50%, #f3efe6 100%)`
- 60-30-10: marineblå fører, koral glimter: `linear-gradient(160deg, #13253f 0%, #1f3a5f 50%, #4f7cac 78%, #e76f51 100%)`
- Mørk: blæk, skifer, guld: `linear-gradient(90deg, #0f172a 0% 60%, #475569 60% 90%, #fbbf24 90% 100%)`
- Blød: salvie, creme, blomme: `linear-gradient(90deg, #8fa98f 0% 60%, #f5efe0 60% 90%, #6b2d5c 90% 100%)`

Den første overgang giver tre farver lige stor vægt og virker uroligt. Den anden bærer den samme idé i proportion. De to sidste er færdige 60-30-10-farvesæt.

## Hvornår du kan bøje eller bryde reglen

### Bryd den, når

- Du arbejder i én nuance: et [monokromt farveskema](https://gradiently.design/da/guide/monochromatic-color-scheme) ligger tættere på 60-30-10 i lysstyrke end i nuance
- Designet mest er tekst på en neutral flade, hvor 90-10 er renere
- Et foto leverer sin egen farve, og din palet blot indrammer det
- Brandfarven skal dominere, som på en plakat i fuld brandrød

### Hold fast i den, når

- Farverne begynder at konkurrere, og intet skiller sig ud
- Et team deler en palet og har brug for en regel at følge
- Du har tre eller flere stærke farver at balancere
- Knapper og nøgletal er ved at forsvinde

Tallene er omtrentlige. Hvidt rum tæller med. Neutrale toner som offwhite, kul og sand kan være dine 60 %, mens to egentlige farver deler resten. Det afgørende er rækkefølgen: én tydelig leder, én støtte og én sjælden accent. Når du skal vælge selve farverne, kan du læse [sådan vælger du brandfarver](https://gradiently.design/da/guide/how-to-choose-brand-colors) og [grundlæggende farveteori](https://gradiently.design/da/guide/color-theory-basics).

## FAQ

### Hvad er 60-30-10-reglen?

Det er en rettesnor for farveproportioner: omkring 60 % af et design i en dominerende farve, 30 % i en sekundær farve og 10 % i en accentfarve.

### Hvor kommer 60-30-10-reglen fra?

Det er en gammel tommelfingerregel fra indretning, hvor vægge, møbler og tilbehør helt naturligt får de tre andele.

### Tæller hvid med i 60-30-10-reglen?

Ja. Neutrale toner som hvid, offwhite, sand eller kul udgør ofte de dominerende 60 % og efterlader de 30 % og 10 % til egentlige farver.

### Hvilken farve skal de 10 % accent have?

Som regel din mest mættede farve, brugt på den ene ting, du vil have lagt mærke til først, som en knap, en pris eller en dato.

### Hvordan bruger jeg 60-30-10-reglen i en gradient?

Flyt farvestoppene, så den dominerende farve dækker det meste af fladen, den sekundære blandes ind over omkring en tredjedel, og accenten kun optræder i et lille område eller ved en kant.