Barevné harmonie: komplementární, analogické, triadické a další

Co je barevná harmonie

Harmonie je pravidlo, jak vybrat barvy, které k sobě patří. Vezmete základní barvu, ponecháte její světlost a sytost a otočíte jen tón o dané úhly na barevném kruhu.

Úhly jsou ta snadná část. Stejně důležité je, jaký kruh otáčíte, protože klasický kruh HSL a percepční kruh jako OKLCH dávají při stejném úhlu viditelně jiné výsledky. Všechny příklady níže vycházejí z #2a7fbf, středně modré.

Komplementární, rozdělená komplementární, analogická, triadická, tetradická, čtvercová

Každý řádek drží světlost základní barvy v OKLCH, 0,577, i její chroma, 0,127. Otáčí se jen tón, a to o uvedené úhly. Když otočená barva vypadne mimo sRGB, chroma se mírně sníží, aby se vešla, proto jsou dvě tři barvy o něco méně syté. Výjimkou je monochromatická harmonie: drží tón a mění světlost po 0,12.

• Komplementární: nejsilnější napětí. Druhou barvu používejte jen na malé akcenty, třeba na hlavní tlačítko výzvy k akci.
• Rozdělená komplementární: stejná energie jako u komplementární, ale snáz se vyvažuje, protože akcent je rozdělený do dvou sousedů protilehlého tónu.
• Analogická: klidná a soudržná. Hodí se na ilustrace a pozadí, slabá je tam, kde má jeden prvek vyniknout.
• Triadická, tetradická a čtvercová: živé a těžko zvladatelné. Nechte jednu barvu vést a ostatní držte v malém množství.
• Monochromatická: jeden tón v několika stupních světlosti. Nejbezpečnější volba pro rozhraní, protože kontrast stejně vzniká ze světlosti.

Proč barevný kruh HSL dává nevyvážené harmonie

Většina barevných kruhů v grafických nástrojích pracuje v HSL: otáčí tón a drží čísla sytosti a světlosti HSL. Světlost v HSL je ale vzorec, ne to, co vidíte. Otočte zlatožlutou o 180° v HSL a dostanete sytě modrou, která vypadá mnohem tmavší než žlutá.

Otáčení v OKLCH drží vnímanou světlost stejnou. Tady je #f4b400 otočená oběma způsoby, u každého výsledku se světlostí v OKLCH.

Sada z HSL má světlost od 0,489 do 0,857, takže modrá a fialová zapadnou a mátově zelená svítí. Sada z OKLCH zůstává mezi 0,802 a 0,817. Totéž platí pro čisté primární barvy RGB: #ff0000, #00ff00 a #0000ff tvoří dokonalou triádu v HSL, ale jejich světlost v OKLCH je 0,628, 0,866 a 0,452.

Něco za něco. Modrá stejně světlá jako tato žlutá nemůže být na obrazovce sRGB příliš sytá, proto má komplementární barva z OKLCH #97c0ff chroma 0,10 místo 0,166. Volíte mezi stejnou světlostí a stejnou sytostí, u žluté a modré nemůžete mít obojí.

Malířský kruh RYB a obrazovkový kruh RGB

Kruh z hodin výtvarné výchovy je RYB: červená, žlutá a modrá jako základní barvy, jako při míchání barev na paletě. Doplňkem červené je na něm zelená a doplňkem modré oranžová. Obrazovky míchají světlo, proto digitální nástroje používají kruh RGB, kde je doplňkem červené azurová a doplňkem modré žlutá.

Ani jedno není špatně, odpovídají na jiné otázky. RYB vychází z malířské tradice, RGB a OKLCH z toho, jak fungují obrazovky a oči. Když vám grafický nástroj nabídne azurovou tam, kde jste čekali zelenou, používá kruh RGB.

Sloupec OKLCH ukazuje, co udělá stejná světlost s extrémními barvami. Doplňkem čisté modré se stane tmavý okr se stejnou světlostí 0,45 a doplňkem čisté žluté téměř bílá levandulová se světlostí 0,96.

Pravidlo 60-30-10 použité na harmonii

Harmonie vám řekne, jaké barvy použít, ne kolik které. Tuhle mezeru vyplňuje pravidlo 60-30-10: zhruba 60 % plochy dostane dominantní barva, 30 % sekundární a 10 % akcent. Při rovných podílech působí i dobrá harmonie neklidně.

V rozhraní je těch 60 % obvykle skoro neutrální barva s nádechem základního tónu, 30 % je základní barva a 10 % komplementární akcent. Tady je sada připravená ke zkopírování, postavená z #2a7fbf.

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

Jak zkontrolovat kontrast harmonie

Čitelnost textu nedělá rozdíl v tónu, ale rozdíl ve světlosti. Komplementární dvojice výše je od sebe tónem tak daleko, jak to jen jde, a přesto má #2a7fbf na #ab6708 poměr podle WCAG 1,05:1 a APCA Lc 0: jako text prakticky neviditelné.

Stejná světlost má i výhodu. Bílý text na kterékoli barvě harmonií z OKLCH výše vychází mezi 4,04:1 a 4,62:1. U verze stejných harmonií z HSL kolísá od 2,15:1 do 8,90:1. Pro celou sadu z OKLCH proto stačí jedna úprava: snižte světlost na 0,52 a bílý text projde 4,5:1 na jakémkoli tónu s chroma 0,127, od 5,00:1 do 5,91:1.

Chcete-li použít dvě barvy harmonie spolu jako text a pozadí, oddalte je ve světlosti: tóny ponechte a jednu posuňte k 0,35, druhou k 0,93. Pak skutečnou dvojici ověřte v kontrole kontrastu a paletu projděte simulátorem barvosleposti, pokud akcent nese význam.

Otázky a odpovědi