Як підібрати колірну палітру? Палітри розкладки

Головна / Оптимізація роботи

Ефективний дизайн сайту немислимий без вибору кольорового рішення. Залишилося розібратися, як це зробити.

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

Якщо ви шукаєте можливість полегшити та прискорити роботу або робите сайт вперше, ці інструменти допоможуть вам знайти рішення.

Почнемо з короткого введення у теорію кольору.

Нижче ви знайдете 19 ресурсів, які допоможуть вибрати колірну палітрудля вашого сайту

Підготовка

Вам потрібне натхнення?

1.

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

Шукаєте готову палітру?

2.

Це форум про дизайн палітри кольорів, що містить майже 2 000 000 варіантів, завантажених користувачами. Ви можете завантажити палітру, що містить певний колір, і почитати, що пишуть дизайнери. Як правило, для одного поєднання дається кілька різних за насиченістю варіантів.

Палітра супроводжується назвами: Шторм у Вітсанді (тихоокеанський архіпелаг у Кораловому морі), Сутінки у Вітсанді, Острів Вітсанді

3.

Цей ресурс дозволяє користувачам створювати та завантажувати свої власні колірні схеми. Ви зможете відфільтрувати їх за датою, рейтингом та кількістю завантажень або знайти за ключовими словами.

4.

У ColoRotate ви знайдете бібліотеку колірних схем, які можна переглядати, вибирати та змінювати. Зробити власну палітру на основі знайденої допоможе спеціальний інструмент 3D (3D color tool). Колірну схему, створену вами, можна відразу застосувати у PhotoShop або Fireworks, встановивши ColorRotate plugin або програму для iPad.

Відповідно до вимог бренду

Що, якщо у вас вже є картинки, логотипи чи вимоги бренду, яким потрібно відповідати?

1.

Цей сайт не такий функціональний, як деякі в цьому списку, але чудово вирішує завдання, для якого створено, — дослідження конкретного кольору. Просто завантажте картинку та Color Hunter створить на її основі палітру. Це відмінний спосібдосягти гармонії між зображеннями та основними кольорами сайту. Крім того, тут можна розкласти схему кольору сайту, який вам сподобався.

2.

Pictaculous робить палітри на фото. Достатньо завантажити фотографію, щоб отримати кольори, які з нею поєднуються. Також ресурс запропонує готові палітри, які вам підійдуть.

3.

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

4.

Paletton прискорює процес створення панелі. Потрібно вибрати тип схеми: моно, складові, тріадні, зошити, споріднені, споріднено-контрастні. Як тільки ви поміняєте один колір, решта автоматично підлаштовується.

5.

Color Spire також будує палітру на основі одного кольору. Ви вибираєте вихідний відтінок і отримуєте варіанти схем, що поєднуються з ним. Також можна подивитися прев'ю, як обрана палітра виглядає на сайті.

6.

Цей плагін для Chrome допомагає гармонізувати кольори, враховувати дальтонізм та ідентифікувати HEX-коди. Колірні палітри можна відразу експортувати до Illustrator, PhotoShop та CoIRD.com.

7.

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

8.

Цей інструмент підбирає кольори, які поєднуються з вашим. Він трохи примітивніший, ніж інші ресурси в цьому списку. Потрібно вставити HEX код кольору в рядок або вибрати його на представленому у формі колеса спектрі. Генератор видає 3 кольори, які підходять вашому, та супроводжує їх HEX-кодами.

Створити свій колір

На багатьох ресурсах цього списку мається на увазі, що у вас є вихідний колір. Якщо немає потреби відповідати вимогам бренду і BrandColors не допоміг з вибором, можна почати з нарисів.

1.

Ця програма для iOS допомагає вибрати з декількох кольорів, які розміщуються поряд через невелика відстань, Що набагато зручніше градієнтного уявлення, кіл та спектрів. Великі колірні сітки дозволяють використовувати весь екран (що особливо цінне для власників iPad Pro). У додатку можна створювати зразки кольору, знаходити RGB, HEX та HSLA значення та робити палітри з нарисів.

3. Color

У Color від HailPixel не визначитися з кольором не можна. Ви точно зрозумієте, що хочете та отримаєте HEX-код відтінку.

Ви робите рух мишею або жестом і колір щоразу трохи змінюється. Схоже на колірну сферу, що постійно супроводжує кольори HEX-кодами. Якщо ви рухаєтеся вправо та вліво по екрану, змінюватиметься колір, вгору та вниз – насиченість.

Отримати код кольору

Якщо ви побачили десь колір і хочете дізнатися його код та назву, ці ресурси для вас.

1.

SpyColor надасть інформацію про будь-який колір, включаючи Hex, RGB, CMYK та інші коди, та покаже цілий діапазон схем для кожного відтінку, у тому числі комплементарні, спліт-комплементарні, тріадні, контрастні та аналогові.

2.

HTML Color Codes знаходить HEX-код для квітів зображення. Ви вибираєте картинку, відкриваєте її для перегляду та отримуєте код кольору, навівши на нього курсор.

Протестувати свою палітру

Створивши колірну схему, хочеться впевнитись у її ефективності.

Check my Colours перевіряє основні та фонові кольори на відповідність вимогам контрастності для тих, чиє колірне сприйняття має відхилення від норми. Якщо ви хочете переконатися, що ваш сайт підходить для людей з дальтонізмом або отримати працюючі та інтуїтивно зрозумілі поєднання кольорів з точки зору UX, цей ресурс незамінний. Достатньо ввести адресу сайту, щоб ознайомитися зі звітом щодо неї зовнішньому вигляду.

Тут можна вибрати до 5 відтінків з величезної палітри і отримати зображення, які мають схожу комбінацію кольорів і супроводжуються HEX-кодами. Зображення можна зберегти на сайті або завантажити.

Висновок

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

Колір – один із найважливіших елементів у роботі дизайнера. Але його, як концепцію, досить складно освоїти: через безліч комбінацій палітр часто важко вирішити, як краще оформити інтерфейс веб-сторінок і додатків. Раніше ми публікували огляди інструментів на вибір і . Сьогодні хочемо розширити тему, розмістивши в блозі переклад статті 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-дизайну, згадані в статті, напевно допоможуть вам у пошуках цікавої та ефективної гами. Але пам'ятайте: кращий спосібнавчитися створювати дивовижні палітри - багато практикуватися та експериментувати.

14.5K

Підбірка кольору – один із найважливіших етапів у процесі створення гарного дизайну.

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

01. Adobe Colour CC

Компанія Adobe перейменувала свій проект Kuler на Colour

Ви можете бути знайомі з цим інструментом за його колишньою назвою Adobe Kuler . Проте зовсім недавно компанія Adobe перейменувала одну зі своїх популярних веб-додатків на Adobe Colour CC.

Він дозволяє підбирати, створювати та зберігати різні колірні схеми, у кожній з яких може бути присутнім до п'яти кольорів. Інструмент доступний як у браузерній, так і в настільній версії. Якщо ви використовуєте настільну версію, ви зможете експортувати колірну схему прямо у Photoshop, Illustrator та InDesign.

02. Mudcube Colour Sphere

Якщо ви не впевнені з приводу вашої колірної схеми, то Mudcude має власну галерею готових ресурсів.

Mudcube Colour Sphere – дуже зручний мініатюрний ресурс для дизайнерів, який не тільки пропонує hex-коди вибраних кольорів, але й дозволяє створювати схеми кольорів для власних проектів. Також варто зазначити, що Mudcube має власну галерею готових ресурсів, які також можна використовувати.

03. Check my Colours

Check my Colours розроблений спеціально для оцінки та добірки комбінації фону та основного кольору для всіх DOM-елементів. А також для того, щоб з'ясувати, чи елементи досить гармонійні між собою. Усі тести засновані на алгоритмах, рекомендованих World Wide Web Consortium ( W3C).

04. The Color App

Додаток допоможе дізнатися RGB, HEX, а також HSLA-значення вибраних кольорів

iOS-інструмент The Color Appдозволить легко і просто визначати кольори за допомогою великої палітри кольорів. Він дозволяє дізнатися RGB, HEX та HSLA-значення кольорів, а також створювати власні колірні схеми для сайту.

05. Color Hunter

Color Hunter формує колірну схему на основі вибраного зображення

Це дуже зручний інструмент, особливо якщо потрібно знайти якийсь конкретний колір. Виберіть зображення та завантажте його в Color Hunter. Інструмент створить палітру кольорів на основі вибраного зображення. Це чудовий метод створення власних колірних схем.

06. TinEye

Якщо вам потрібно отримати конкретний колір, просто введіть значення HEX в URL

На цьому сайті використовується база даних, що складається з 10 мільйонів зображень, доступних безкоштовно ліцензійної угоди Creative Commons, які творці ретельно відібрали з Flickr. Їх можна використовувати для створення відповідних колірних схем.

07. Color

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

08. SpyColor.com

Безкоштовний генератор колірних схем, який надає інформацію про колір, а також дозволяє конвертувати його в будь-які схеми ( RGB, CMYKта інші ). Тут доступні різні формати колірних схем, включаючи тріадні, монохромні та інші.

09. Designspiration

На Designspiration можна вибрати до п'яти відтінків за допомогою зручної палітри на всю сторінку, яка допоможе легко знайти саме ті кольорові схеми HTML, які ви шукаєте. Після цього сайт згенерує сторінку з усіма зображеннями бази даних, в яких використовується схожа колірна комбінація. Також будуть надані HEX-значення, які можна використовувати у власних проектах. А зображення можна зберігати у колекціях на сайті.

10. ColorExplorer

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

11. Hex Color Scheme Generator

Невеликий зручний інструмент для створення комбінації кольорів на основі одного обраного відтінку. Вставте Hex-значення кольору, а інструмент надасть набір відповідних кольорів, які можна використовувати разом із основним.

12. COLOURlovers

COLOURlovers є спільнотою для обміну колірними схемами. Тут можна черпати натхнення з наборів кольорів інших користувачів, а також створювати власні та ділитися ними.

13. Color Scheme Designer

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

14. COPASO

Один із інструментів із сайту COLOURlovers. Але COPASO вартий окремої уваги, оскільки є неймовірним рішенням «все в одному», і дозволяє легко генерувати готові колірні схеми для сайту. Тут представлено безліч інструментів для вибору кольору, і всі вони розміщуються в зручному і простому інтерфейсі. Крім цього до палітр можна додавати нотатки, завантажувати зображення тощо.

15. Colourmod

Colourmod є програмне забезпечення, яка дозволяє вибирати окремі кольори з області віджетів, незалежно від того, чи ви використовуєте Mac або Konfabulator на Windows . Це не зовсім простий інструмент для роботи з палітрами кольорів, проте він допоможе швидко і просто визначати кольори без необхідності завантажувати великовагові програми.

16. ColorZilla

ColorZilla доступний як для Chrome, так і для Firefox

Цей проект розпочинався як плагін для Firefox, проте сьогодні він також доступний і для Google Chrome. ColorZilla являє собою розширення, яке включає кілька інструментів, призначених для роботи з кольором, серед яких палітра, генератор css-градієнтів і піпетка.

17. Colormunki

Зручний онлайн інструмент для підбору колірних схем від творців Colormunki. З його допомогою можна легко створювати привабливі колірні палітри зі зразків на основі Pantone з використанням декількох методик.

18. colr.org

Colr.org дозволяє встановити діапазон кольорів будь-якого зображення

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

19. ColourGrab

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

20. ColorBlender

ColorBlender генерує палітру з п'яти кольорів, що поєднуються.

Один з найпростіших інструментів, який дозволяє налаштовувати кольоровість і в режимі реального часу отримувати п'ять кольорів, що поєднуються між собою. Створену палітру можна завантажити у Photoshop або Illustrator у вигляді EPS-файлу .

21. GrayBit

GrayBit ​​дозволяє аналізувати сайти, щоб зрозуміти, як вони виглядали в градації сірого

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

22. COLRD

Інструмент, який можна використовувати як джерело натхнення або обмінюватися кольоровими схемами. Звичайно, цей ресурс не допоможе з генерування схем, але його обов'язково слід взяти на замітку.

Як керувати увагою користувача на сайті? Як підбирати правильні кольори для сайту? За допомогою якого додатка дізнатися код кольору на сайті конкурента? Розбираємо сьогодні у статті.

Сервіси щодо визначення колірної схеми

  • color-hex.com - визначить які кольори стоять поряд з вашим кольором
  • thestocks.im - агрегатор мокапів, відео, фотографій, іконок, шрифтів.
  • Eye Dropper — розширення для Google Chrome, яке дозволяє за допомогою піпетки дізнатися про код будь-якого кольору на будь-якій сторінці в інтернеті.
  • Adobe Color CC-Підбере колірні поєднання. Adobe Color CC допоможе, коли є картинка, і ви хочете вивантажити її основні кольори. Програма визначає палітру із 5 домінуючих кольорів зображення, яку можна зберегти та використовувати у презентаціях. Безкоштовно.
  • Colorzilla - розширення для Google Chrome та Mozilla Firefox, яке включає інструменти colour picker, eye-dropper, css gradient generator та palette browser. Достатньо навести піпеткою на потрібний колір на будь-якому сайті та скопіювати код.

Підбір кольору

Завантажте картинку та зробіть з неї палетку.

  • Coolors.co - ресурс з палітрами, які можна створювати самим або запозичувати з колекції
  • COLOURlovers - доомм'юніті кольорових фанатів, які діляться палітрами, квітами, фонами та графічними шаблонами. Тут є колірні тренди з інтер'єрів, журналів, сайтів та навіть вуличної моди. У розділі «Browse» можна знайти авторські кольори та палітри та завантажити фони для презентації.

Як вибрати колір для сайту

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

При брендингу кольори мають більш прямі значення, ніж у загальному розумінні. Їх можна коротко описати в кількох словах, так що ось список для вас:

  • Чорний. Надійний, витончений та досвідчений. Використовується для просування предметів розкоші.
  • Білий. Простий, спокійний та чистий.
  • Червоний. Впевненість, молодість та влада. Нерідко використовується для тотального розпродажу.
  • Помаранчевий. Доброзичливий, теплий та енергійний. Створює заклик до дії: реєструватися, купувати чи продавати.
  • Жовтий. Щастя, оптимізм та тепло. Зазвичай використовується для привернення уваги до вітрини.
  • Зелений. Світ, зростання та здоров'я. У маркетингу застосовується для розслаблення.
  • Синій. Довіра, безпека та стабільність. Зазвичай використовується для банків та бізнесів.
  • Пурпуровий/фіолетовий. Розкішний, креативний та мудрий. Зазвичай застосовується в промисловості краси та антивікових продуктів.
  • Рожевий. Романтичний та жіночний. Використовується для просування товарів для жінок та молодих дівчат.

Чорний

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

Білий

Колір означає чистоту та невинність, а також цілісність та ясність. Білий часто асоціюється з чистим листомпапери, що спонукає людей генерувати нові ідеї. Однак занадто багато білих може викликати почуття ізоляції та порожнечі. У дизайні білий колір зазвичай використовується як колір тла, особливо для ресурсів, для яких читаність є важливою частиною.

червоний

Колір зазвичай асоціюється із пристрасними, сильними чи агресивними почуттями. Він символізує як хороші, і погані стану, включаючи любов, впевненість, пристрасть і гнів. У дизайні використання червоного кольору. ефективний спосібпривернути увагу користувачів.

Помаранчевий

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

Жовтий

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

Зелений

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

Синій

Колір довіри. Він зазвичай показує надійність, заспокоює.

Пурпурний

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

Рожевий

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

Коричневий

Дизайнери зазвичай використовують коричневий колір як фон у різних відтінках, від дуже світлого до глибокого. Це приносить відчуття тепла та комфорту. Крім того, він може використовуватися для демонстрації досвіду та впевненості.

Вплив кольору на придбання товару

Дослідження проводилося у Північній Америці.

Улюблені кольори

Нелюбимі кольори

Колірні моделі

  • CMYK: Cyan (синявий), Magenta (червоний), Yellow (жовтий), і Key («ключовий» - чорний). Тобто ця модель складається з трьох основних кольорів та чорного, що дозволяє створювати темніші відтінки. Використовується в живописі та друку.
  • RGB-моделі: red, green, blue – червоний, зелений, синій. Використовується в комп'ютерах, телевізорах та інших електронних пристроях

Монохроматичний

Він заснований на одному кольорі з різними відтінками. Монохроматична палітра завжди є виграшним вибором, тому що важко зробити помилку і створити неприємну колірну схему.

Аналогічні (Analogous Colors)

Щоб створити аналогічну гармонію, використовуйте кольори поруч із кольоровим колом.

Complementary

Додатковою схемою є поєднання кольорів, які розташовані один навпроти одного на кольоровому колесі. Ця схема протилежна аналогічній та монохроматичній, оскільки вона спрямована на досягнення високої контрастності. Наприклад, помаранчеву кнопку на синьому фоні важко пропустити у будь-якому інтерфейсі.

Вибір палітри кольорів завдання завжди складна, будь то дизайн веб-сайту або мобільного додатку. Не варто вибирати кольори абияк, адже якісно підібрана палітра задає стиль всьому сайту.

Щоразу при розробці нового веб-дизайну багато часу витрачається на вибір різних колірних комбінацій. Альтернативні інструменти палітри кольорів допоможуть у майбутньому заощадити вам час.

Існує велика кількість програм для підбору палітри кольорів, але в цьому списку були відібрані інструменти, які дещо відрізняються від стандартних програм.

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

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

На відміну від попередніх сервісівДаний сайт демонструє вже готові підібрані палітри, на яких відображено, як кольори взаємодіють один з одним на прикріплених фотографіях. Розглядаючи морські хвилі або квіти, дивуєшся, наскільки багата природа у своєму творчому пориві, і як убогі наші пізнання в кольорі. В цілому, це цінний ресурс для тих, хто тільки починає розбиратися в поєднаннях кольорів і любить красиві картинки.

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


Рішення для тих, хто любить знаходити кольори у зображеннях. Достатньо завантажити зображення та сервіс видасть палітру основних кольорів із шістнадцятковим кодом.

Кому може знадобитися додаток для вибору кольорових рішень для планшета? Ймовірно, тим, хто не просто працює з кольором, а живе з ним, або людям зі здатністю до синестезії. Сайт пропонує, схожий, але трохи урізаний функціонал інтерфейсу, розроблений для планшета. На жаль, на сайті є недоробки, наприклад, 3D спектр, який є фішкою сайту, насправді виявляється незручним у використанні.

В американських серіалах часто говорять фразу «Тільки якби ти був останнім чоловіком на землі», у нашому ж випадку «Якщо немає будь-якого графічного редакторапід рукою". Сухо, як правило, нецікаво. Немає в ньому ні шарму, ні бажання взаємодіяти, певне, продукт давно не розвивають.


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




Підведемо підсумок:

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

Однією з основних переваг даного міксера кольорів є можливість зберігати свої вибірки, переглядати вибрані кольори на весь екран, а також ділитися своїми знахідками та дивитися чужі. А для тих, хто вже не хоче розлучатися з даним сервісом ні на хвилину, є плагін для Photoshop, який дозволяє користуватися програмою без відриву від редактора.

© 2022 androidas.ru - Все про Android