Не забудьте поширити ❤️
Підбір кольорової палітри для сайтів – це один з найскладніших етапів для дизайнера. Однак, щоб вибрати вдалі поєднання, необов’язково бути майстром теорії кольору. Ось 14 інструментів, які будуть корисні як веб-дизайнерам, так і новачкам.
1. HueSnap
Натхнення може наздогнати нас в будь-який момент. Інструмент HueSnap дозволяє фіксувати цікаві поєднання відтінків, які оточують нас в реальному житті. Декор готельного номера або вечірній парк можуть підказати незвичайні рішення для колірної схеми наступного сайту. Просто зробіть знімок і створіть палітру за допомогою HueSnap.
Ця програма є лише для мобільних пристроїв, але створені палітри можна зберігати і ділитися ними з іншими. Також воно включає в себе безліч додаткових функцій, наприклад, параметри для вибору додаткових і складових квітів.
2. Khroma
Це ІІ-генератор кольорової палітри, який підлаштовується під ваші уподобання. Для початку потрібно вибрати 50 вподобаних кольорів, а після цього алгоритм сам запропонує інші поєднання.
3. Сoolors.co
Coolors пропонує широкий спектр інструментів для налаштування палітр. Крім того, результат можна експортувати в різних форматах. Coolors також дозволяє надихатися роботами інших користувачів. У розділі «Огляд» можна знайти безліч готових добірок кольорів, які також можна переглядати, зберігати і редагувати.
Coolors доступний для настільних ПК, iOS пристроїв. Більш того цей інструмент можна додати в якості розширення для додатків Adobe (PhotoShop, Illustrator, InDesign) і навіть в браузер Google Chrome.
4. Adobe Color CC
Цей інструмент вважається одним з кращих для вибору колірних добірок. Він дозволяє не тільки створювати власні схеми, а й надихатися роботами інших. Для створення палітри необхідно вибрати відтінок на колесі (або на зображенні) і застосувати правила гармонії кольорів. Наприклад, послідовні, монохромні або відтінки обраного вами кольору.
Нещодавно інструмент обзавівся новою функцією. Вона підкаже, чи підійдуть вибрані кольори для людей, які страждають на дальтонізм, і чи можна використовувати їх в якості фону для тексту.
5. Colordot
Colordot від Hailpixel – це безкоштовний онлайн-інструмент для створення кольорової палітри.
Управління здійснюється за допомогою кліків:
- знайти відтінок – переміщайте курсор вперед і назад,
- налаштувати світло – переміщайте курсор вгору і вниз,
- налаштувати насиченість – прокрутіть колесо миші,
- зберегти колір в палітрі – клікніть на обраний відтінок.
Якщо клікнути на значок перемикача, ви зможете побачити значення RGB і HSL кожного відтінку. А мобільний додаток для iOS пристроїв дозволяє захоплювати кольори за допомогою камери.
6. Eggradients
Цей інструмент пропонує різні ідеї градієнтів, підібраних професійними дизайнерами. Кожен приклад має досить забавну назву. Наприклад, «розбите серце Возняка» і «неоподатковуваний дохід».
7. 147 Colors
Для створення зручного і читабельною CSS коду іноді краще використовувати стандартні кольори та їх назви. Інструмент 147 Colors в одному місці зібрав всі кольори CSS, щоб ви могли вибрати підходящий. Він містить 17 стандартних і 130 додаткових назв відтінків. Ви також можете відфільтрувати результати за відтінками або вибрати за допомогою колірного колеса.
8. Генератор палітри кольорів Canva
Цей інструмент ідеально підходить для створення кольорової палітри на основі певного зображення. Canva дуже простий у використанні: завантажуєте зображення, а генератор створює добірку з п’яти основних кольорів, що містяться в ньому. Натисніть на вподобаний відтінок, щоб скопіювати шістнадцяткове значення в буфер обміну. Також можна використовувати колірне колесо для створення палітри вручну. На жаль, даний інструмент не дозволяє налаштовувати кольори створеної вибірки.
9. Material Design Palette
За допомогою цього простого інструмента ви можете вибрати два кольори, які потім перетворюються в повну колірну палітру.
10. ColourCode
ColourCode чимось схожий на Colordot, але містить більше корисних рекомендацій. Крім цього, він також дозволяє вибирати різні категорії палітри (аналоги, тріада, монохромний і т. д.).
За допомогою ColourCode ви можете встановлювати різні параметри на колірному колі для створення оригінальної комбінації. Готову добірку квітів можна зберегти або експортувати в форматі SCSS, LESS або PNG.
11. Color Calculator
Це досить простий інструмент – досить вибрати відтінок і параметри колірної гармонії, а програма підбере рекомендовану колірну схему. Також на цьому сайті надана корисна інформація про теорію кольору і поєднання.
12. HTML Co
HTML Color Codes – це великий набір безкоштовних інструментів, які включають безліч палітр з коментарями, колірні діаграми, схеми Google Material Design, класичні палітри безпечних відтінків і список стандартних назв квітів і кодів HTML.
На сайті також можна знайти навчальні посібники та інші ресурси для веб-дизайнерів. Результат можна експортувати у вигляді HEX, HTML, CSS і SCSS коду.
13. W3Schools: Colors Tutorial
Якщо ви шукаєте універсальне рішення, що включає керівництво по кольорам і різні інструменти, тоді W3Schools: Colors Tutorial – ідеальний вибір. З його допомогою ви не тільки дізнаєтеся більше про теорію кольору, колірні кола та відтінки, але і зможете використовувати різні інструменти, наприклад, Color Converter. Він дозволяє перетворювати будь-які відтінки в HEX, RGB, HSL, HWB і CMYK код.
14. Цифровий колориметр (Mac)
За допомогою цифрового колориметра, стандартного інструменту MacOs, ви можете «захопити» відтінок з будь-якого місця на екрані, а потім отримати значення цього кольору в десятковому, шістнадцятковому або відсотковому значенні. Крім того, він дозволяє копіювати вибраний колір як текст або зображення.
Ми у соцмережах: