Generátor farebnej palety - Vytvorte harmonické farebné schémy

Čo je generátor farebnej palety?

Generátor farebnej palety je nástroj, ktorý z jednej východiskovej farby, nazývanej primárna farba, vytvorí súbor navzájom ladiacich farieb. Tento generátor farebnej palety prijme primárnu farbu a typ harmónie a potom pomocou pravidiel teórie farieb vypočíta zvyšok palety. Podporuje štyri typy harmónie: komplementárnu, analógovú, triadickú a monochromatickú.

Ako nástroj vytvára paletu

Nástroj prevedie primárnu farbu z hexadecimálneho kódu (napríklad #3B82F6) do farebného modelu HSL. HSL opisuje farbu tromi číslami:

• Odtieň: poloha farby na 360-stupňovom farebnom kruhu (0° je červená, 120° zelená, 240° modrá).
• Sýtosť: intenzita farby od 0 % (sivá) po 100 % (čistá farba).
• Svetlosť: miera priblíženia farby k čiernej alebo bielej od 0 % (čierna) po 100 % (biela).

Každý typ harmónie posunie odtieň, svetlosť alebo oboje a potom výsledok prevedie späť na hexadecimálny kód.

Ako vypočítať komplementárne farby

Vzorec:

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

kde h je odtieň základnej farby v stupňoch a h′ nový odtieň. Operácia modulo vráti výsledok, ktorý prekročí celú otáčku, späť na farebné koleso.

Sýtosť a svetlosť zostávajú rovnaké.

Vypočítaný príklad: Čistá modrá, #0000FF, má odtieň 240°, sýtosť 100 % a svetlosť 50 %. Po pridaní 180° získame odtieň 60°. Prevedením odtieňa 60° späť na hexadecimálny kód pri rovnakej sýtosti a svetlosti vznikne #FFFF00, teda žltá. Tento nástroj preto spája modrú so žltou, nie s oranžovou.

Môže to byť mätúce, pretože na hodinách výtvarnej výchovy sa často vyučuje iný farebný kruh, pigmentový kruh RYB (červená – žltá – modrá), v ktorom je opačnou farbou modrej oranžová. Tento nástroj pracuje s farebným kruhom HSL založeným na modeli RGB, ktorý používajú obrazovky, preto sa jeho komplementárne dvojice líšia od kruhu používaného pri miešaní farieb.

Ako vypočítať analógové farby

Analógové farby ležia na kruhu blízko primárnej farby. Nástroj vytvorí dva odtiene vzdialené od primárneho odtieňa o 30° a dva odtiene vzdialené o 60°, pričom všetky majú rovnakú sýtosť a svetlosť.

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

kde h je odtieň základnej farby.

Vypočítaný príklad: Modrá, #0000FF (odtieň 240°), vytvorí odtieň 270° (#8000FF), odtieň 210° (#0080FF), odtieň 300° (#FF00FF) a odtieň 180° (#00FFFF). Spolu s primárnou farbou obsahuje paleta päť farieb.

Ako vypočítať triadické farby

Triadické farby sú na farebnom kruhu od seba vzdialené 120°, takže spolu s primárnou farbou tvoria rovnomerne rozmiestnenú trojicu.

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

Vypočítaný príklad: Červená, #FF0000 (odtieň 0°), vytvorí odtieň 120° (#00FF00, zelená) a odtieň 240° (#0000FF, modrá). Trojfarebnú súpravu tvoria červená, zelená a modrá, teda rovnaké tri odtiene, ktoré sa používajú ako základné farby na digitálnych obrazovkách.

Ako vypočítať monochromatické farby

Monochromatické farby zachovávajú rovnaký odtieň a sýtosť a mení sa iba svetlosť. Nástroj posúva svetlosť v oboch smeroch o 15 a 30 percentuálneho bodu, pričom výsledok obmedzuje na rozsah od 5 % do 95 %.

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

kde l je svetlosť základnej farby v percentuálnych bodoch.

Vypočítaný príklad: Modrá, #0000FF (svetlosť 50 %), vytvorí svetlosť 65 % (#4D4DFF), svetlosť 35 % (#0000B3), svetlosť 80 % (#9999FF) a svetlosť 20 % (#000066).

Kvôli obmedzeniam na 5 % a 95 % môže primárna farba, ktorá je už veľmi svetlá alebo veľmi tmavá, naraziť na rovnakú hranicu dvakrát. Čierna, #000000, poskytne svetlosť 15 % (#262626), 5 % (#0D0D0D), 30 % (#4D4D4D) a znova 5 % (#0D0D0D), takže jedna farba sa opakuje.

Používanie nástroja

1. Vyberte primárnu farbu pomocou výberu farby alebo zadajte hexadecimálny kód, napríklad #3B82F6.
2. Vyberte typ harmónie: komplementárny, analógový, triadický alebo monochromatický.
3. Prečítajte si vygenerovanú paletu. Každý vzorník zobrazuje svoj hexadecimálny kód na tlačidle.
4. Kliknutím na toto tlačidlo skopírujete hexadecimálny kód alebo pomocou možnosti „Copy All Colors“ skopírujete celú paletu naraz.

Kontrola kontrastu z hľadiska prístupnosti

Každý farebný vzorník zobrazuje dva malé štítky: jeden pre kontrast voči bielej a druhý pre kontrast voči čiernej. Nástroj vypočítava kontrastný pomer podľa vzorca WCAG (Web Content Accessibility Guidelines):

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

kde C je pomer kontrastu.

L1 je relatívna luminancia svetlejšej farby a L2 relatívna luminancia tmavšej farby. Luminancia vychádza z červených, zelených a modrých hodnôt farby. Štítok zobrazuje „AA“, keď je pomer 4,5 alebo vyšší, čo je minimum WCAG pre text bežnej veľkosti. Keď je pomer nižší ako 4,5, zobrazuje „!“. Po umiestnení kurzora na štítok sa zobrazí presný pomer. Čierny text na bielom pozadí dosahuje pomer 21, teda najvyššiu možnú hodnotu.

Nástroj používa rovnaké pravidlo kontrastu aj pri výbere farby tlačidla kopírovania na každom vzorníku. Porovná farbu vzorníka s čiernou a bielou a potom použije tú z týchto dvoch možností, na ktorej je text čitateľnejší. K prepnutiu dochádza pri relatívnej luminancii približne 0,179, čo je bod, v ktorom sú oba pomery rovnaké.

Najčastejšie otázky

Čo je generátor farebnej palety? Je to nástroj, ktorý na základe jednej primárnej farby a zvoleného pravidla harmónie vytvára súbor farieb, ktoré spolu ladia.

Prečo tento nástroj spája modrú so žltou namiesto oranžovej pri komplementárnych farbách? Nástroj otáča odtieň o 180° na kruhu HSL, ktorý vychádza zo spôsobu miešania červeného, zeleného a modrého svetla na obrazovkách. Pigmentový kruh červenej, žltej a modrej farby, ktorý sa vyučuje na hodinách výtvarnej výchovy, vytvára iné komplementárne dvojice, pretože mieša pigmenty, nie svetlo.

Koľko farieb vytvára každý typ harmónie? Komplementárna harmónia vytvára celkovo 2 farby vrátane primárnej. Triadická vytvára 3. Analógová vytvára 5. Monochromatická vytvára 5.

Aký farebný model používa nástroj interne? HSL (odtieň, sýtosť, svetlosť). Vstupný hexadecimálny kód prevedie na HSL, vykoná výpočet a potom výsledok prevedie späť na hexadecimálny kód.

Kontroluje nástroj, či sú farby prístupné? Áno. Každý vzorník ukazuje, či má dostatočný kontrast voči bielej a čiernej, aby spĺňal štandard WCAG AA pre bežný text, ktorý vyžaduje pomer aspoň 4,5.

Môžem v projekte použiť viac než jeden typ harmónie? Áno. Mnohé návrhy kombinujú typy harmónie, napríklad analógovú súpravu pre hlavné farby a jednu komplementárnu farbu pre tlačidlo alebo zvýraznenie.

Formáty farieb

Nástroj zapisuje každú vygenerovanú farbu ako šesťmiestny hexadecimálny kód, pred ktorým je znak # (napríklad #ff0000 pre červenú). Hexadecimálne kódy priamo mapujú hodnoty červenej, zelenej a modrej od 0 do 255 pre každú zložku. Primárna farba sa zobrazuje presne tak, ako bola zadaná, takže trojmiestny skrátený zápis, napríklad #F00, zostáva v krátkom tvare. Trojmiestne kódy označujú rovnakú farbu ako šesťmiestny tvar: každá číslica sa zdvojnásobí, takže #F00 je #FF0000. HSL je alternatívny spôsob opisu tých istých farieb pomocou odtieňa, sýtosti a svetlosti namiesto množstva červenej, zelenej a modrej.