Генератор кольорової палітри - Створення гармонійних колірних схем

Що таке генератор палітри кольорів?

Генератор палітри кольорів — це інструмент, який створює набір узгоджених кольорів на основі одного початкового кольору, що називається основним. Цей генератор отримує основний колір і тип гармонії, а потім обчислює решту палітри за правилами теорії кольору. Він підтримує чотири типи гармонії: комплементарну, аналогову, тріадну та монохроматичну.

Як інструмент створює палітру

Інструмент перетворює основний колір із шістнадцяткового коду, наприклад #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. Натисніть цю кнопку, щоб скопіювати шістнадцятковий код, або скористайтеся командою «Копіювати всі кольори», щоб одразу скопіювати всю палітру.

Перевірка контрастності для доступності

На кожному зразку кольору показано два невеликі індикатори: один для контрастності з білим, інший — для контрастності з чорним. Інструмент обчислює коефіцієнт контрастності за формулою 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 — альтернативний спосіб опису тих самих кольорів за допомогою тону, насиченості та світлоти замість значень червоного, зеленого та синього компонентів.