# Splittkomplementære farger: kontrast uten sammenstøt

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

Et komplementærpar er kraftig og vanskelig å balansere. Del motpolen i to, så beholder du nesten all kontrasten mens fargene slutter å kjempe. Her er prinsippet og paletter å kopiere.

## The short version

- Splittkomplementære farger er en grunnfarge pluss de to fargene på hver side av komplementærfargen på fargesirkelen.
- På en sirkel med 360 grader ligger partnerne omtrent 150 og 210 grader fra grunnfargen, rundt 30 grader på hver side av den nøyaktige motpolen.
- Skjemaet beholder sterk kontrast, men krasjer mindre enn et rent komplementærpar fordi ingen farger ligger nøyaktig motsatt hverandre.
- Det fungerer best når grunnfargen dominerer og de to splittfargene brukes som mindre aksenter.
- Malersirkler og skjermsirkler plasserer komplementærfarger ulikt, så samme grunnfarge kan gi litt forskjellige splittpaletter.

**Splittkomplementære farger** er tre farger: en grunnfarge og de to fargene på hver side av dens komplementærfarge. I stedet for å pare blått med den direkte motpolen oransje, parer du blått med rødoransje og guloransje. Du beholder kontrasten mellom varmt og kaldt som gjør komplementære skjemaer livlige. Men fordi ingen ligger nøyaktig motsatt en annen, blir resultatet behageligere og mye lettere å balansere i et faktisk design.

## Slik fungerer splittkomplementære farger

Se for deg [fargesirkelen](https://gradiently.design/nb/guide/color-wheel) som en klokke. Grunnfargen er ved tolv og komplementærfargen ved seks. Et splittkomplementært skjema hopper over seks og velger fem og sju. I grader betyr det fargetoner omtrent 150 og 210 grader fra grunnfargen.

1. **Velg en grunntone** Start med fargen designet virkelig handler om: merkevaren, produktet eller stemningen. For eksempel blågrønt ved 175 grader.
2. **Finn komplementærfargen** Legg til 180 grader. Blågrønts motpol er korallrødt ved omtrent 355 grader.
3. **Gå 30 grader til hver side** Gå 30 grader i hver retning fra komplementærfargen: omtrent 325 grader (rosa) og 25 grader (oransje).
4. **Juster lyshet og metning** Fargetonene bestemmer skjemaet, men du velger hvor lys, dyp eller dempet hver skal være. Her begynner paletten å ligne din egen.

- Blågrønn grunnfarge: #188b81
- Orkidérosa: #e052a5
- Aprikos: #f58a3d
- Dyp blågrønn: #173633
- Varmt papir: #f6f0ea

Eksempelet: blågrønt med rosa og aprikos, pluss mørkere blågrønt og en nøytral farge til tekst og luft.

## Derfor krasjer splittkomplementære farger mindre

Nøyaktige motpoler, som rødt og cyan eller blått og oransje, konkurrerer ved lik styrke. Ved siden av hverandre med full metning kan de virke vibrerende. Blandet blir de grå. [Komplementærfarger](https://gradiently.design/nb/guide/complementary-colors) er kraftige av den grunn, men gir lite rom for feil.

I et splittskjema ligger partnerne 60 grader fra hverandre og er derfor nære slektninger. De støtter hverandre i stedet for å kjempe, og balanserer sammen grunnfargen. Du får kontrast med en naturlig alliert på den varme eller kjølige siden, avhengig av utgangspunktet.

| Skjema | Farger | Kontrast | Balansering |
| --- | --- | --- | --- |
| Komplementært | 2, nøyaktige motpoler | Høyest | Vanskelig |
| Splittkomplementært | 3, grunnfarge og to nær motpolen | Høy | Middels |
| [Triadisk](https://gradiently.design/nb/guide/triadic-colors) | 3, jevnt fordelt ved 120 grader | Høy | Middels til vanskelig |
| [Analogt](https://gradiently.design/nb/guide/analogous-colors) | 3, ved siden av hverandre | Lav | Enkel |

Splittkomplementært ligger mellom analog ro og komplementær dramatikk.

## Eksempler på splittkomplementære paletter

Fem paletter laget med trinnene over. Første farge i hver rad er grunnfargen, de andre to er splittpartnerne. Lyshet og metning er justert så hvert sett kan brukes i ekte arbeid, ikke bare stemmer i teorien.

| Grunnfarge | Grunnfargens hekskode | Splittpartnere | Uttrykk |
| --- | --- | --- | --- |
| Blågrønn | `#188b81` | `#e052a5` orkidé, `#f58a3d` aprikos | Tropisk, moderne, livlig |
| Fiolett | `#6629a3` | `#f5e63d` sitron, `#3fa648` blad | Lekent, kreativt, kraftig |
| Koboltblå | `#1b4f98` | `#e45e44` sinober, `#f5d63d` solsikke | Sikkert, sportslig, klassisk |
| Karmosin | `#c32230` | `#318160` jade, `#2970a3` ceruleum | Festlig, jordnært, rikt |
| Skoggrønn | `#2a6f41` | `#ab5eba` orkidé, `#e4677c` rose | Botanisk, romantisk, friskt |

Kopier kodene rett inn i verktøyet. Bruk grunnfargen på mesteparten av flaten.

- Blågrønt skjema: de to partnerne: `linear-gradient(135deg, #e052a5 0%, #f58a3d 100%)`
- Koboltskjema: de to partnerne: `linear-gradient(135deg, #e45e44 0%, #f5d63d 100%)`
- Blågrønn grunnfarge som bakgrunn: `radial-gradient(circle at 75% 25%, #188b81 0%, #173633 60%, #0b1a19 100%)`
- Koboltgrunnfarge som bakgrunn: `radial-gradient(circle at 25% 25%, #2970a3 0%, #1b4f98 45%, #0c1f3d 100%)`

Splittpartnerne er naboer, så de blandes rent med hverandre. Å blande grunnfargen rett inn i en partner krysser sirkelen og blir grumsete. Hold derfor grunnfargen som egen bakgrunn.

## Bruk et splittkomplementært skjema i design

Tre like sterke farger får et design til å ligne et flagg. Gi dem heller ulike oppgaver. [60-30-10-regelen](https://gradiently.design/nb/guide/60-30-10-rule) er et godt utgangspunkt: grunnfargen dekker mest, én partner støtter, og den andre vises bare der blikket skal gå først.

Demping er det andre grepet. Gjør grunnfargen mørkere eller gråere til den nesten oppfører seg som en nøytral farge. Da virker partnerne plutselig bevisste fremfor høylytte. Slik blir splittskjemaer sofistikerte: dyp blågrønn, støvet rosa og myk aprikos har samme toner som den klare versjonen, men ligner et boutiquehotell fremfor en badeball.

Et stående sommermenyinnlegg på dyp blågrønn bakgrunn med rosa- og aprikosaksenter

Dyp blågrønn bakgrunn gjør det meste. Rosa og aprikos brukes bare til ordene og én fremheving.

### Unngå

- Alle tre toner med full metning og like store flater
- Brødtekst i én partnerfarge oppå den andre
- Én gradient fra grunnfarge til partner på tvers av sirkelen
- En fjerde sterk fargetone i tillegg

### Gjør dette

- Én dominerende grunnfarge, gjerne dypere eller dempet
- Partnere med ulik lyshet, så én leder
- En nøytral farge til tekst og pusterom
- Kontroller kontrasten overalt der ordene ligger

## Malersirkel eller skjermsirkel

Det finnes to vanlige fargesirkler. Den tradisjonelle malersirkelen har rødt, gult og blått som primærfarger, så rødt har grønt som motpol. Skjermer bruker rødt, grønt og blått lys, så på en HSL-sirkel er motpolen til rødt cyan. Begge gir gyldige skjemaer. Bruk bare én sirkel konsekvent. Jobber du i CSS, bruker `hsl()` skjermsirkelen, så du kan generere et skjema med litt regning.

```css
:root {
  --h: 175; /* base hue in degrees */
  --base: hsl(var(--h) 70% 32%);
  --split-a: hsl(calc(var(--h) + 150) 70% 60%);
  --split-b: hsl(calc(var(--h) + 210) 90% 60%);
}
```

Endre `--h`, så følger hele det splittkomplementære skjemaet med. Les mer om modellen i [fargetone, metning og lysstyrke](https://gradiently.design/nb/guide/hue-saturation-brightness).

For å se paletten på ekte formater kan Designer i Gradiently sette opp innlegg, story og banner samtidig. Da vurderer du proporsjonene i alle størrelser fremfor på et fargeprøvekort.

## FAQ

### Hva er splittkomplementære farger?

En grunnfarge pluss de to fargene på hver side av komplementærfargen på fargesirkelen. For blått er det rødoransje og guloransje.

### Hvordan finner du splittkomplementære farger?

Finn grunnfargens komplementærfarge ved å legge 180 grader til fargetonen, og velg tonene omtrent 30 grader på hver side.

### Er splittkomplementært bedre enn komplementært?

Det er lettere å balansere. Du beholder mesteparten av kontrasten, men fargene krasjer mindre fordi ingen er nøyaktige motpoler.

### Hva er de splittkomplementære fargene til rødt?

På malersirkelen er de gulgrønt og blågrønt. På en HSL-skjermsirkel er partnerne grønncyan og blåcyan, rundt 150 og 210 grader.

### Hvor mange farger har et splittkomplementært skjema?

Tre fargetoner, selv om de fleste faktiske paletter legger til en mørk og en lys nøytral farge til tekst og plass.