# Tetradisk fargepalett: fire farger i balanse

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

Fire farger er den rikeste klassiske harmonien og den letteste å gjøre feil. Hemmeligheten er ikke å velge kulørene, som er regning, men å bestemme hvilken som leder.

## The short version

- En tetradisk fargepalett bruker fire kulører som danner to komplementærpar på fargesirkelen.
- Rektangelvarianten kombinerer to kulører med 60 graders avstand med deres motsatser. Kvadratvarianten har 90 grader mellom alle fire.
- Tetradiske paletter er rike og varierte, men vanskelige å balansere fordi fire kulører konkurrerer om oppmerksomhet.
- Paletten fungerer når én farge dominerer, en andre støtter og de to siste brukes som små aksenter.
- Ved å dempe eller mørkne noen av kulørene blir en tetradisk palett sofistikert fremfor høylytt.

En **tetradisk fargepalett** har fire kulører som danner to komplementærpar på fargesirkelen. Kobler du dem med linjer, får du et rektangel eller kvadrat, og derfor kalles variantene rektangel- og kvadratpaletter. Fordi den har varme og kjølige farger på begge sider av sirkelen, er den tetradiske paletten den fyldigste klassiske harmonien. Den er også mest utsatt for å se kaotisk ut, med mindre du lar én farge lede og holder de tre andre på plass.

## Rektangulære og kvadratiske tetradiske paletter

Begge starter med en grunnkulør og dens komplementærfarge, 180 grader unna. Forskjellen er hvor det andre paret ligger.

| Variant | Kulører fra grunnfargen | Karakter |
| --- | --- | --- |
| Rektangel, eller dobbelt komplementær | 0, 60, 180 og 240 grader | To nære naboer og motsatsene deres, lettere å balansere |
| Kvadrat | 0, 90, 180 og 270 grader | Helt jevn avstand, mest variert og dristigst |

Rektangelpaletter har et naturlig par allierte på hver side, og derfor starter designere vanligvis der.

- Kobolt: #1b3c7e
- Ametyst: #9d59c0
- Ringblomst: #f0b642
- Bregne: #7dba5e

En rektangelpalett: kobolt og ametyst med 60 graders avstand, motsatt ringblomst og bregne.

- Dyp fiolett: #452277
- Korallrød: #e25a66
- Limeblad: #95c059
- Havblågrønn: #2e9e95

En kvadratpalett: fire kulører med 90 graders avstand, med fiolett gjort dypere så den fungerer som bakgrunn.

## Bygg en tetradisk fargepalett

1. **Velg grunnkuløren** Velg fargen merkevaren eller designet bygger på. Noter kuløren i grader, som enhver fargevelger med HSL viser.
2. **Legg til komplementærfargen** Legg til 180 grader. Paret er ryggraden i paletten. [Komplementærfarger](https://gradiently.design/nb/guide/complementary-colors) forklarer hvorfor motsatser fungerer.
3. **Velg rektangel eller kvadrat** For et rektangel legger du 60 grader til grunnkuløren og komplementærfargen. For et kvadrat legger du til 90 grader på hver.
4. **Gi hver farge en oppgave** Én dominerende, én støttende, to aksenter. Skriv det ned, så rollene er like i hvert design.
5. **Juster lyshet og metning** Gjør hovedfargen mørkere, støtten mykere og behold aksentene klarest. Kuløren setter harmonien. Lysheten setter hierarkiet.

```css
:root {
  --h: 220; /* base hue */

  /* Rectangle scheme */
  --c1: hsl(var(--h) 65% 30%);
  --c2: hsl(calc(var(--h) + 60) 45% 55%);
  --c3: hsl(calc(var(--h) + 180) 85% 60%);
  --c4: hsl(calc(var(--h) + 240) 40% 55%);

  /* For a square scheme use +90, +180 and +270 instead */
}
```

Rektangelpaletten over, generert fra ett tall. HSL-kulør går rundt etter 360 av seg selv, så du trenger aldri trekke fra.

## Hvorfor fire farger er vanskelige å balansere

Med to farger er kontrasten enkel. Med fire sterke kulører vet ikke øyet hvor det skal se først, og hver farge virker som den roper over de andre. De fleste mislykkede tetradiske design gir alle fire omtrent likt areal og lik metning. Løsningen er hierarki, ikke færre farger.

Et stående arrangementsinnlegg for en åpen studiohelg med én dominerende bakgrunnsfarge og små aksenter

Én farge leder bakgrunnen, og de andre vises i små felt: mye innhold, rolig design.

Et stående listeinnlegg i samme serie, ledet av en andre farge fra firefargepaletten

Et beslektet innlegg der en andre farge leder, så serien henger sammen uten å gjenta seg.

Det andre bildet viser palettens egentlige styrke. Fire farger gir nok variasjon til en hel serie: hvert innlegg kan ledes av en annen farge mens settet fortsatt tydelig hører sammen. Det passer til karuseller, menyer og arrangementsprogrammer, der [en konsekvent merkevare](https://gradiently.design/nb/guide/brand-consistency) betyr noe, men ensformighet blir kjedelig.

## Hvor en tetradisk fargepalett fungerer best

Fire kulører fortjener plassen når et prosjekt må skille flere ting tydelig uten å finne på nye farger hver gang. Én plakat trenger sjelden det. Et system gjør det vanligvis.

- **Kategorikoding:** en kafémeny med drikke, frokost, lunsj og kaker, hver med sin farge.
- **Arrangementsprogrammer:** fire scener, spor eller dager som besøkende må skille ved første øyekast.
- **Diagrammer og kontrollpaneler:** fire dataserier som må være tydelige, helst også [sjekket for fargeblindhet](https://gradiently.design/nb/guide/color-blindness-design).
- **Barne- og lekemerker:** der den fulle, klare versjonen er hele poenget.
- **Sesongkampanjer:** én kulør leder hvert kvartal, med de andre i støtte.

For proporsjonene, start med [60 30 10-regelen](https://gradiently.design/nb/guide/60-30-10-rule) og del de siste ti prosentene mellom aksentene. På en meny kan hovedfargen fylle siden, støttefargen markere overskrifter og aksentene merke vegetarretter og nye retter.

## Gjør en tetradisk palett sofistikert

Tetradiske paletter med full metning ligner en lekekasse, perfekt for en leketøysbutikk og feil for de fleste andre. Trekk to eller tre farger mot grått eller mørkt, så de samme kulørene virker gjennomtenkte og voksne.

- Skifermarine: #24324c
- Lyng: #a085ad
- Hvete: #dfc590
- Salvie: #85a375
- Lin: #f6f2ea

Den koboltbaserte rektangelpaletten dempet: samme kulører, nå rolige nok for et hotell, en bokhandel eller et bryllup.

- Kobolt til ametyst: `linear-gradient(135deg, #1b3c7e 0%, #9d59c0 100%)`
- Ringblomst til bregne: `linear-gradient(135deg, #f0b642 0%, #7dba5e 100%)`
- Lyng på skifer: `radial-gradient(circle at 70% 30%, #a085ad 0%, #24324c 55%, #141c2b 100%)`

I en rektangelpalett blander du hvert 60-graderspar innbyrdes. En blanding til motsatsen går gjennom grått. Se [grumsete gradienter](https://gradiently.design/nb/guide/muddy-gradients).

### Unngå

- Fire kulører med likt areal og lik lysstyrke
- Tekst i én klar kulør på en annen
- En gradient gjennom alle fire
- En femte kulør for å rette balansen

### Gjør

- Én hovedfarge på omtrent 60 prosent av arealet
- En nøytral til tekst og luft
- To kulører dempet, to beholdt klarere
- La hovedfargen variere gjennom serien

Hvis fire farger er for mange, gå tilbake til tre med [triadiske farger](https://gradiently.design/nb/guide/triadic-colors) eller [splittede komplementærfarger](https://gradiently.design/nb/guide/split-complementary-colors). Begge beholder sterk kontrast med én kulør mindre å håndtere. Prøv deretter paletten på ekte design: i Gradiently vises farger lagret i et merkevaresett, en Pro-funksjon, først i alle fargevelgere i Studio, så hvert innlegg kan ha sin egen hovedfarge.

## FAQ

### Hva er en tetradisk fargepalett?

En palett med fire kulører i to komplementærpar på fargesirkelen, som danner et rektangel eller kvadrat.

### Hva er forskjellen på rektangel- og kvadratpaletter?

En rektangelpalett bruker kulører på 0, 60, 180 og 240 grader. En kvadratpalett har jevne intervaller på 90 grader. Rektangler er vanligvis lettere å balansere.

### Er tetradisk det samme som dobbelt komplementær?

Den rektangulære tetradiske paletten kalles ofte dobbelt komplementær, fordi den består av to komplementærpar som ligger nær hverandre.

### Hva er et eksempel på en tetradisk fargepalett?

Kobolt `#1B3C7E`, ametyst `#9D59C0`, ringblomst `#F0B642` og bregne `#7DBA5E` danner en rektangelpalett. Kobolt og ametyst har 60 graders avstand, motsatt ringblomst og bregne.

### Hvordan balanserer man en firefargepalett?

La én farge dominere, gi én en støtterolle og hold de to andre som små aksenter. Demp eller mørkne noen kulører, og legg til en nøytral til tekst.