Генератор колірних палітр

Чому вдала колірна палітра тримає весь дизайн

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

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

Теорія кольору без зайвих термінів

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

• Комплементарна використовує два кольори, що знаходяться прямо навпроти один одного, — наприклад, синій і помаранчевий. Вона енергійна і чудово привертає увагу, хоча надто велика кількість обох кольорів конкурує за фокус, тому нехай один домінує, а другий служить акцентом.
• Аналогова використовує три кольори, що стоять поруч, — наприклад, червоний, помаранчевий і жовтий. Низькоконтрастна, спокійна, саме таку гармонію ми бачимо в природі. Приємна для ока, але може знадобитися додати контраст, щоб уникнути монотонності.
• Тріадна використовує три кольори, рівномірно розміщені по колу, — наприклад, червоний, жовтий і синій. Яскрава і збалансована; найкраще виглядає, коли один колір домінує, а два інших грають допоміжну роль.
• Монохромна тримається одного відтінку і варіює його яскравість та насиченість. Це найнадійніша схема з усіх — чиста і єдина, і гарна запасна варіант, коли жодна інша не відчувається правильною.

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

HEX, RGB та HSL простими словами

Кожен скопійований колір представлений у кількох нотаціях — і всі вони описують одне й те саме різними способами.

HEX — це шестисимвольний код, який зустрічається найчастіше, наприклад #3A7BD5. По суті це червоний, зелений і синій, упаковані в один рядок, по два символи кожен. Він компактний і саме його ви будете вставляти в CSS або інструмент для дизайну.

RGB описує ті самі три канали числами від 0 до 255, наприклад rgb(58, 123, 213). Той самий колір, зручніший для читання, і зручний, коли потрібен альфа-канал для прозорості.

HSL описує колір так, як люди насправді його сприймають: відтінок (який колір, від 0 до 360 градусів по колу), насиченість (наскільки яскравий) і світлість (наскільки світлий). Це найпростіший формат для ручного налаштування: зміна світлості або насиченості дає рівно той результат, який ви очікуєте, без здогадок. Якщо потрібно конвертувати між форматами, швидке перетворення HEX у RGB зробить це без клопоту.

Не забувайте про контраст і доступність

Палітра може виглядати розкішно і при цьому підвести в момент, коли хтось намагається прочитати на ній текст. Контраст — це місце, де краса зустрічається з практичністю. Рекомендації WCAG (Web Content Accessibility Guidelines) встановлюють чітку межу: звичайний основний текст має мати коефіцієнт контрасту щонайменше 4,5:1 відносно фону, а великий текст — щонайменше 3:1. Це не бюрократична формальність, а різниця між читачем, який легко пробігає сторінку, і тим, хто морщиться, здається і йде.

Практичний підхід — перевіряти пари переднього і заднього плану під час роботи, а не після. Світло-сірий на білому може виглядати елегантно в макеті і стати невидимим на телефоні при денному світлі. Коли комбінація не проходить перевірку, зазвичай достатньо зробити один колір темнішим або світлішим — не викидати всю схему. Тримайте яскраві акцентні кольори для кнопок, посилань і виділень, а не для довгих блоків тексту, — і більшість проблем із контрастом минуть вас стороною.

Практичний робочий процес

Ось підхід, який добре зарекомендував себе в різних проектах. Почніть з одного якірного кольору, у якому ви впевнені — часто це фірмовий колір або відтінок, що відповідає потрібному настрою. Зафіксуйте його, а потім дозвольте генератору побудувати навколо нього гармонію. Перебирайте комплементарну, аналогову і тріадну схеми, поки щось не відчується правильним; не обдумуйте перший прохід занадто довго — ви шукаєте напрямок, а не остаточну відповідь.

Коли кандидат знайдено, розподіліть ролі. Оберіть домінантний колір для фону і великих областей, вторинний — для структурних елементів і один виразний акцент для тих деталей, що мають кидатися в очі. Приблизний розподіл 60-30-10 від домінантного до вторинного до акцентного зберігає баланс без зайвої жорсткості. Потім перевірте контраст у кожній парі текст-фон, скопіюйте hex-коди — і готово. Зберігайте вдалі палітри, бо та, що ідеально спрацювала в одному проекті, часто стає відправною точкою для наступного. Коли будете готові продовжити, решта нашої колекції всі генератори впорається з іншими завданнями.

Часті запитання