Одна з важливих складових роботи веб-дизайнера - створення палітри, підбір кольорів, що гармонійно поєднуються один з одним. Процес це досить складний, що потребує творчого підходу. Є низка ресурсів, здатних значно спростити роботу з кольором.
Нещодавно ви могли зустріти детальну статтю про . А раніше я публікував схожу замітку про інструменти для вибору з оглядом Kuler і СolorBlender. Сьогодні вирішив доповнити тему та надати трохи більше варіантів вибору палітр кольорів для сайту.
ColoRotate
Інструмент ColoRotate дозволяє вибирати найкращі колірні схеми з великої кількості готових пропозицій або створювати власні. Вибираючи кольори в різних місцях на 3D палітрі, що обертається, можна отримувати поєднання, побудовані на гармонії або на контрасті, працювати з відтінками, яскравістю, насиченістю, змішувати різні фарби. Можна також витягувати кольори з готових зображень. Є версія для iPad, доступна синхронізація із Photoshop. Дуже гарний сервіс.
Adobe Color CC
Генератор палітр та колірних схем Adobe Color CC дозволяє:
- експериментувати з комбінаціями кольорів на інтерактивному колі (доступно 7 різновидів колірних систем);
- генерувати колірні теми, користуючись заздалегідь заданими стилями;
- створювати колірні схеми, використовуючи кольори з фотографії чи іншого готового зображення;
- ділитися своїми роботами та знайомитися з чужими, черпаючи в них натхнення.
Створені теми кольорів можна зберігати у програмах для ПК або мобільних пристроїв, а також у розділі “Мої теми” на сайті.
DeGraeve
На сайті DeGraeve представлено безліч інструментів, у тому числі генератор схем кольорів на основі готових зображень. Достатньо знайти в інтернеті картинку з цікавою гамою кольорів, завантажити URL цього зображення у відповідний рядок на сайті і натиснути кнопку генерації палітри. Через кілька секунд програма розкладе картинку на 10 основних кольорів, 5 приглушених (dull) та 5 яскравих (vibrant), надавши кожному свій код. Згенеровану палітру зручно використовувати при роботі над дизайном сайту, кольори відмінно поєднуються один з одним.
Contrast-A
Інструмент Contrast-A зі слоганом «Знайди доступне поєднання кольорів» призначений для створення палітр користувача в процесі експериментів з кольорами, що поєднуються. Програма заснована на посібнику про поєднання кольорів веб-контенту (тексту та фону). Для роботи з нею бажані базові знання на цю тему.
Сервіс дозволяє вибирати на палітрі 2 кольори і оцінювати, як вони будуть виглядати разом, будучи використаними як текст і фон. Причому демонструються результати для нормального сприйняття кольору і різних форм колірної сліпоти.
ColorZilla
Додаток ColorZilla для Firefox (є також версія для Google Chrome) на допомогу веб-майстрам та фахівцям з графічного дизайну, які працюють з кольором. Буде корисно як новачкам, так і сучасним користувачам. Програма проводить колірний аналіз будь-якої точки та будь-якої сторінки в браузері, витягує потрібні кольори для використання в інших програмах. Визначення колірної палітри сторінки, вибір кольорів із встановленого набору, збереження у складі палітри користувачів, що найчастіше використовуються,- такий набір її можливостей.
Pictaculous
Pictaculous - ще один генератор колірних гам на основі готових зображень. Потрібно лише завантажити на сайт вибрану картинку об'ємом не більше 500 КБ, і відразу розпочнеться його колірний аналіз. Під результатом із кольоровою гамою зображення виводиться ще десяток палітр, але вже створених вручну, членами спільнот ресурсів Kuler та COLOURLovers. Їх теж цілком можна використовувати як колірне рішення для сайту, що розробляється. Доступне пересилання результату собі на пошту, та шеринг у соціальних мережах.
Якщо ви знаєте ще якісь генератори палітри кольорів, ділитеся посиланнями в коментарях.
Колір – один із найважливіших елементів у роботі дизайнера. Але його, як концепцію, досить складно освоїти: через безліч комбінацій палітр часто важко вирішити, як краще оформити інтерфейс веб-сторінок і додатків. Раніше ми публікували огляди інструментів на вибір і . Сьогодні хочемо розширити тему, розмістивши в блозі переклад статті Essential Color Tools for UX Designers від Nick Babich.
Замітка містить список кращих сервісів підбору кольору для сайтів та UX-дизайну, які допоможуть значно заощадити вам час. Завдяки цим проектам ви дізнаєтесь:
- звідки черпати натхнення;
- як створити власну палітру;
- як зробити дизайн доступним людям із порушеннями колірного зору.
1. Шукаємо натхнення
Фарби природи
Черпайте з навколишнього світу. Все, що вам потрібно – просто озирнутися. Модний одяг, обкладинки книг, дизайн інтер'єру ... вас оточує так багато чудових речей. Але найкращі поєднання кольорів - це фарби природи. Зафіксуйте гарний момент та спробуйте створити власну добірку на основі конкретного зображення.
Найкращі поєднання фарб – у природі. Можете отримати колірну схему з будь-якого фото
Behance
У популярному сервісі знайдете цікаві роботи, включені в найкращі онлайн-портфоліо справжніх професіоналів своєї справи. Цей сайт – також чудове джерело натхнення. Щоб переглянути нові приклади проектів, просто виберіть потрібний колір.
Dribbble Colors
Dribbble - одна з кращих , яка стане в нагоді при створенні інтерфейсу користувача. Якщо ви бажаєте візуально зрозуміти, як інші фахівці використовували конкретний колір, відкрийте сторінку за посиланням dribbble.com/colors і вкажіть потрібне значення.
Підбираючи колір для сайту, тут можна задати мінімальний його відсоток — поекспериментуйте, наприклад, спробуйте поставити 30% синього.
Спробуйте вказати мінімальний відсоток певного кольору у Dribbble
Designspiration
Designspiration – корисний інструмент насамперед тим, хто вже має ідеї колірних комбінацій і хто хоче побачити приклади таких поєднань. Виберіть від 1 до 5 варіантів, і знайдете зображення, що відповідають зазначеним параметрам.
У Designspiration знайдете різні приклади комбінацій кольорів
Tineye Multicolr
За допомогою сервісу підбору кольору Tiney Multicolr зможете визначити бажану гаму зображення і навіть задати відсоток кожного з них (співвідношення). Сайт інтегрований з базою даних, що складається з 20 млн. фоток Creative Commons від Flickr. Це безперечно один з найшвидших способів знайти в ідеальній палітрі.
Colorzilla
ColorZilla – розширення для встановлення у браузерах Chrome та Mozilla Firefox. Воно включає такі інструменти, як «піпетка», функції перегляду палітр, створення і багато іншого.
Розширення ColorZilla доступне в Chrome та Firefox
Shutterstock Spectrum
Один з кращих способів уявити, як виглядатиме кольорова гама, – подивитися відповідні зображення. Більшість рішень, що пропонують вибір кольору для дизайну сайту, включають подібну функцію, але Shutterstock Spectrum має неймовірно зручний інтерфейс і попередній перегляд, що дійсно може виявитися корисним.
Причому вам не знадобиться підписка, оскільки попередньої оцінки картинки буде цілком достатньо (навіть незважаючи на те, що на ній є «водяний знак»).
W3Schools
Нещодавно у блозі розглядали добірку від W3Schools. Там зібрано дуже багато інформації по темі, починаючи від їх назв/кодів відтінків, теорії поєднання палітр і закінчуючи описом різних форматів: HEX, RGB, CMYK, HWB та ін. Також знайдете прості генератори, конвертори тощо «міні-сервіси». Загалом, цікаво подивитися.
2. Створюємо палітру кольорів
Material Design Color Tool
Сервіс підбору кольорів для сайту Material Design Color Tool дозволить створювати колірні схеми, ділитися ними і переглядати приблизний інтерфейс для підібраних вами параметрів. Одна з корисних його функцій – вимір рівня доступності будь-якого поєднання кольорів.
Coolors
Coolors – сайт для створення кольорової палітри. Просто закріпіть певний колір та натисніть на «пробіл». Інструмент хороший також тим, що ви отримаєте не один результат, а можете згенерувати кілька варіантів, змінивши лише початкові дані.
Колірна схема в Coolors на основі фото
Adobe Color CC
Сервіс підбору кольору Adobe Color CC (раніше Kuler) зараз досить популярний. Він знаходиться у вільному доступі в інтернеті, але є також і десктор-версія. За допомогою цієї веб-програми ви зробите свою палітру, використовуючи колірне коло:
А можете отримати певний результат із готового зображення:
Підбір кольору для сайту по картинці
Тут є сотні готових комбінацій, шукайте їх у розділі «Дивитись»:
Якщо ви користуєтеся десктоп-версією, ви можете в один клік експортувати створену вами колірну систему в InDesign, Photoshop та Illustrator.
Paletton
Його часто порівнюють із попереднім Adobe Color CC, оскільки ці проекти дуже схожі. Різниця лише в тому, що Paletton ви не обмежені п'ятьма параметрами, а можете експериментувати з додатковими тонами інтерфейсу.
Додатково можете глянути на . Разом з іншими програма дозволяє працювати в будь-якому місці, просто використовуючи свій смартфон. Крім безпосередньо завдань зі створення/експорту палітри кольорів, тут можна вибирати певні кольори з картинок або використовувати базові варіанти.
3. Робимо палітру доступною
Нині порушення колірного сприйняття значно поширеніші, ніж ми припускаємо. Близько 285 млн людей у світі мають проблеми із зором. Завжди потрібно перевіряти, чи доступна обрана вами таким користувачам.
WebAIM Color Contrast Checker
Одні тони чудово поєднуються один з одним, інші ж зовсім навпаки. Безліч проектів не проходять тест А/А, і це факт. Дуже важливо перевіряти візуальне оформлення інтерфейсу та контрастність тонів, особливо якщо на сторінці багато тексту. Для цього використовуйте при підборі кольорів сайту.
WebAIM Color Contrast Checker – веб-інструмент, за допомогою якого перевіряються колірні коди у шістнадцяткових значеннях.
Coolors
Про цей сервіс ми вже згадували вище. Крім усього іншого, Coolors також допоможе вам перевірити придуману палітру на колірну сліпоту.
Тип колірної сліпоти у схемі
Замість режиму «Звичайний» виберіть той тип проблеми зі зором, який ви бажаєте зімітувати. В результаті зрозумієте, як саме людина, яка не здатна розрізняти певні кольори, побачить ваш дизайн.
Так людина з протаномалією бачить палітру
NoCoffee Vision Simulator для Chrome
За допомогою сайту NoCoffee Vision Simulator зможете переглянути, як люди з колірною сліпотою або слабким зором сприйматимуть певні веб-сторінки. Наприклад, вказавши параметр «Ахроматопсія» у розділі «Color Deficiency», ви побачите веб-сторінку у сірому кольорі.
Так виглядає проект CNN для людини з дейтеранопією
Висновок
Всі сервіси підбору кольору для сайтів та UX-дизайну, згадані в статті, напевно допоможуть вам у пошуках цікавої та ефективної гами. Але пам'ятайте: найкращий спосіб навчитися створювати дивовижні палітри – багато практикуватися та експериментувати.
Кольори для веб-дизайну відіграють величезну роль. Щоб грамотно підібрати схему кольорів для сайту, існують спеціальні сервіси. Упевнена, що у кожного веб-дизайнера в закладках є хоча б один такий.
Іноді ось сидиш і думаєш, який відтінок блакитного вибрати основним для сайту, трохи світліший або яскравіший, а може темніше взяти… А до нього ще треба додаткові підібрати. Можна звичайно робити це і на око, але краще скористатися одним із спеціальних сервісів.
Я не розповідатиму про теорію кольору (це занадто об'ємна інформація), а просто опублікую тут сервіси, які є в закладках і якими я користуюся.
З цим інструментом я дружу вже багато років. Найзручніший інструмент для підбору кольорів (на мій погляд). Має багато додаткових можливостей. Наприклад, можна побачити приклад світлої та темної сторінки з вибраними кольорами.
Є можливість оцінити, як бачитимуть вашу колірну гаму люди з дальтонізмом та іншими особливостями зору. Можна вибрати безпечні веб-кольори.
Adobe Kuler є другий веб інструмент, який я досить часто використовую. Підбір колірної схеми відбувається практично так само, як і на попередньому сайті, але люблю я його не за це. Крім того, що ви самі можете створювати колірні схеми, ви можете подивитися та використовувати схеми, створені іншими людьми.
Для цього потрібно натиснути кнопку у верхньому лівому меню «Дивитись». І перед вами відкриється галерея всіляких поєднань кольорів.
Цей інструмент трохи схожий на Сolorscheme, але має менше функцій, зате є можливість подивитися, як виглядатимуть колірні блоки.
Цим сайтом я практично не користуюся, але якщо він є у мене в закладках, то вирішила додати і його.
Наступні два сайти генерують палітру із вибраного вами зображення. It is magic:)
Ви вибираєте будь-яку картинку, кольори якої вам подобаються, її сервіс аналізує і видає вам колірну палітру. Ці два сайти відрізняються лише тим, як надавати їм картинку.
На цей сайт потрібно завантажитизображення зі свого комп'ютера.
Дуже зручний інструмент для вибору кольору. Заснований на принципі "Подобається - Не подобається".
Як видно з назви, тут можна підібрати кольори для модного зараз плоского дизайну. Сайт цікавий тим, що вибравши палітру, ви можете завантажити її для програм Corel та Photoshop.
Ще один модний тренд – матеріал дизайн. Цей сайт допомагає підібрати поєднання кольорів для UI (user interface). Додатково на сайті є великий набір іконок.
І насамкінець знову user interface. Тут просто набір кольорів для UI дизайну. Натиснувши на будь-який колір, можна подивитися, як на певному тлі читатиметься білий текст.
Ось такі інструменти є в закладках.
Напишіть у коментарях, якими сайтами підбору кольору для веб-дизайну користуєтеся ви?
Колір широко використовується в дизайні, – він дозволяє «оживити» зміст – створити смисловий зв'язок елементів, наповнити роботу емоціями та настроєм. Дизайнери-початківці беруть випадкові кольори, але є способи використовувати колір більш осмислено. Розглянемо чотири таких способи, організованих за принципом від простого до складного.
1. Використовувати відому гаму
На сайті brandcolors.net зібрано понад 500 поєднань кольорів відомих брендів. Яндекс, Google, Burger King використовують одну палітру у всіх своїх продуктах. Ці бренди та їх кольори знайомі та улюблені багатьма. Наберіть назву в рядку пошуку або погортайте сторінку, натисніть на потрібний бренд і колір: його код скопіюється в буфер обміну.
2. Вибрати готову професійну палітру
Найпростіший спосіб – взяти готове поєднання кольорів. Не обов'язково щоразу винаходити велосипед, адже гармонійні поєднання відомі давно. Зайдіть на colordrop.io та вибирайте. На сайті є сотні професійних 4-колірних палітр. Вибравши потрібну, натисніть і скопіюйте коди кольорів з панелі праворуч.
Окрім цього, сервіс містить готову добірку із 24 кольорів плоского дизайну. Натисніть ліворуч під назвою «Flat Colours» і беріть код відтінку, що сподобався.
3. Визначити палітру кольорів фотографії або картинки, що сподобалася.
Цей спосіб трохи складніший. Але й ефектніше.
- На сайті coolors.co у верхній панелі зліва знайдіть значок фотоапарата, натисніть на нього. Відкриється вікно завантаження зображення.
- Можна вибрати фото або картинку з кольоровою гамою, що сподобалася, з комп'ютера або скопіювати посилання в порожню графу.
- Сервіс визначить поєднання кольорів (внизу під завантаженою картинкою).
- Змінювати окремі кольори цієї палітри можна, позначаючи їх та вибираючи точку на фото, з якої потрібно взяти колір.
- Кнопка «Collage» зберігає палітру з кодами кольорів на комп'ютері.
- Кнопка «Auto» генерує нові поєднання на основі того самого фото.
- Натисніть «Ок» та перейдіть на головну сторінку сайту для подальшої роботи з палітрою.
Головна сторінка сайту не менш функціональна. Тут можна підібрати відтінки окремих кольорів або зібрати нову палітру, замінивши окремі кольори.
4. Створити свою кольорову гаму онлайн
Завантаживши фото на той же сайт coolors.co, можна не тільки визначити код кольору, а й створити власні поєднання. Для цього натисніть пропуск - сервіс автоматично створює поєднання з 5-ти кольорів.
на кожному кольорі 4 значки-кнопки:
- Alternative shades - Відтінки кольору (темніше і світліше),
- Drag (Перемістити колір праворуч або ліворуч по панелі),
- Adjust (Налаштувати тон, насиченість, яскравість та ін.),
- Lock (Зафіксувати колір).
Вибір колірної схеми для сайту є одним із важливих моментів у процесі дизайну. Підбір поєднання кольорів – досить складний та творчий процес. На щастя, існує досить багато сервісів, які можуть надати значну підтримку для правильного вибору.
Деякі ресурси, згадані в цьому огляді, надають можливість вибору з великої кількості готових кольорових схем, а інші дозволяють в інтерактивному режимі побудувати власну схему.
Kuler
Adobe Kuler містить велику бібліотеку готових колірних схем. Ви можете переглянути онлайнову схему та завантажити її для використання у продуктах серії Adobe Creative Suite.
Colour Lovers зараз має майже 2 мільйони створених користувачами колірних схем. Ви можете переглядати їх, сортуючи за датою, рейтингом, кількістю переглядів.
ColoRotate має бібліотеку готових колірних схем. Також ви можете створити власну схему за допомогою унікального 3D інструменту. Колірну схему можна використовувати безпосередньо у Photoshop і Fireworks за допомогою плагіна ColoRotate.
Color Scheme Designer дозволяє вибрати тип колірної схеми (моно, компліментарну, тріаду, зошит, аналогову). Потім можна буде налаштувати кольори та подивитися дію схеми на прикладі.
ColorSchemer має в своєму розпорядженні велику бібліотеку створену користувачами колірних схем. Ви можете сортувати їх за датою розміщення, рейтингом чи кількістю завантажень.
Pictaculous – простий онлайновий інструмент для генерації колірної схеми. Ви можете завантажити зображення, а сервіс згенерує схему для використання із зображенням.
Color Spire
Color Spire дуже простий у використанні сервіс. Ви вибираєте базовий колір, а він пропонує колірну схему. Також можна переглянути зовнішній вигляд схеми на простому шаблоні.