Як підібрати кольори для проєкту, знайти вдалі комбінації, не повторюватися, не повторювати конкурентів, відшукати натхнення. І добірка з 20-ти онлайн-сервісів, які можуть полегшити це завдання.
Колір - це інструмент дизайнера. Це твоє послання користувачам. Спосіб висловити думку, передати потрібний настрій, підкреслити позиціонування продукту, допомогти замовнику досягти своїх цілей. І при цьому ще залишається аспект естетики.
Врахувати потрібно багато чого. І при цьому якось постаратися зробити проект оригінальним. Що буває не так просто, коли є вже певні галузеві стандарти. Ти можеш створити гарне рішення для продукту, вибрати потрібні контрасти, вписатися в настрій, але отримати щось схоже з уже відомим брендом. Тому що найкрутіші поєднання вже десь були. Але все не так страшно - просто потрібно знати правила створення вдалих варіантів і, можливо, вдатися для натхнення до сучасних онлайн-сервісів.
Ідеальні комбінації
У колористиці давно виділили кілька варіантів вдалих поєднань. Тут потрібно просто зрозуміти принцип і підставляти під нього свої варіанти відтінків. Для цього візьми коло Іттена і поекспериментуй.
Ось класичні варіанти складання палітри:
- Монохроматичний - один колір, але три його відтінки, які стоять поруч у колі;
- Аналоговий - бери три кольори, які стоять поруч;
- Комплементарний - два кольори, які розташовані на протилежних сторонах кола;
- Тріадичний - розділи коло знаком Мерседеса і бери три рівновіддалені один від одного кольори;
- Спліт-тріада - перший колір + другий через один від нього + один протилежний на колі;
- Тетрадичний - два сусідні кольори + два протилежні їм;
- Квадратичний - діли коло на 4 і бери всі 4 рівновіддалених кольори.
З цієї бази народжуються різні комбінації, розширені версії та доопрацювання. Але достатньо для початку й основних комбінацій.
Важливо: використовувати тренди потрібно (наприклад, колір року Pantone), але якщо це стосується короткострокових проєктів. Коли створюєш сайт або брендбук, які застосовуватимуться роки поспіль - роби щось універсальне. Інакше застарілий тренд зіпсує враження про бренд.
Контрасти
Можна не бути художником, підбір кольору - це питання грамотного підходу і чіткого розрахунку. Наприклад, завжди працює правило "60-30-10":
- 60% - базовий колір, який переважатиме;
- 30% - допоміжний колір, часто схожого відтінку з основним;
- 10% - контрастний колір, який відтінятиме основний.
І для початку цього достатньо. Додаткові кольори можуть знадобитися, якщо проєкт передбачає складну навігацію. І то, ці кольори можуть бути просто темнішими або світлішими варіаціями основного.
У будь-якому разі потрібно робити контраст. Як мінімум, це потрібно для забезпечення доступності - людям зі слабким зором потрібно теж дивитися сайти. І взагалі, це просто красиво. Варіанти контрасту:
- Блідий + насичений.
- Теплий + холодний.
- Протилежність на колі Іттена.
- Доповнення чорним і білим.
Пам'ятай про темну і світлу теми на смартфонах! Твої кольори мають однаково добре виглядати в будь-якому випадку. Нічого не повинно губитися, неправильно відтінятися і різати око. Не прогав цей момент, коли працюєш над адаптивним дизайном.
Приклади реального світу
Людство придумало багато всього, але природа зробила більше. І готову палітру можна взяти з сайту National Geographic. Просто погортай фото дикої природи і приміряй ці референси на свій проєкт. Кораловий риф, фйорди, тропіки, савана, екзотичні краєвиди, азіатські ринки - все рясніє фарбами, які в сумі мають гарний вигляд. Просто бери і застосовуй.
Сервіси для підбору палітри
Існує величезна кількість зручних платформ для підбору палітри онлайн. Просто задавай тон, комбінуй, пробуй, проси штучний інтелект допомогти. І забирай результат у свій проєкт.
1. Paletton.com
Paletton - онлайн-інструмент для створення комбінацій кольорів з урахуванням різних моделей. Особливістю цього сервісу є інтуїтивний інтерфейс, що дає змогу легко створювати та експериментувати.
Adobe Color (раніше відомий як Adobe Kuler) - онлайн-інструмент для створення та дослідження колірних схем. Плюсом цієї платформи є можливість створювати палітри на основі правил і алгоритмів, а також є доступ до готових палітр, створених іншими користувачами та експертами.
Palettable - онлайн-інструмент для створення та збереження палітр. Головні переваги: зручний інтерфейс і можливість експорту палітр у різні формати, як-от CSS, JSON та інші.
ColorHexa - онлайн-ресурс для дослідження та аналізу кольорів. Особливістю цього сервісу є широкий спектр доступних функцій, включно з конвертером колірних моделей, аналізатором колірних кодів, дослідженням колірних гармоній і багато іншого.
Flat Colors - онлайн-каталог плоских кольорів для використання в дизайні інтерфейсів і веб-розробці. Великий вибір яскравих і насичених кольорів, зручна навігація за категоріями.
6. Hexcolor.co
Hex Color - онлайн-інструмент для пошуку та дослідження кольорів за їхніми HEX-кодами. Широкий вибір кольорів і зручний інтерфейс для їх перегляду та порівняння. Дуже зручно, якщо в тебе є побажання клієнта або брендбук.
Components AI - онлайн-платформа для автоматизації створення дизайн-компонентів. Особливістю цього сервісу є використання штучного інтелекту для створення та адаптації компонентів відповідно до вимог. Той випадок, коли ШІ не забирає роботу в дизайнера, а допомагає її робити.
Designspiration - онлайн-платформа для пошуку натхнення та дослідження дизайнерських робіт. Особливістю цього сервісу є велика база зображень і можливість фільтрації за кольором, формою та іншими параметрами. Відповідно, тут ти зможеш знайти і вдалі палітри.
9. Khroma.co
Khroma - онлайн-платформа для створення персоналізованих колірних палітр з використанням машинного навчання. Особливістю цього сервісу є можливість створення палітр на основі вподобань і стилю користувача. Розумний алгоритм зрозуміє, що саме ти хочеш.
10. Mycolor.space
MyColor - онлайн-платформа для створення та збереження персоналізованих кольорових палітр. Широкі можливості створення палітр з урахуванням твоїх уподобань. Збереження - зручна опція, яка допоможе зробити одразу багато різних варіантів для використання в майбутніх проєктах.
Flat UI Color Picker - онлайн-інструмент для вибору плоских кольорів для використання у веб-дизайні. Особливістю цього сервісу є великий вибір популярних колірних схем і зручний інтерфейс для їхнього перегляду та вибору.
12. Material.io
Material Design - онлайн-ресурс від Google, присвячений дизайну інтерфейсів у стилі Material Design. Особливістю цього сервісу є велика кількість документації та порад з використання дизайн-елементів.
Material UI Colors - продовжуючи тему попереднього пункту, це онлайн-інструмент для вибору колірних палітр відповідно до дизайн-гайдлайнів Material Design від Google. Тут великий вибір готових палітр і зручний інтерфейс для їхнього вибору та перегляду.
14. Coolors.co
Coolors - онлайн-інструмент для створення колірних палітр методом генерації випадкових комбінацій. Зручний інтерфейс для створення і редагування палітр, можливість експорту в різні формати.
15. Bjango.com
Bjango - онлайн-платформа для створення та дослідження колірних схем. Широкий вибір інструментів для аналізу колірних палітр і перегляду колірних властивостей.
16. Coleure.com
Coleure - онлайн-платформа для створення та порівняння колірних палітр. Передбачена можливість порівнювати різні палітри та аналізувати їхні колірні характеристики.
17. Colorhunt.co
Color Hunt - онлайн-платформа для дослідження і вибору колірних палітр, створених і опублікованих користувачами. Великий вибір красивих і надихаючих палітр, сортування за популярністю і можливість скачування у форматах для дизайнерських програм.
18. Colorzilla.com
ColorZilla - це браузерне розширення, яке дає змогу аналізувати кольори на веб-сторінках і створювати колірні палітри на основі зображень. Там же можна знайти сервіс для побудови градієнтів. Особливістю цього інструменту є зручність використання прямо в браузері, а також можливість отримання колірної інформації з будь-якої веб-сторінки - якщо подобається чужий дизайн або потрібно вивудити з готового проекту кольори, то просто користуйся цим сервісом.
19. Colllor.com
Colllor - онлайн-інструмент для дослідження і створення колірних палітр. Нічого надординарного, але сервіс зручний, простий і тому популярний.
20. Colormind.io
Colormind - онлайн-інструмент для автоматичного створення колірних палітр з використанням нейронних мереж. Ти отримуєш можливість генерації унікальних і гармонійних колірних комбінацій за допомогою штучного інтелекту.
Твори, вигадуй, вчися
Про створення різних вдалих колірних поєднань, психологію кольору, застосування відтінків у веб-дизайні та творчості можна писати дуже багато - не просто статті, а цілі дисертації. Але для початку тобі потрібно знати базу. Реєструйся на онлайн-курс "Графічний дизайнер: вектор бренду". Там багато важливої інформації про колір, айдентику, графіку, композицію і не тільки.