Генератор палете боја - Креирајте хармоничне шеме боја

Шта је генератор палете боја?

Генератор палете боја је алат који од једне почетне боје, која се назива примарна боја, прави скуп усклађених боја. Овај генератор узима примарну боју и врсту хармоније, а затим израчунава остатак палете применом правила теорије боја. Подржане су четири врсте хармоније: комплементарна, аналогна, тријадна и монохроматска.

Како алат прави палету

Алат претвара примарну боју из хексадецималног кода (као што је #3B82F6) у модел боја HSL. HSL описује боју помоћу три броја:

• Нијанса: положај боје на кругу боја од 360 степени (0° је црвена, 120° је зелена, а 240° је плава).
• Засићеност: интензитет боје, од 0% (сива) до 100% (чиста боја).
• Светлина: колико је боја блиска црној или белој, од 0% (црна) до 100% (бела).

Свака врста хармоније помера нијансу, светлину или обе вредности, а затим резултат поново претвара у хексадецимални код.

Како израчунати комплементарне боје

Формула:

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

где је h нијанса примарне боје у степенима, а h′ нова нијанса. Корак mod резултат који пређе цео круг враћа на круг боја.

Засићеност и светлина остају исте.

Пример израчунавања: Чиста плава боја, #0000FF, има нијансу 240°, засићеност 100% и светлину 50%. Додавањем 180° добија се нијанса 60°. Претварањем нијансе 60° назад у хексадецимални код, при истој засићености и светлини, добија се #FFFF00, жута боја. Зато овај алат спаја плаву са жутом, а не са наранџастом.

Ово може да буде збуњујуће јер се на часовима ликовне уметности често учи другачији дијаграм боја, RYB дијаграм пигмената (црвена–жута–плава), на коме је супротна боја плавој наранџаста. Овај алат користи HSL дијаграм заснован на RGB моделу, какав користе екрани, па се његови комплементарни парови разликују од дијаграма за мешање боја.

Како израчунати аналогне боје

Аналогне боје се на дијаграму налазе близу примарне боје. Алат генерише две нијансе удаљене 30° и две нијансе удаљене 60° од примарне нијансе, све при истој засићености и светлини.

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

где је h нијанса примарне боје.

Пример израчунавања: Плава боја, #0000FF (нијанса 240°), даје нијансу 270° (#8000FF), нијансу 210° (#0080FF), нијансу 300° (#FF00FF) и нијансу 180° (#00FFFF). Заједно са примарном бојом, палета садржи пет боја.

Како израчунати тријадне боје

Тријадне боје су на кругу боја међусобно удаљене 120°, чиме са примарном бојом образују равномерно распоређену тријаду.

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

Пример израчунавања: Црвена боја, #FF0000 (нијанса 0°), даје нијансу 120° (#00FF00, зелена) и нијансу 240° (#0000FF, плава). Скуп од три боје чине црвена, зелена и плава, исте три нијансе које се користе као примарне на дигиталним екранима.

Како израчунати монохроматске боје

Монохроматске боје задржавају исту нијансу и засићеност, а мењају само светлину. Алат помера светлину за 15 и 30 процентних поена у оба смера, уз ограничење на вредности између 5% и 95%.

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

где је l светлина примарне боје, изражена у процентним поенима.

Пример израчунавања: Плава боја, #0000FF (светлина 50%), даје светлину 65% (#4D4DFF), светлину 35% (#0000B3), светлину 80% (#9999FF) и светлину 20% (#000066).

Због ограничења од 5% и 95%, примарна боја која је већ веома светла или веома тамна може двапут достићи исто ограничење. Црна боја, #000000, даје светлину 15% (#262626), 5% (#0D0D0D), 30% (#4D4D4D) и поново 5% (#0D0D0D), па се једна боја понавља.

Коришћење алата

1. Изаберите примарну боју помоћу бирача боја или унесите хексадецимални код као што је #3B82F6.
2. Изаберите врсту хармоније: комплементарну, аналогну, тријадну или монохроматску.
3. Прегледајте генерисану палету. Узорак сваке боје приказује њен хексадецимални код на дугмету.
4. Кликните на то дугме да бисте копирали хексадецимални код или употребите „Copy All Colors“ да бисте одједном копирали целу палету.

Провера контраста ради приступачности

Узорак сваке боје приказује две мале ознаке: једну за контраст у односу на белу, а другу за контраст у односу на црну. Алат израчунава однос контраста помоћу формуле WCAG (Смернице за приступачност веб-садржаја):

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

где је C однос контраста.

L1 је релативна осветљеност светлије боје, а L2 релативна осветљеност тамније боје. Осветљеност се израчунава на основу вредности црвене, зелене и плаве компоненте боје. Ознака приказује „AA“ када је однос 4,5 или већи, што је минимум WCAG стандарда за текст нормалне величине. Приказује „!“ када је однос мањи од 4,5. Преласком показивача преко ознаке приказује се тачан однос. Црни текст на белој позадини има однос 21, највећу могућу вредност.

Алат користи исто правило контраста за избор боје дугмета за копирање на сваком узорку. Упоређује боју узорка са црном и белом, а затим поставља ону од те две боје која се боље види. Промена се дешава при релативној осветљености од око 0,179, на тачки где су оба односа једнака.

Најчешће постављана питања

Шта је генератор палете боја? То је алат који прави скуп међусобно усклађених боја, полазећи од једне примарне боје и изабраног правила хармоније.

Зашто овај алат спаја плаву са жутом, а не са наранџастом код комплементарних боја? Алат ротира нијансу за 180° на HSL дијаграму, који се заснива на начину на који екрани мешају црвену, зелену и плаву светлост. Дијаграм црвене, жуте и плаве боје који се учи на часовима ликовне уметности даје другачије комплементарне парове јер меша пигменте, а не светлост.

Колико боја производи свака врста хармоније? Комплементарна производи укупно 2 боје, укључујући примарну. Тријадна производи 3. Аналогна производи 5. Монохроматска производи 5.

Који модел боја алат интерно користи? HSL (нијанса, засићеност, светлина). Он претвара улазни хексадецимални код у HSL, обавља израчунавање, а затим резултат поново претвара у хексадецимални код.

Да ли алат проверава приступачност боја? Да. Узорак сваке боје показује да ли има довољан контраст у односу на белу и црну да би испунио стандард WCAG AA за текст нормалне величине, који захтева однос од најмање 4,5.

Могу ли за један пројекат да користим више врста хармоније? Да. Многи дизајни комбинују више врста хармоније, на пример аналогни скуп за главне боје и једну комплементарну боју за дугме или истицање.

Формати боја

Алат записује сваку генерисану боју као шестоцифрени хексадецимални код којем претходи знак # (на пример #ff0000 за црвену). Хексадецимални кодови директно представљају вредности црвене, зелене и плаве, од 0 до 255 за сваку компоненту. Примарна боја се приказује тачно онако како је унесена, па скраћени облик са три цифре, као што је #F00, остаје у кратком облику. Кодови са три цифре означавају исту боју као шестоцифрени облик: свака цифра се удвостручује, па је #F00 исто што и #FF0000. HSL је алтернативни начин описивања истих боја, помоћу нијансе, засићености и светлине уместо количина црвене, зелене и плаве.