# Farveteoriens grundbegreber for dig, der ikke designer

[Canonical HTML page](https://gradiently.design/da/guide/color-theory-basics)

Du behøver ikke kunstskole for at vælge farver godt. Seks idéer forklarer næsten alle farvebeslutninger, og hver kan læres på få minutter.

## The short version

- Farveteori er et sæt praktiske idéer om, hvordan farver forholder sig til hinanden, kombineres, og hvad de får folk til at se først.
- Hver farve kan beskrives ud fra tre egenskaber: farvetone, farvefamilien, mætning, hvor intens den er, og lysstyrke, hvor tæt den er på hvid eller sort.
- Lysstyrkekontrast betyder mere for læsbarheden end farvetonekontrast, og derfor bør et design stadig fungere i gråtoner.
- Farveharmonier som komplementære, analoge, triadiske og monokromatiske er placeringer på farvehjulet, der pålideligt ser balancerede ud.
- De fleste gode paletter har én dominerende farve, en eller to understøttende farver og én lille accent.

**Farveteori** er det sæt praktiske idéer, designere bruger til at vælge farver, der fungerer sammen og gør det, de skal. Det handler om seks ting: farvetone, mætning, lysstyrke, temperatur, harmoni og kontrast. Forstår du dem, kan du forklare, hvorfor en palet føles rolig eller højlydt, hvorfor noget tekst er svær at læse, og hvorfor to farver støder sammen.

Denne side er udgangspunktet for hver farveartikel i Designguiden. Hvert afsnit linker videre til en dybere artikel, når du får brug for den.

## Farvetone, mætning og lysstyrke

Enhver farve kan beskrives med tre egenskaber. **Farvetone** er farvefamilien: rød, orange, grøn, blå. **Mætning** (også kaldet kromatik) er, hvor intens den er, fra grå til levende. **Lysstyrke** er, hvor tæt den er på sort eller hvid. Ændr én og hold de andre fast, så ser du, hvad hver gør.

- Farvetone: farvefamilien: `linear-gradient(90deg, #ef4444, #eab308, #22c55e, #06b6d4, #3b82f6, #a855f7, #ef4444)`
- Mætning: grå til levende violet: `linear-gradient(90deg, #939393 0%, #7c3aed 100%)`
- Lysstyrke: mørk til lys violet: `linear-gradient(90deg, #1e0a3c 0%, #7c3aed 50%, #ede9fe 100%)`

Tre egenskaber, tre skalaer. Den anden og den tredje beholder den samme farvetone og ændrer kun ét.

Disse tre er sådan, farvekoder som HSL og OKLCH beskriver farve, hvilket gør dem nemme at justere i kode. [Farvekoder forklaret](https://gradiently.design/da/guide/color-codes-explained) gennemgår HEX, RGB, HSL og OKLCH.

## Varme og kolde farver

Farver har også en temperatur. Røde, orange og gule nuancer føles varme, mens blå, grønne og violette føles kolde. Varme farver føles tendentielt tættere på og mere energiske, kolde længere væk og roligere. Temperaturen er dog relativ: en violet med meget rød i kan føles varm ved siden af en ren blå.

- Mursten: #b91c1c
- Mandarin: #ea580c
- Sol: #facc15
- Turkis: #0d9488
- Kobolt: #2563eb
- Violet: #6d28d9

Tre varme farver og tre kolde. En palet, der blander begge, lader som regel den ene temperatur føre.

[Varme og kolde farver](https://gradiently.design/da/guide/warm-and-cool-colors) går videre, blandt andet med, hvordan du blander temperaturer i én gradient.

## Farveharmoni og farvehjulet

Placér farvetoner i en cirkel, og nogle forhold ser pålideligt balancerede ud. Det er farveharmonierne. De er ikke regler, men de er gode udgangspunkter, når du er i tvivl. Guiden til [farvehjulet](https://gradiently.design/da/guide/color-wheel) forklarer, hvordan du læser dem.

| Harmoni | Hvor farverne sidder | Hvordan det føles |
| --- | --- | --- |
| [Monokromatisk](https://gradiently.design/da/guide/monochromatic-color-scheme) | Én farvetone i flere lysstyrker | Rolig, samlet, raffineret |
| [Analog](https://gradiently.design/da/guide/analogous-colors) | Naboer på hjulet | Harmonisk, naturlig, let |
| [Komplementær](https://gradiently.design/da/guide/complementary-colors) | Lige overfor hinanden | Høj kontrast, energisk |
| Splitkomplementær | Én farvetone plus de to ved siden af dens modsætning | Livlig, men mindre spændt |
| [Triadisk](https://gradiently.design/da/guide/triadic-colors) | Tre farvetoner med jævn afstand | Legende, balanceret, dristig |

De fem harmonier, du oftest møder.

- Monokromatisk blå: `linear-gradient(135deg, #1e3a8a 0%, #3b82f6 55%, #bfdbfe 100%)`
- Analog: blå, turkis, grøn: `linear-gradient(135deg, #1d4ed8 0%, #0891b2 50%, #059669 100%)`
- Komplementær blå og rav, via pink: `linear-gradient(135deg, #1d4ed8 0%, #db2777 50%, #f59e0b 100%)`
- Triadisk: grøn, violet, orange: `linear-gradient(135deg, #16a34a 0%, #7c3aed 50%, #ea580c 100%)`

Hver harmoni som en gradient. Komplementære par har brug for en midterfarve, ellers bliver blandingen grå.

## Kontrast: hvorfor nogle farver er svære at læse

Kontrast er forskellen mellem to farver. Til læsning er den forskel, der betyder mest, lysstyrken og ikke farvetonen. Rød tekst på grøn baggrund kan være to vidt forskellige farvetoner og stadig være svær at læse, fordi de to kan have ens lysstyrke. Mange med farvesynsnedsættelse kan slet ikke skelne dem.

### Kun farvetonekontrast

- Rød på grøn med ens lysstyrke
- Blå på lilla
- Orange på pink
- Forsvinder, når den omsættes til gråtoner

### Lysstyrkekontrast

- Næsten hvid på dyb marineblå
- Næsten sort på bleg gul
- Mørk skrift på en lys pastel
- Kan stadig læses i gråtoner

Gråtonetesten er det hurtigste tjek: gør dit design gråt, og se, om ordene stadig træder frem. For tekst har Web Content Accessibility Guidelines fastsat mindstekrav til kontrastforhold, 4,5:1 til brødtekst og 3:1 til stor tekst. [Farvekontrast](https://gradiently.design/da/guide/color-contrast-accessibility) forklarer, hvordan du måler dem.

## Proportion: hvor meget af hver farve

De samme fem farver kan se rolige eller kaotiske ud, afhængigt af, hvor meget du bruger af hver. En nyttig standard er én dominerende farve, der dækker det meste af pladsen, en eller to understøttende farver og en lille accent til det, du vil have bemærket. [60-30-10-reglen](https://gradiently.design/da/guide/60-30-10-rule) er den almindelige udgave af den idé.

- Dominerende: dyb marineblå: #0f172a
- Understøttende: skifer: #334155
- Understøttende: dis: #e2e8f0
- Accent: orange: #f97316

En dominerende mørk, to stille støtter og én varm accent. Accenten virker, fordi den er sjælden.

## Hvad farver betyder

Farver bærer associationer, men de er indlærte og ikke indbyggede, og de varierer med kultur og kontekst. Grøn kan betyde natur, penge eller kør. Rød kan betyde fare, held eller udsalg. Se betydning som et spørgsmål om din målgruppe og kategori og ikke som en fast ordbog. [Farvepsykologi](https://gradiently.design/da/guide/color-psychology) skiller det, der holder, fra det, der ikke gør, og [farvers betydning verden over](https://gradiently.design/da/guide/color-meanings-around-the-world) viser, hvor meget de varierer.

## Sådan bruger du farveteori i praksis

1. **Start med én farve** Vælg den farve, der betyder mest: din brandfarve eller en, du har taget fra et foto. [Sådan henter du en palet fra et billede](https://gradiently.design/da/guide/color-palette-from-image) hjælper.
2. **Vælg en harmoni** Beslut, om paletten skal være rolig (monokromatisk eller analog) eller energisk (komplementær eller triadisk).
3. **Byg et lysstyrkespænd** Tilføj en meget mørk og en meget lys version til tekst og baggrunde. De fleste paletter fejler, fordi de mangler dem.
4. **Fordel proportionerne** Beslut, hvilken farve der dominerer, hvilken der understøtter, og hvilken der er accenten.
5. **Test kontrast og kontekst** Tjek tekstkontrasten, kør gråtonetesten, og se paletten i et rigtigt layout og ikke kun som farveprøver.

Til brandarbejde gør [sådan vælger du brandfarver](https://gradiently.design/da/guide/how-to-choose-brand-colors) disse trin til en fuld metode.

## FAQ

### Hvad er farveteori?

Farveteori er et sæt praktiske idéer om, hvordan farver forholder sig til hinanden, hvordan de kombineres til harmoniske paletter, og hvordan kontrast påvirker det, folk ser og læser.

### Hvad er farvens tre egenskaber?

Farvetone, farvefamilien, mætning, hvor intens eller grå den er, og lysstyrke, hvor tæt den er på sort eller hvid.

### Hvad er de vigtigste farveharmonier?

Monokromatisk, analog, komplementær, splitkomplementær og triadisk. Hver beskriver, hvor farverne sidder på farvehjulet i forhold til hinanden.

### Hvad betyder mest for læsbarheden, farvetone eller lysstyrke?

Lysstyrke. Tekst skal have en tydelig forskel i lysstyrke fra baggrunden, og derfor virker et læsbart design også, når det omsættes til gråtoner.

### Har farver universelle betydninger?

Nej. Farveassociationer er indlærte og forskellige mellem kulturer, kategorier og sammenhænge, så tjek dem mod din målgruppe.