# Komplementærfarver: kontrast, der stadig føles balanceret

[Canonical HTML page](https://gradiently.design/da/guide/complementary-colors)

Modsatte farver giver den stærkeste kontrast, farve kan tilbyde, og den hurtigste vej til et design, der summer, eller et, der råber. Forskellen er proportion og lysstyrke.

## The short version

- Komplementærfarver er par, der sidder lige overfor hinanden på farvehjulet, som blå og orange.
- Sidder komplementærfarver side om side i fuld styrke og med ens lysstyrke, ser de ud til at vibrere ved deres fælles kant.
- Den mest pålidelige måde at bruge komplementærfarver på er at lade den ene dominere og bruge den anden som en lille accent.
- Ændrer du lysstyrken eller mætningen på den ene farve i parret, bevarer du kontrasten og fjerner sammenstødet.
- En ret gradient mellem to komplementærfarver bliver ofte grå i midten, hvilket et midterpunkt eller interpolation i OKLCH løser.

**Komplementærfarver** er to farvetoner, der sidder lige overfor hinanden på farvehjulet, som blå og orange, rød og grøn eller gul og violet. Hver får den anden til at se mere intens ud, og derfor giver komplementære par den stærkeste farvekontrast, der findes. Brugt med omtanke gør den kontrast, at et enkelt element er umuligt at overse. Brugt jævnt og i fuld styrke gør den et design ubehageligt at se på.

Hvilke par der tæller som komplementære, afhænger af hjulet. Malerens hjul parrer blå med orange, skærmhjulet parrer blå med gul. Guiden til [farvehjulet](https://gradiently.design/da/guide/color-wheel) forklarer forskellen. Parrene herunder er dem, designere bruger mest.

## Komplementære farvepar, med koder

| Par | Farve A | Farve B | Føles |
| --- | --- | --- | --- |
| Blå og orange | `#1d4ed8` | `#f97316` | Energisk, sportslig, klar |
| Marineblå og guld | `#1e3a8a` | `#d4a017` | Klassisk, etableret |
| Rød og grøn | `#b91c1c` | `#15803d` | Festlig, naturlig, højlydt |
| Violet og gul | `#6d28d9` | `#facc15` | Legende, elektrisk |
| Turkis og koral | `#0f766e` | `#fb7185` | Frisk, varm, moderne |
| Blomme og salvie | `#581c87` | `#a3b18a` | Dæmpet, redaktionel |

Seks modsatte par. De sidste tre ændrer lysstyrke og mætning, og derfor føles de blødere.

- Blå: #1d4ed8
- Orange: #f97316
- Turkis: #0f766e
- Koral: #fb7185
- Blomme: #581c87
- Salvie: #a3b18a

Tre af parrene som farveprøver, hver farve ved siden af sin modsætning.

## Hvorfor komplementærfarver vibrerer

Sæt to komplementærfarver med ens lysstyrke og fuld mætning ved siden af hinanden, og kanten imellem dem ser ud til at flimre. Øjnene kan ikke afgøre, hvor den ene ender. Effekten er stærkest med rød og grøn eller blå og orange i lige stor intensitet, og den gør tekst i den ene farve på den anden meget svær at læse.

- Lige stærke: vibrerer: `repeating-linear-gradient(90deg, #e0282e 0px, #e0282e 24px, #1f9d55 24px, #1f9d55 48px)`
- Mørk rød, bleg grøn: rolig: `repeating-linear-gradient(90deg, #7f1d1d 0px, #7f1d1d 24px, #bbf7d0 24px, #bbf7d0 48px)`

De samme to farvetoner. Adskiller du dem i lysstyrke, stopper flimmeret, og kontrasten bliver brugbar.

Løsningen er næsten aldrig at ændre farvetonerne. Gør den ene meget mørkere eller lysere eller meget mindre mættet. Parret forbliver komplementært, men kanten holder op med at kæmpe. Det løser også læsbarheden, for tekst har mere brug for lysstyrkekontrast end farvetonekontrast. Se [farvekontrast](https://gradiently.design/da/guide/color-contrast-accessibility).

## Sådan bruger du komplementærfarver: én fører, én accentuerer

Den mest pålidelige tilgang er at give den ene farve det meste af pladsen og den anden en lille, vigtig opgave: en knap, en pris, ét ord, et klistermærke. Accenten trækker blikket, fordi den er den eneste af sin slags. Halvt og halvt splitter derimod opmærksomheden og ser sjældent planlagt ud.

Marineblåt felt, orange accent: `linear-gradient(90deg, #0f2a5c 0%, #0f2a5c 88%, #f97316 88%, #f97316 100%)`

Cirka 90 % marineblå og 10 % orange. Det lille orange område vejer langt mere, end dets størrelse tilsiger.

- **Dominerende farve:** baggrunde, store former, det meste af fladen. Som regel den mørkeste eller mest dæmpede af de to.
- **Accentfarve:** call to action, fremhævninger, ét vigtigt tal. Som regel den skarpeste.
- **Neutrale farver:** næsten hvid, næsten sort eller en varm grå, så begge får plads. Få gode komplementære design består kun af to farver.
- **Proportionsguide:** [60-30-10-reglen](https://gradiently.design/da/guide/60-30-10-rule) er et nyttigt udgangspunkt, med komplementærfarven som de 10.

## Komplementære gradienter uden den grå midte

Blander du to komplementærfarver direkte, bliver midten grå eller brun. I det sRGB-farverum, de fleste værktøjer bruger, giver gennemsnittet af rød-, grøn- og blåværdierne for to modsætninger noget nær neutralt. Det er en af de mest almindelige [gradientfejl](https://gradiently.design/da/guide/gradient-design-mistakes).

- Ret: grå i midten: `linear-gradient(90deg, #1d4ed8 0%, #f97316 100%)`
- Via magenta: forbliver levende: `linear-gradient(90deg, #1d4ed8 0%, #c026d3 50%, #f97316 100%)`
- OKLCH: rejser rundt om hjulet: `linear-gradient(in oklch 90deg, #1d4ed8 0%, #f97316 100%)`
- Kort blanding: mindre grå synlig: `linear-gradient(90deg, #1d4ed8 0%, #1d4ed8 30%, #f97316 70%, #f97316 100%)`

Fire måder at forbinde blå og orange. Kun den første lader den døde zone vise sig midt i feltet.

De to stærkeste løsninger er et midterstop i en farvetone mellem parret og interpolation i OKLCH, som bevæger sig rundt om farvehjulet i stedet for at skære tværs over. [Mudrede gradienter](https://gradiently.design/da/guide/muddy-gradients) og [OKLCH-gradienter i CSS](https://gradiently.design/da/guide/css-gradient-oklch) forklarer begge i detaljer.

## Hvor komplementære paletter virker bedst

Komplementærfarver passer til arbejde, der skal bemærkes hurtigt og læses på afstand. De passer dårligere til lang læsning, rolige interiører eller alt, der skal føles stille, hvor [analoge farver](https://gradiently.design/da/guide/analogous-colors) klarer sig bedre.

- **Call to action.** En varm knap på en kold side, eller omvendt, er den klassiske brug. Den findes uden at søge.
- **Sport og events.** Holddragter, plakater og billetter bruger modsatte farver, fordi de kan læses fra den anden side af en stadion eller en gade.
- **Mad og detailhandel.** Madstyling stiller ofte varme retter op mod kolde tallerkener eller baggrunde, så de træder frem. Et udsalgsmærke i komplementærfarven til emballagen skiller sig ud på en hylde.
- **Data og kort.** To modsatte farvetoner viser tydeligt to sider af en sammenligning, så længe labels bakker dem op for læsere, der ser farver anderledes.
- **Portrætter og produktbilleder.** En baggrund i komplementærfarven til motivets hovedfarve adskiller det uden en hård kontur.

## Fejl med komplementærfarver, du bør undgå

### Undgå

- Lige store mængder af begge farver
- Tekst i den ene komplementærfarve på baggrund af den anden
- Begge farver i fuld mætning og med ens lysstyrke
- En ret gradient mellem parret

### Gør

- Én dominerende farve og én lille accent
- Tekst i en næsten hvid eller næsten sort neutral farve
- Den ene farve dybere, blegere eller mere dæmpet end den anden
- En midterfarve eller OKLCH-blanding

Føles et komplementært par for spændt, selv når det er balanceret, så prøv splitkomplementær: én farvetone plus de to på hver side af dens modsætning. Det bevarer energien og blødgør sammenstødet. [Triadiske og splitkomplementære paletter](https://gradiently.design/da/guide/triadic-colors) viser hvordan.

## FAQ

### Hvad er komplementærfarver?

Komplementærfarver er to farvetoner overfor hinanden på farvehjulet, som blå og orange eller rød og grøn. Sammen skaber de den stærkeste farvekontrast.

### Hvad er komplementærfarven til blå?

På malerens traditionelle hjul er den orange. På det RGB-skærmhjul, digitale værktøjer bruger, er den gul.

### Hvorfor ser komplementærfarver ud, som om de vibrerer?

Når to modsætninger med ens lysstyrke og fuld mætning rører hinanden, har øjet svært ved at falde til ro ved kanten. Gør du den ene farve mørkere, lysere eller mindre mættet, stopper det.

### Hvordan laver jeg en gradient mellem komplementærfarver?

Tilføj et midterstop i en farvetone mellem de to, eller interpolér i OKLCH. En ret sRGB-blanding mellem komplementærfarver bliver som regel grå i midten.

### Hvor meget skal jeg bruge af hver komplementærfarve?

Lad én dominere og brug den anden som en lille accent, for eksempel omkring 90 % til 10 %, med neutrale farver, så begge får plads.