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

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 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. 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. 2

   Hitta dess komplement

   Lägg till 180 grader. Blågrönts komplement är en korallröd på cirka 355 grader.

3. 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. 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.

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 ä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.

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.

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 ä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.

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.

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

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.