# Split-komplementära färger: kontrast med mindre krock

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

Ett komplementärt par är högljutt och svårt att balansera. Dela motsatsen i två så behåller du nästan all kontrast medan färgerna slutar slåss. Så fungerar det, med paletter att kopiera.

## The short version

- Split-komplementära färger är en grundfärg plus de två färger som ligger på var sida om dess komplementfärg på färghjulet.
- På ett hjul på 360 grader ligger de två partnerna ungefär 150 och 210 grader från grundfärgen, cirka 30 grader på var sida om dess exakta motsats.
- Schemat behåller stark kontrast men krockar mindre än ett rent komplementärt par, eftersom inga två färger är exakta motsatser.
- Det fungerar bäst när grundfärgen dominerar och de två delade färgerna används som mindre accenter.
- Målarens hjul och skärmens hjul placerar komplementfärger olika, så samma grundfärg kan ge något olika split-paletter.

**Split-komplementära färger** är tre färger: en grundfärg plus de två färger som ligger på var sida om grundfärgens komplement. I stället för att para blått med dess direkta motsats, orange, parar du blått med rödorange och gulorange. Du behåller kontrasten mellan varmt och kallt som gör komplementära scheman levande, men eftersom ingenting ligger exakt mittemot något annat blir resultatet skonsammare för ögat och mycket lättare att balansera i en riktig design.

## Så fungerar split-komplementära färger

Föreställ dig [färghjulet](https://gradiently.design/sv/guide/color-wheel) som en klocka. Din grundfärg ligger på tolv. Dess komplement ligger på sex. Ett split-komplementärt schema hoppar över sex och tar fem och sju i stället. I grader betyder det nyanser ungefär 150 och 210 grader från grundfärgen.

1. **Välj en grundnyans** Börja med den färg din design verkligen handlar om: varumärkesfärgen, produkten, stämningen. Säg blågrönt, vid en nyans på 175 grader.
2. **Hitta dess komplement** Lägg till 180 grader. Blågrönts komplement är en korallröd på cirka 355 grader.
3. **Gå 30 grader åt vardera hållet** Gå 30 grader åt båda håll från komplementet: cirka 325 grader (rosa) och 25 grader (orange).
4. **Justera ljushet och mättnad** Nyanserna bestämmer schemat, men du väljer hur ljus, djup eller dämpad var och en är. Där börjar paletten se ut som din.

- Blågrön bas: #188b81
- Orkidérosa: #e052a5
- Aprikos: #f58a3d
- Djup blågrön: #173633
- Varmt papper: #f6f0ea

Räkneexemplet: blågrönt med rosa och aprikos, plus en mörkare blågrön och en neutral för text och utrymme.

## Därför krockar split-komplementärt mindre

Exakta motsatser, som rött och cyan eller blått och orange, tävlar om uppmärksamheten med lika stor styrka. Placerade sida vid sida i full mättnad kan de verka vibrera, och blandade blir de grå. [Komplementfärger](https://gradiently.design/sv/guide/complementary-colors) är kraftfulla av just det skälet, men de lämnar litet utrymme för fel.

I ett split-schema ligger de två partnerna 60 grader från varandra, vilket gör dem till nära släktingar. De stöder varandra i stället för att slåss, och tillsammans balanserar de grundfärgen. Du får kontrast med en naturlig bundsförvant på den varma eller kalla sidan, beroende på var du börjar.

| Schema | Färger | Kontrast | Lätt att balansera |
| --- | --- | --- | --- |
| Komplementärt | 2, exakt motsatta | Högst | Svårt |
| Split-komplementärt | 3, bas plus två nästan motsatta | Hög | Måttligt |
| [Triadiskt](https://gradiently.design/sv/guide/triadic-colors) | 3, jämnt fördelade på 120 grader | Hög | Måttligt till svårt |
| [Analogt](https://gradiently.design/sv/guide/analogous-colors) | 3, intill varandra | Låg | Lätt |

Split-komplementärt ligger mellan det analoga lugnet och det komplementära dramat.

## Exempel på split-komplementära paletter

Fem paletter byggda med stegen ovan. Den första färgen på varje rad är grundfärgen, de andra två är dess delade partner. Ljushet och mättnad har justerats så att varje uppsättning går att använda i riktigt arbete, inte bara teoretiskt korrekt.

| Bas | Bas hex | Delade partner | Känns som |
| --- | --- | --- | --- |
| Blågrön | `#188b81` | `#e052a5` orkidé, `#f58a3d` aprikos | Tropiskt, modernt, livligt |
| Violett | `#6629a3` | `#f5e63d` citron, `#3fa648` löv | Lekfullt, kreativt, djärvt |
| Koboltblå | `#1b4f98` | `#e45e44` cinnober, `#f5d63d` solros | Självsäkert, sportigt, klassiskt |
| Karmosinröd | `#c32230` | `#318160` jade, `#2970a3` cerulean | Festligt, jordnära, rikt |
| Skogsgrön | `#2a6f41` | `#ab5eba` orkidé, `#e4677c` ros | Botaniskt, romantiskt, friskt |

Kopiera koderna rakt in i ditt verktyg. Använd grundfärgen för det mesta av ytan.

- Blågrönt schema: de två partnerna: `linear-gradient(135deg, #e052a5 0%, #f58a3d 100%)`
- Koboltschema: de två partnerna: `linear-gradient(135deg, #e45e44 0%, #f5d63d 100%)`
- Blågrön bas som botten: `radial-gradient(circle at 75% 25%, #188b81 0%, #173633 60%, #0b1a19 100%)`
- Koboltbas som botten: `radial-gradient(circle at 25% 25%, #2970a3 0%, #1b4f98 45%, #0c1f3d 100%)`

De två delade partnerna är grannar, så de blandas rent i varandra. Att blanda grundfärgen rakt in i en partner korsar hjulet och blir lerigt, så behåll grundfärgen som en egen botten.

## Så använder du ett split-komplementärt schema i en design

Tre lika högljudda färger får en design att se ut som en flagga. Ge dem olika uppgifter i stället. [60-30-10-regeln](https://gradiently.design/sv/guide/60-30-10-rule) är en bra utgångspunkt: grundfärgen täcker det mesta av ytan, en partner får en stödjande roll och den andra dyker bara upp där du vill att ögat ska gå först.

Dämpning är din andra spak. Mörka eller gråa grundfärgen tills den nästan beter sig som en neutral, så ser de två partnerna plötsligt avsiktliga ut i stället för högljudda. Så blir split-scheman sofistikerade: en djup blågrön, en dammig rosa och en mjuk aprikos använder samma nyanser som den starka versionen, men läses som ett boutiquehotell i stället för en badboll.

Stående inlägg med sommarmeny på en djupt blågrön bakgrund med rosa och aprikosfärgade accenter

En djup blågrön botten gör det mesta av jobbet, och rosa och aprikos sparas till orden och en markering.

### Undvik

- Alla tre nyanserna i full mättnad och lika stor yta
- Brödtext i en partnerfärg ovanpå den andra
- En enda gradient från bas till partner tvärs över hjulet
- En fjärde stark nyans ovanpå

### Gör så här

- En dominerande bas, ofta fördjupad eller dämpad
- Partner med olika ljushet, så att en leder
- En neutral för text och andrum
- Kontrollera kontrasten där orden ligger

## Målarens hjul eller skärmens hjul

Det finns två vanliga färghjul. Det traditionella målarhjulet har rött, gult och blått som primärfärger, så är motsatsen till rött grönt. Skärmar använder rött, grönt och blått ljus, så på ett HSL-hjul är motsatsen till rött cyan. Båda ger giltiga scheman, använd bara samma hjul genomgående. Om du arbetar i CSS är skärmhjulet det som `hsl()` använder, så du kan generera ett schema med lite aritmetik.

```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%);
}
```

Ändra `--h` så flyttas hela det split-komplementära schemat med. Mer om den modellen i [nyans, mättnad och ljushet](https://gradiently.design/sv/guide/hue-saturation-brightness).

För att se en palett fungera på riktiga format kan Designer i Gradiently lägga upp ett inlägg, en story och en banner på en gång, så att du kan bedöma proportionerna i varje storlek i stället för på ett färgkort.

## FAQ

### Vad är split-komplementära färger?

En grundfärg plus de två färger som ligger på var sida om dess komplement på färghjulet. För blått är det rödorange och gulorange.

### Hur hittar man split-komplementära färger?

Hitta grundfärgens komplement genom att lägga till 180 grader på dess nyans, och ta sedan nyanserna cirka 30 grader på var sida om den.

### Är split-komplementärt bättre än komplementärt?

Det är lättare att balansera. Du behåller det mesta av kontrasten, men färgerna krockar mindre eftersom ingen av dem är en exakt motsats.

### Vad är den split-komplementära färgen till rött?

På målarhjulet är det gulgrönt och blågrönt. På ett HSL-hjul för skärm är partnerna till rött en grönaktig cyan och en blåaktig cyan, kring 150 och 210 grader.

### Hur många färger ingår i ett split-komplementärt schema?

Tre nyanser, även om de flesta riktiga paletter lägger till en mörk och en ljus neutral för text och utrymme.