# Tetradiskt färgschema: fyra färger i balans

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

Fyra färger är den rikaste klassiska harmonin och den lättaste att göra fel. Hemligheten är inte att välja de fyra nyanserna, som är aritmetik, utan att bestämma vilken som styr.

## The short version

- Ett tetradiskt färgschema använder fyra nyanser som är ordnade som två komplementpar på färghjulet.
- Rektangelversionen parar två nyanser med 60 graders avstånd med deras två motsatser, och kvadratversionen sprider alla fyra nyanser med 90 graders avstånd.
- Tetradiska paletter är rika och varierade men svåra att balansera, eftersom fyra nyanser tävlar om uppmärksamheten.
- Schemat fungerar när en färg dominerar, en andra stödjer och de två återstående används som små accenter.
- Att dämpa eller mörka några av de fyra nyanserna får en tetradisk palett att kännas sofistikerad i stället för högljudd.

Ett **tetradiskt färgschema** är fyra nyanser som bildar två komplementpar på färghjulet. Förbinder du dem med linjer ritar du en rektangel eller en kvadrat, och därför kallas de två versionerna rektangel- och kvadratscheman. Eftersom det rymmer varma och kalla färger på båda sidor av hjulet är en tetradisk palett den fullaste av de klassiska harmonierna. Det är också den som mest sannolikt ser kaotisk ut, om du inte låter en färg leda och håller de andra tre på sin plats.

## Tetradiska scheman i rektangel och kvadrat

Båda versionerna utgår från en basnyans och lägger till dess komplement, 180 grader bort. De skiljer sig åt i var det andra paret ligger.

| Version | Nyanser från basen | Karaktär |
| --- | --- | --- |
| Rektangel, eller dubbla komplement | 0, 60, 180 och 240 grader | Två nära grannar och deras motsatser, lättare att balansera |
| Kvadrat | 0, 90, 180 och 270 grader | Helt jämnt avstånd, den mest varierade och djärvaste |

Rektangelscheman har ett naturligt par allierade på varje sida, och därför börjar designers oftast där.

- Kobolt: #1b3c7e
- Ametist: #9d59c0
- Tagetes: #f0b642
- Ormbunke: #7dba5e

Ett rektangelschema: kobolt och ametist, 60 grader isär, mitt emot tagetes och ormbunke.

- Djup violett: #452277
- Korallröd: #e25a66
- Limeblad: #95c059
- Havsteal: #2e9e95

Ett kvadratschema: fyra nyanser 90 grader isär, med violetten fördjupad så att den kan fungera som botten.

## Så bygger du ett tetradiskt färgschema

1. **Välj basnyansen** Välj den färg ditt varumärke eller din design vilar på. Notera dess nyans i grader, vilket varje färgväljare som visar HSL ger dig.
2. **Lägg till komplementet** Lägg till 180 grader. Det paret är schemats ryggrad. [Komplementfärger](https://gradiently.design/sv/guide/complementary-colors) förklarar varför motsatser fungerar.
3. **Välj rektangel eller kvadrat** För en rektangel lägger du till 60 grader till basen och till komplementet. För en kvadrat lägger du till 90 grader till varje.
4. **Ge varje färg ett jobb** En dominerande, en stödjande, två accenter. Skriv ner det så att rollerna förblir desamma i varje design.
5. **Justera ljushet och mättnad** Gör den dominerande färgen mörkare, mjuka upp stödet och låt accenterna vara klarast. Nyansen avgör harmonin, ljusheten avgör hierarkin.

```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 ovan, skapad av ett enda tal. HSL-nyansen går runt förbi 360 av sig själv, så du behöver aldrig dra ifrån.

## Därför är fyra färger svåra att balansera

Med två färger är kontrasten enkel. Med fyra starka nyanser har ögat ingen aning om var det ska titta först, och varje färg verkar ropa över de andra. De flesta tetradiska designer som misslyckas gör det för att alla fyra färger får ungefär lika stor yta och lika stor mättnad. Lösningen är hierarki, inte färre färger.

Stående evenemangsinlägg för en öppen ateljéhelg med en dominerande bakgrundsfärg och små accenter

En färg leder bakgrunden och de andra dyker upp på små ställen: livligt innehåll, lugn design.

Stående listinlägg i samma serie, lett av en andra färg ur schemat med fyra färger

Ett följeinlägg där en andra färg ur uppsättningen tar ledningen, så att serien känns besläktad men inte upprepande.

Den andra bilden pekar på schemats verkliga styrka. Fyra färger ger dig tillräckligt med variation för en hel serie: varje inlägg kan ledas av en annan medlem i paletten medan uppsättningen tydligt hör ihop. Det är idealiskt för karuseller, menyer och evenemangsprogram, där [varumärkeskonsekvens](https://gradiently.design/sv/guide/brand-consistency) betyder något men likformighet blir tråkig.

## Där ett tetradiskt färgschema fungerar bäst

Fyra nyanser förtjänar sin plats när ett projekt behöver skilja flera saker tydligt åt utan att uppfinna nya färger varje gång. En enda affisch behöver sällan det. Ett system gör det oftast.

- **Kategorikodning:** en cafémeny med drycker, frukost, lunch och bakverk, var och en med sin egen färg.
- **Evenemangsprogram:** fyra scener, spår eller dagar som besökarna behöver kunna skilja åt med en blick.
- **Diagram och instrumentpaneler:** fyra dataserier som måste förbli tydliga, helst även [kontrollerade för färgblindhet](https://gradiently.design/sv/guide/color-blindness-design).
- **Barn- och lekvarumärken:** där den fulla, klara versionen av paletten är precis poängen.
- **Säsongskampanjer:** en nyans som leder varje kvartal av året, med de andra som stöd.

För proportioner börjar du med [60-30-10-regeln](https://gradiently.design/sv/guide/60-30-10-rule) och delar de sista tio procenten mellan de två accenterna. På en meny fyller till exempel den dominerande färgen sidan, stödfärgen markerar rubriker och de två accenterna märker de vegetariska och de nya rätterna.

## Få en tetradisk palett att se sofistikerad ut

Tetradiska paletter i full mättnad ser ut som en leksakslåda, vilket är perfekt för en leksaksbutik och fel för de flesta andra. Dra två eller tre av färgerna mot grått eller mot mörkt, så ser samma nyanser genomtänkta och vuxna ut.

- Skifferblå: #24324c
- Ljung: #a085ad
- Vete: #dfc590
- Salvia: #85a375
- Linne: #f6f2ea

Koboltrektangelschemat dämpat: samma nyanser, nu stilla nog för ett hotell, en bokhandel eller ett bröllop.

- Kobolt till ametist: `linear-gradient(135deg, #1b3c7e 0%, #9d59c0 100%)`
- Tagetes till ormbunke: `linear-gradient(135deg, #f0b642 0%, #7dba5e 100%)`
- Ljung på skiffer: `radial-gradient(circle at 70% 30%, #a085ad 0%, #24324c 55%, #141c2b 100%)`

I ett rektangelschema blandar du varje par med 60 graders avstånd med sig själv. Att blanda över till en motsats korsar grått, se [grumliga gradienter](https://gradiently.design/sv/guide/muddy-gradients).

### Undvik

- Fyra nyanser med lika stor yta och lika stor ljushet
- Text i en klar nyans satt på en annan
- En gradient som går genom alla fyra
- Att lägga till en femte nyans för att rätta balansen

### Gör så här

- En dominerande färg, ungefär 60 procent av ytan
- En neutral för text och utrymme
- Två nyanser dämpade, två lämnade klarare
- Låt ledarfärgen rotera genom en serie

Om fyra färger känns för många kan du backa till tre med [triadiska färger](https://gradiently.design/sv/guide/triadic-colors) eller [delat komplement](https://gradiently.design/sv/guide/split-complementary-colors), som båda behåller stark kontrast med en nyans mindre att hantera. Prova sedan paletten på riktiga designer: i Gradiently visas färger som sparats i ett varumärkeskit (en Pro-funktion) först i varje färgväljare i Studion, så att varje inlägg i en serie kan få en annan ledare.

## FAQ

### Vad är ett tetradiskt färgschema?

En palett av fyra nyanser som bildar två komplementpar på färghjulet och ritar en rektangel eller en kvadrat.

### Vad är skillnaden mellan rektangel- och kvadratfärgscheman?

Ett rektangelschema använder nyanser vid 0, 60, 180 och 240 grader, ett kvadratschema sprider dem jämnt med 90 graders mellanrum. Rektanglar är oftast lättare att balansera.

### Är tetradisk samma sak som dubbelt komplement?

Det tetradiska rektangelschemat kallas ofta dubbelt komplement, eftersom det är två komplementpar som ligger nära varandra.

### Vad är ett exempel på ett tetradiskt färgschema?

Kobolt `#1B3C7E`, ametist `#9D59C0`, tagetes `#F0B642` och ormbunke `#7DBA5E` bildar ett rektangelschema: kobolt och ametist ligger 60 grader isär, mitt emot tagetes och ormbunke.

### Hur balanserar man en palett med fyra färger?

Låt en färg dominera, ge en en stödjande roll och behåll de andra två som små accenter. Dämpa eller mörka några av nyanserna och lägg till en neutral för text.