Як підібрати колірну палітру? Вибір палітри кольорів

Різні кольори та відтінки по-різному впливають на наші емоції та асоціації. Також кольори впливають на наше сприйняття дизайну. Неважливо, що це за дизайн – інтер'єру, сайту чи мобільного додатку- Поєднання кольорів відіграє дуже важливу роль. Лише кілька століть тому вибір квітів, тобто пігментів, був дуже невеликим. Фарби отримували з різних мінералів і рослин, і ремісникам того часу було досить легко підібрати кольори, що поєднуються. Сучасним дизайнерам набагато складніше – у їхньому розпорядженні величезна кількість відтінків і часом буває болісно важко підібрати гармонійні кольори.

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

1. ГОТОВІ ПАЛІТРИ НАВКОЛ ВАС

Каллі Хегстрем, дизайнер із агентства Make Media, розповідає: «Спочатку я роблю фотографії чогось гарного. Це можуть бути квіти, захід сонця, що завгодно. Таким чином я отримую готову колірну палітруі тепер мені лише потрібно вичленувати з фото основні кольори, які обов'язково гармоніюватимуть між собою. Потім я можу відкрити фотографію у фотошопі та за допомогою піпетки зробити нову палітру. Ще простіше зробити палітру за допомогою такого інструменту, як Photocopa. Просто завантажте зображення, що сподобалося, і отримайте готову палітру».

2. ВИКОРИСТОВУЙТЕ КОЛЬОРОВЕ КОЛО

Художник Марк Шагал говорив: «Усі кольори друзі своїх сусідів та любителів їхніх протилежностей». Що він мав на увазі? «Друзами» Шагал називав відтінки, розташовані поруч на кольоровому колі, наприклад, блакитний та синій. А ось «любителі протилежностей» знаходяться навпроти них на колірному колі, тобто синій колір поєднуватиметься з різними відтінками помаранчевого.

Канадський дизайнер Сінді Кінаш із агентства Cultivated Mind каже: «Коли використовуєш акварель, щоб показати тінь чи глибину, можна використовувати схожий колір, лише на кілька відтінків темніше». Даний спосіб підібрати кольори, що добре поєднуються, один з найкращих. Використовуючи дружні кольори і поєднуючи їх з контрастними відтінками, можна досягти приголомшливих результатів - потрібно просто знати, як користуватися колірним колом.

3. ВЧИМОСЯ У ДИЗАЙНЕРІВ ІНТЕР'ЄРУ

Так як незалежно від виду дизайну принципи роботи з кольором залишаються незмінними, то можна звернути увагу на те, як складають палітри кольори дизайнери інтер'єру. Британський дизайнер Олена Дженова ділиться досвідом: «Коли я займаюся дизайном інтер'єру, я використовую правило, яке можна застосувати і до графічного дизайну. У роботі я використовую домінуючий колір, його частка становить 60%, дружні відтінки (30%) та 10% припадає на колірний акцент. Якщо палітра здається надто бідною, то можна додати кілька відтінків, які будуть «друзями» домінуючого кольору, при цьому не варто дробити акцент, його потрібно залишити таким, яким він був».

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

4. ЗБЕРІГАЙТЕ ВДАЛІ ПРИКЛАДИ

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

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

5. ВИКОРИСТОВУЙТЕ ВЕЄРPANTONE

Іноді такий перевірений спосіб підбору кольорів, як колірне коло, не допомагає скласти палітру. У цьому випадку можна підібрати кольори як у старі добрі часи, використовуючи віяло Pantone. Іноді буває корисно відійти від монітора і зосередитися не так на цифровому, але в фізичному зразку кольору. Келлі Хегстрем так пояснює використання віяла відтінків у своїй роботі: «Іноді дуже добре мати віяло під рукою, особливо тоді, коли ви не впевнені, що відтінок на моніторі правильно відображатиметься під час друку. Також віяло стане в нагоді, якщо клієнту потрібен якийсь особливий колір - ви просто показуєте йому віяло і проблема вирішується сама собою».

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

6. Візьміть КОЛЬОРИ У ПРИРОДИ

Наші очі звикли до квітів, які найчастіше зустрічаються у природі. Природні палітри кольорів завжди будуть виглядати вдало - адже вони нам знайомі. Дизайнер Гері з агентства CO-OP каже: «Колірні комбінації нескінченні. Пейзажі, фрукти, листя, квіти – це природні, доступні і безкоштовні джерела натхнення». Гері працює в Південній Африці і тому його палітри теплі та яскраві, як і природа цієї країни.

7. ВИКОРИСТОВУЙТЕ 3 АБО 4 КВІТИ

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

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

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

8. КОЛІРНА ПАЛІТРА ЗАЛЕЖИТЬ ВІД ТЕМИ

Починаючи підбір квітів, потрібно завжди враховувати тему. Ви працюєте над сайтом на спортивну чи бізнес-тематику? Чи ваш проект присвячений красі та моді? Подумайте, які кольори ідеально відповідають заданій темі. Ви створюєте флаєр для косметичного салону? Не варто його робити у темних тонах. А якщо ви працюєте над спортивним журналом – які кольори вам знадобляться? Кожну тему можна описати словами - наприклад, моду можна охарактеризувати такими прикметниками, як "витончена", "мила", "елегантна", а спорт - словами "динамічний", "агресивний", "яскравий".

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

9. ВИКОРИСТОВУЙТЕPINTEREST ДЛЯ ПОШУКУ ТЕМАТИЧНИХ ПАЛІТР

На сайті Pinterest можна знайти велику кількість палітри кольорів, створених дизайнерами з усього світу. Ян Барнард, творець компанії Vintage Design Co, розповідає, як він використовує Pinterest: «Якби я працював над створенням плаката про пляжний відпочинок, то я б ввів у пошук на сайті запит «літні палітри кольорів» і вибрав би підходящий варіант».

10. ВИКОРИСТОВУЙТЕ СПЕЦІАЛЬНІ САЙТИ

COLORlovers – це творча спільнота, де люди, які живуть у різних країнах, створюють та діляться з іншими учасниками кольоровими палітрами та шаблонами. Ставши учасником спільноти, ви отримаєте доступ до більш ніж 3,7 млн. готових колірних палітр.

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

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

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

Я не розповідатиму про теорію кольору (це занадто об'ємна інформація), а просто опублікую тут сервіси, які є в закладках і якими я користуюся.

З цим інструментом я дружу вже багато років. Найзручніший інструмент для підбору кольорів (на мій погляд). У нього багато додаткових можливостей. Наприклад, можна побачити приклад світлої та темної сторінки з вибраними кольорами.

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

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

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

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

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

Наступні два сайти генерують палітру із вибраного вами зображення. It is magic:)

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

На цей сайт потрібно завантажитизображення зі свого комп'ютера.

Дуже зручний інструмент для вибору кольору. Заснований на принципі "Подобається - Не подобається".

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

Ще один модний тренд – матеріал дизайн. Цей сайт допомагає підібрати поєднання кольорів для UI (user interface). Додатково на сайті є великий набір іконок.

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

1. Kuler

Kuler від компанії Adobe давно визнаний найкращим помічником професійного веб-дизайнера. На відміну від конкурентів, тут є широке ком'юніті і можна ділитися створеними палітрами або брати чужі схеми кольорів і модифікувати під свої потреби. Для спілкування у спільноті потрібно зареєструватися та отримати Adobe ID. Кольори в Kuler представлені у різних форматах, включаючи RGB, CMYK, LAB та HSV.

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

Окремі кольори ніколи не висять у вакуумі, і кожен відтінок впливає на оточуючі. Інструмент Contrast-A застосовує суто технічний підхід до конфігурації палітри, надаючи докладну інформацію про співвідношення каналу яскравості (Luminance Ratio) та відмінності в яскравості та кольорі. Це ідеальний інструмент, якщо потрібно створити мінімалістський сайт із невеликою кількістю кольорів, які доповнюють один одного.

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

На відміну від більшості інших генераторів колірних схем типу "колірного колеса", Colorotate показує палітру на тривимірному конусі. Як і Kuler, користувачі можуть зберігати та редагувати свої колірні схеми, а також переглядати палітри, зроблені іншими дизайнерами. Інструмент інтегрований з популярними дизайнерськими програмами Adobe Fireworks та Photoshop.

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

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

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

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

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

Нижче ви знайдете 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-кодами. Зображення можна зберегти на сайті або завантажити.

Висновок

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