# Komplementfärger: kontrast som ändå känns balanserad

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

Motsatta färger ger den starkaste kontrast som färg kan erbjuda, och den snabbaste vägen till en design som surrar eller en som skriker. Skillnaden är proportion och ljushet.

## The short version

- Komplementfärger är par som ligger rakt emot varandra på färgcirkeln, till exempel blått och orange.
- Placerade sida vid sida i full styrka och med liknande ljushet verkar komplementfärger vibrera längs sin gemensamma kant.
- Det säkraste sättet att använda komplementfärger är att låta den ena dominera och använda den andra som en liten accent.
- Om du ändrar ljusheten eller mättnaden hos den ena färgen i paret behåller du kontrasten men tar bort krocken.
- En rak gradient mellan två komplementfärger tenderar att bli grå i mitten, vilket en mittfärg eller interpolering i OKLCH rättar till.

**Komplementfärger** är två nyanser som ligger rakt emot varandra på färgcirkeln, som blått och orange, rött och grönt eller gult och violett. Var och en får den andra att se mer intensiv ut, vilket är varför komplementfärgspar ger den starkaste färgkontrasten som finns. Använd med omsorg gör kontrasten ett enskilt element omöjligt att missa. Använd jämnt och i full styrka gör den en design obehaglig att titta på.

Vilka par som räknas som komplementfärger beror på cirkeln. Målarens cirkel parar blått med orange, skärmens cirkel parar blått med gult. Guiden om [färgcirkeln](https://gradiently.design/sv/guide/color-wheel) förklarar skillnaden. Paren nedan är de som designers använder mest.

## Komplementfärgspar, med koder

| Par | Färg A | Färg B | Känsla |
| --- | --- | --- | --- |
| Blått och orange | `#1d4ed8` | `#f97316` | Energisk, sportig, tydlig |
| Marin och guld | `#1e3a8a` | `#d4a017` | Klassisk, etablerad |
| Rött och grönt | `#b91c1c` | `#15803d` | Festlig, naturlig, högljudd |
| Violett och gult | `#6d28d9` | `#facc15` | Lekfull, elektrisk |
| Turkos och korall | `#0f766e` | `#fb7185` | Frisk, varm, modern |
| Plommon och salvia | `#581c87` | `#a3b18a` | Dämpad, redaktionell |

Sex motsatta par. De tre sista skiftar ljushet och mättnad, vilket är varför de känns mjukare.

- Blå: #1d4ed8
- Orange: #f97316
- Turkos: #0f766e
- Korall: #fb7185
- Plommon: #581c87
- Salvia: #a3b18a

Tre av paren som färgrutor, varje färg bredvid sin motsats.

## Varför komplementfärger vibrerar

Placera två komplementfärger med liknande ljushet och full mättnad bredvid varandra, så verkar kanten mellan dem flimra. Ögat kan inte avgöra var den ena tar slut. Effekten är starkast med rött och grönt eller blått och orange i samma intensitet, och den gör text i den ena färgen på den andra mycket svårläst.

- Lika stark: vibrerar: `repeating-linear-gradient(90deg, #e0282e 0px, #e0282e 24px, #1f9d55 24px, #1f9d55 48px)`
- Mörkrött, blekgrönt: lugnt: `repeating-linear-gradient(90deg, #7f1d1d 0px, #7f1d1d 24px, #bbf7d0 24px, #bbf7d0 48px)`

Samma två nyanser. Om du skiljer dem åt i ljushet upphör flimret och kontrasten blir användbar.

Lösningen är nästan aldrig att byta nyanser. Gör den ena mycket mörkare eller ljusare, eller mycket mindre mättad. Paret förblir komplementärt, men kanten slutar kämpa. Det löser också läsbarheten, eftersom text behöver ljushetskontrast mer än nyanskontrast, se [färgkontrast](https://gradiently.design/sv/guide/color-contrast-accessibility).

## Så använder du komplementfärger: en leder, en accentuerar

Det mest pålitliga sättet är att ge den ena färgen det mesta av ytan och den andra ett litet, viktigt jobb: en knapp, ett pris, ett enda ord, en dekal. Accenten drar blicken eftersom den är det enda av sitt slag. Hälften och hälften delar däremot uppmärksamheten och ser sällan planerat ut.

Marin yta, orange accent: `linear-gradient(90deg, #0f2a5c 0%, #0f2a5c 88%, #f97316 88%, #f97316 100%)`

Ungefär 90 % marin mot 10 % orange. Den lilla orangea ytan väger mycket mer än dess storlek.

- **Dominant färg:** bakgrunder, stora former, större delen av ytan. Oftast den mörkare eller stillsammare i paret.
- **Accentfärg:** uppmaningar till handling, markeringar, ett viktigt tal. Oftast den ljusare.
- **Neutrala färger:** nästan vitt, nästan svart eller en varm grå som ger båda utrymme. Få bra komplementdesigner har bara två färger.
- **Proportioner:** [60-30-10-regeln](https://gradiently.design/sv/guide/60-30-10-rule) är en bra utgångspunkt, med komplementfärgen som de 10.

## Komplementgradienter utan grå mitt

Blandar du två komplementfärger direkt blir mittpunkten grå eller brun. I färgrummet sRGB, som de flesta verktyg använder, ger röd-, grön- och blåvärdena hos två motsatser i medeltal något som ligger nära neutralt. Det är ett av de vanligaste [gradientmisstagen](https://gradiently.design/sv/guide/gradient-design-mistakes).

- Rak: grå i mitten: `linear-gradient(90deg, #1d4ed8 0%, #f97316 100%)`
- Via magenta: förblir levande: `linear-gradient(90deg, #1d4ed8 0%, #c026d3 50%, #f97316 100%)`
- OKLCH: rör sig runt cirkeln: `linear-gradient(in oklch 90deg, #1d4ed8 0%, #f97316 100%)`
- Kort övergång: mindre grått syns: `linear-gradient(90deg, #1d4ed8 0%, #1d4ed8 30%, #f97316 70%, #f97316 100%)`

Fyra sätt att foga samman blått och orange. Bara det första låter den döda zonen synas över mitten av ytan.

De två starkaste lösningarna är ett mittstopp i en nyans mellan paret och interpolering i OKLCH, som rör sig runt färgcirkeln i stället för att skära tvärs över den. [Sladdriga gradienter](https://gradiently.design/sv/guide/muddy-gradients) och [OKLCH-gradienter i CSS](https://gradiently.design/sv/guide/css-gradient-oklch) förklarar båda i detalj.

## Där komplementpaletter fungerar bäst

Komplementfärger passar arbete som snabbt måste synas och läsas på avstånd. De passar sämre för långläsning, lugna miljöer eller allt som ska kännas stilla, där [analoga färger](https://gradiently.design/sv/guide/analogous-colors) fungerar bättre.

- **Uppmaningar till handling.** En varm knapp på en sval sida, eller tvärtom, är det klassiska användningsområdet. Den hittas utan att man letar.
- **Sport och evenemang.** Lagdräkter, affischer och biljetter använder motsatta färger eftersom de syns över en arena eller en gata.
- **Mat och detaljhandel.** Matstylning ställer ofta varma rätter mot svala tallrikar eller bakgrunder så att de framhävs. En rabattdekal i förpackningens komplementfärg syns på hyllan.
- **Data och kartor.** Två motsatta nyanser visar två sidor av en jämförelse tydligt, så länge etiketter stöttar dem för läsare som ser färg annorlunda.
- **Porträtt och produktbilder.** En bakgrund i komplementfärgen till motivets huvudfärg skiljer ut det utan en hård kontur.

## Vanliga misstag med komplementfärger

### Undvik

- Lika mycket av båda färgerna
- Text i den ena komplementfärgen på en bakgrund i den andra
- Båda färgerna i full mättnad och med liknande ljushet
- En rak gradient mellan paret

### Gör så här

- En dominant färg och en liten accent
- Text i en nästan vit eller nästan svart neutral färg
- Den ena färgen djupare, blekare eller stillsammare än den andra
- En mittfärg eller en OKLCH-övergång

Om ett komplementpar känns för spänt även när det är balanserat kan du prova delad komplementfärg: en nyans plus de två på var sida om dess motsats. Den behåller energin och mildrar krocken. [Triadiska paletter och delad komplementfärg](https://gradiently.design/sv/guide/triadic-colors) visar hur.

## FAQ

### Vad är komplementfärger?

Komplementfärger är två nyanser mitt emot varandra på färgcirkeln, till exempel blått och orange eller rött och grönt. Tillsammans skapar de den starkaste färgkontrasten.

### Vilken är komplementfärgen till blått?

På målarens traditionella cirkel är det orange. På RGB-cirkeln som digitala verktyg använder är det gult.

### Varför ser komplementfärger ut att vibrera?

När två motsatser med liknande ljushet och full mättnad rör vid varandra har ögat svårt att fästa sig vid kanten. Om du gör den ena färgen mörkare, ljusare eller mindre mättad upphör det.

### Hur gör jag en gradient mellan komplementfärger?

Lägg till ett mittstopp i en nyans mellan de två, eller interpolera i OKLCH. En rak sRGB-blandning mellan komplementfärger blir oftast grå i mitten.

### Hur mycket av varje komplementfärg ska jag använda?

Låt den ena dominera och använd den andra som en liten accent, till exempel ungefär 90 % mot 10 %, med neutrala färger som ger båda utrymme.