Farveharmonier: komplementære, analoge, triadiske farver og flere

Hvad en farveharmoni er

En harmoni er en regel for at vælge farver, der hører sammen. Du tager en basisfarve, beholder dens lyshed og farvestyrke og drejer kun farvetonen med bestemte vinkler på et farvehjul.

Vinklerne er den lette del. Hvilket hjul du drejer, betyder lige så meget, fordi det klassiske HSL-hjul og et perceptuelt hjul som OKLCH giver synligt forskellige resultater ved samme vinkel. Alle eksempler nedenfor tager udgangspunkt i #2a7fbf, en mellemblå.

Komplementær, split-komplementær, analog, triadisk, tetradisk, kvadratisk

Hver række beholder basisfarvens OKLCH-lyshed, 0,577, og dens kroma, 0,127. Kun farvetonen drejes med de angivne vinkler. Når en drejet farve falder uden for sRGB, sænkes kroma en smule, så den passer, og derfor er et par af farverne lidt mindre klare. Monokrom er undtagelsen: den beholder farvetonen og ændrer lysheden i trin på 0,12.

• Komplementær: den stærkeste spænding. Brug kun den anden farve til små accenter, fx en knap med en opfordring til handling.
• Split-komplementær: samme energi som komplementær, men lettere at balancere, fordi accenten er delt i to naboer til den modsatte farvetone.
• Analog: rolig og sammenhængende. God til illustrationer og baggrunde, svag når et enkelt element skal skille sig ud.
• Triadisk, tetradisk og kvadratisk: livlige og svære at styre. Lad én farve føre an, og hold de andre små.
• Monokrom: én farvetone i flere trin af lyshed. Det sikreste valg til brugerflader, da kontrasten alligevel kommer fra lysheden.

Hvorfor HSL-farvehjulet giver harmonier i ubalance

De fleste farvehjul i designværktøjer er HSL: de drejer farvetonen og beholder tallene for mætning og lyshed i HSL. Men lyshed i HSL er en formel, ikke det, du ser. Drej en gylden gul 180° i HSL, og du får en dyb blå, der ser langt mørkere ud end den gule.

Drejer du i OKLCH, forbliver den oplevede lyshed den samme. Her er #f4b400 drejet på begge måder med OKLCH-lysheden for hvert resultat.

HSL-sættet spænder over lyshed fra 0,489 til 0,857, så den blå og den lilla synker, og den mintgrønne lyser. OKLCH-sættet holder sig mellem 0,802 og 0,817. Det samme sker med rene RGB-primærfarver: #ff0000, #00ff00 og #0000ff er en perfekt triade i HSL, men deres OKLCH-lyshed er 0,628, 0,866 og 0,452.

Der er en pris. En blå, der er lige så lys som denne gule, kan ikke være særlig klar på en sRGB-skærm, så komplementærfarven i OKLCH, #97c0ff, har kroma 0,10 i stedet for 0,166. Du vælger mellem lige lyshed og lige farvestyrke. Med gul og blå kan du ikke få begge dele.

Kunstnerens RYB-hjul vs skærmens RGB-hjul

Hjulet fra billedkunsttimerne er RYB: rød, gul og blå som primærfarver, ligesom når man blander maling. Her er komplementærfarven til rød grøn, og komplementærfarven til blå orange. Skærme blander lys, så digitale værktøjer bruger et RGB-hjul, hvor komplementærfarven til rød er cyan, og komplementærfarven til blå er gul.

Ingen af dem er forkerte, de svarer på forskellige spørgsmål. RYB følger malertraditionen, RGB og OKLCH følger, hvordan skærme og øjne fungerer. Giver et designværktøj dig cyan, hvor du ventede grøn, bruger det RGB-hjulet.

OKLCH-kolonnen viser, hvad lige lyshed gør ved ekstreme farver. Komplementærfarven til ren blå bliver en mørk okker med samme lyshed, 0,45, og komplementærfarven til ren gul bliver en næsten hvid lavendel ved 0,96.

60-30-10-reglen brugt på en harmoni

En harmoni fortæller dig, hvilke farver du skal bruge, men ikke hvor meget af hver. 60-30-10-reglen udfylder det hul: omkring 60 % af fladen går til en dominerende farve, 30 % til en sekundær og 10 % til en accent. Lige store andele får selv en god harmoni til at virke urolig.

I en brugerflade er de 60 % som regel en næsten neutral farve med et strejf af basisfarvetonen, de 30 % er basisfarven, og de 10 % er den komplementære accent. Her er et sæt bygget på #2a7fbf, klar til at kopiere.

:root {
    --surface: #eff6fd;
    --primary: #2a7fbf;
    --accent: #ab6708;
    --text: #15232f;
}

Sådan tjekker du kontrasten i en harmoni

Forskel i farvetone gør ikke tekst læsbar, det gør forskel i lyshed. Det komplementære par ovenfor ligger så langt fra hinanden i farvetone, som farver kan, men #2a7fbf på #ab6708 har et WCAG-forhold på 1,05:1 og en APCA-værdi på Lc 0: som tekst er det praktisk talt usynligt.

Lige lyshed har også en fordel. Hvid tekst på hver farve i OKLCH-harmonierne ovenfor lander mellem 4,04:1 og 4,62:1. På HSL-versionen af de samme harmonier svinger den fra 2,15:1 til 8,90:1. Derfor virker én rettelse for hele OKLCH-sættet: sænk lysheden til 0,52, så består hvid tekst 4,5:1 på enhver farvetone ved kroma 0,127, fra 5,00:1 til 5,91:1.

Vil du bruge to farver fra en harmoni sammen som tekst og baggrund, så træk dem fra hinanden i lyshed: behold farvetonerne, og skub den ene mod 0,35 og den anden mod 0,93. Tjek derefter det faktiske par i en kontrasttjekker, og kør paletten gennem en farveblindhedssimulator, hvis accenten bærer betydning.

Spørgsmål og svar