Generátor barevných palet - Vytvořte harmonické barevné schémata

Co je generátor barevné palety?

Generátor barevné palety je nástroj, který z jedné výchozí barvy, zvané primární barva, sestaví sadu vzájemně ladících barev. Tento generátor barevné palety přijme primární barvu a typ harmonie a poté pomocí pravidel teorie barev vypočítá zbytek palety. Podporuje čtyři typy harmonie: komplementární, analogickou, triadickou a monochromatickou.

Jak nástroj sestavuje paletu

Nástroj převede primární barvu z hexadecimálního kódu (například #3B82F6) do barevného modelu HSL. Model HSL popisuje barvu pomocí tří čísel:

• Odstín: poloha barvy na barevném kruhu o 360 stupních (0° je červená, 120° zelená a 240° modrá).
• Sytost: intenzita barvy od 0 % (šedá) do 100 % (čistá barva).
• Světlost: míra přiblížení barvy k černé nebo bílé, od 0 % (černá) do 100 % (bílá).

Každý typ harmonie posune odstín, světlost nebo obojí a poté výsledek převede zpět na hexadecimální kód.

Jak vypočítat komplementární barvy

Vzorec:

$h' = (h + 180) \bmod 360$

kde h je odstín základní barvy ve stupních a h′ nový odstín. Operace modulo vrací výsledek po překročení celé otáčky zpět na barevný kruh.

Sytost a světlost zůstávají stejné.

Příklad výpočtu: Čistá modrá, #0000FF, má odstín 240°, sytost 100 % a světlost 50 %. Po přičtení 180° získáme odstín 60°. Převodem odstínu 60° zpět na hexadecimální kód při stejné sytosti a světlosti vznikne #FFFF00, tedy žlutá. Tento nástroj proto spojuje modrou se žlutou, nikoli s oranžovou.

To může být matoucí, protože výtvarná výuka často používá jiný barevný kruh, pigmentový kruh RYB (červená–žlutá–modrá), na němž je protikladem modré oranžová. Tento nástroj pracuje s kruhem HSL založeným na modelu RGB, který používají obrazovky, takže jeho komplementární dvojice se od kruhu pro míchání barev liší.

Jak vypočítat analogické barvy

Analogické barvy leží na kruhu v blízkosti primární barvy. Nástroj vytvoří dva odstíny vzdálené od primárního odstínu o 30° a dva odstíny vzdálené o 60°, všechny se stejnou sytostí a světlostí.

$h \pm 30^{\circ}, \qquad h \pm 60^{\circ}$

kde h je odstín základní barvy.

Příklad výpočtu: Modrá, #0000FF (odstín 240°), vytvoří odstín 270° (#8000FF), odstín 210° (#0080FF), odstín 300° (#FF00FF) a odstín 180° (#00FFFF). Paleta tak spolu s primární barvou obsahuje pět barev.

Jak vypočítat triadické barvy

Triadické barvy jsou na kruhu od sebe vzdálené 120°, takže spolu s primární barvou tvoří rovnoměrně rozmístěnou trojici.

$h + 120^{\circ}, \qquad h + 240^{\circ}$

Příklad výpočtu: Červená, #FF0000 (odstín 0°), vytvoří odstín 120° (#00FF00, zelená) a odstín 240° (#0000FF, modrá). Tuto trojici tvoří červená, zelená a modrá, tedy stejné tři odstíny, které se používají jako primární barvy na digitálních obrazovkách.

Jak vypočítat monochromatické barvy

Monochromatické barvy zachovávají stejný odstín a sytost a mění pouze světlost. Nástroj posouvá světlost v každém směru o 15 a 30 procentního bodu, přičemž ji omezuje na rozmezí 5 % až 95 %.

$l \pm 15, \qquad l \pm 30$

kde l je světlost základní barvy v procentních bodech.

Příklad výpočtu: Modrá, #0000FF (světlost 50 %), vytvoří světlost 65 % (#4D4DFF), světlost 35 % (#0000B3), světlost 80 % (#9999FF) a světlost 20 % (#000066).

Kvůli omezením 5 % a 95 % může primární barva, která je již velmi světlá nebo velmi tmavá, narazit na stejnou mez dvakrát. Černá, #000000, poskytne světlost 15 % (#262626), 5 % (#0D0D0D), 30 % (#4D4D4D) a znovu 5 % (#0D0D0D), takže se jedna barva opakuje.

Použití nástroje

1. Zvolte primární barvu pomocí výběru barvy nebo zadejte hexadecimální kód, například #3B82F6.
2. Zvolte typ harmonie: komplementární, analogický, triadický nebo monochromatický.
3. Prohlédněte si vygenerovanou paletu. Každý vzorek zobrazuje svůj hexadecimální kód na tlačítku.
4. Kliknutím na toto tlačítko hexadecimální kód zkopírujete, případně použijte možnost „Copy All Colors“ a zkopírujte celou paletu najednou.

Kontrola kontrastu pro přístupnost

Každý barevný vzorek zobrazuje dva malé odznaky: jeden pro kontrast vůči bílé a druhý pro kontrast vůči černé. Nástroj vypočítá kontrastní poměr pomocí vzorce WCAG (pravidla přístupnosti webového obsahu):

$C = \frac{L_{1} + 0.05}{L_{2} + 0.05}$

kde C je poměr kontrastu.

L1 je relativní jas světlejší barvy a L2 relativní jas tmavší barvy. Jas se určuje z červené, zelené a modré složky barvy. Odznak zobrazuje „AA“, když je poměr 4,5 nebo vyšší, což je minimum WCAG pro text běžné velikosti. Pokud je poměr nižší než 4,5, zobrazuje „!“. Po najetí kurzorem na odznak se zobrazí přesný poměr. Černý text na bílém pozadí dosahuje poměru 21, což je nejvyšší možná hodnota.

Nástroj používá stejné pravidlo kontrastu také k výběru barvy tlačítka pro kopírování u každého vzorku. Porovná barvu vzorku s černou a bílou a poté použije tu z nich, na níž je text lépe čitelný. Ke změně dochází při relativním jasu přibližně 0,179, což je bod, v němž jsou oba poměry stejné.

Často kladené otázky

Co je generátor barevné palety? Je to nástroj, který z jedné primární barvy a zvoleného pravidla harmonie vytváří sadu vzájemně ladících barev.

Proč tento nástroj spojuje modrou se žlutou místo s oranžovou u komplementárních barev? Nástroj otáčí odstín o 180° na kruhu HSL, který vychází ze způsobu, jakým obrazovky míchají červené, zelené a modré světlo. Pigmentový kruh červená–žlutá–modrá používaný ve výtvarné výuce vytváří jiné komplementární dvojice, protože míchá pigmenty, nikoli světlo.

Kolik barev vytváří jednotlivé typy harmonie? Komplementární harmonie vytváří celkem 2 barvy (včetně primární). Triadická vytváří 3 barvy. Analogická vytváří 5 barev. Monochromatická vytváří 5 barev.

Jaký barevný model nástroj interně používá? HSL (odstín, sytost, světlost). Vstupní hexadecimální kód převede na HSL, provede výpočet a poté výsledek převede zpět na hexadecimální kód.

Kontroluje nástroj, zda jsou barvy přístupné? Ano. Každý vzorek zobrazuje, zda má vůči bílé a černé dostatečný kontrast pro splnění standardu WCAG AA pro běžný text, který vyžaduje poměr nejméně 4,5.

Lze pro jeden projekt použít více než jeden typ harmonie? Ano. Mnoho návrhů kombinuje různé typy harmonie, například analogickou sadu pro hlavní barvy a jednu komplementární barvu pro tlačítko nebo zvýraznění.

Formáty barev

Nástroj zapisuje každou vygenerovanou barvu jako šesticiferný hexadecimální kód, kterému předchází znak # (například #ff0000 pro červenou). Hexadecimální kódy přímo odpovídají hodnotám červené, zelené a modré složky v rozsahu od 0 do 255 pro každou z nich. Primární barva se zobrazuje přesně tak, jak byla zadána, takže třímístná zkrácená podoba, například #F00, zůstane ve zkráceném formátu. Třímístné kódy označují stejnou barvu jako šesticiferná podoba: každá číslice se zdvojuje, takže #F00 je #FF0000. HSL je alternativní způsob popisu stejných barev pomocí odstínu, sytosti a světlosti namísto hodnot červené, zelené a modré.