Один з найважливіших факторів при створенні унікального та впізнаваного дизайну – колір. Грамотний вибір колірної схеми може визначити успіх чи провал сайту. Коли відвідувач кидає перший погляд на веб-сторінку, то вибрані вами кольори надсилають йому миттєве повідомлення про цю сторінку. На щастя, існує багато інструментів, які допоможуть вибрати правильну схему кольору. Ось п'ять найкращих із них.
1. Kuler
Kuler від компанії Adobe давно визнаний найкращим помічником професійного веб-дизайнера. На відміну від конкурентів, тут є широке ком'юніті і можна ділитися створеними палітрами або брати чужі схеми кольорів і модифікувати під свої потреби. Для спілкування у спільноті потрібно зареєструватися та отримати Adobe ID. Кольори в Kuler представлені у різних форматах, включаючи RGB, CMYK, LAB та HSV.
Натхнення може виникнути під впливом найнесподіванішого приводу. Наприклад, ви можете натрапити на красиву фотографію з привабливою гамою кольорів. Цей генератор палітри кольорів створений саме для обробки таких фотографій. Завантажуєте файли у форматах JPG або PNG і отримуєте докладну розкладку по ключових кольорах. Незалежно від того, яку реакцію ви намагаєтеся викликати у ваших відвідувачів, генератор палітри кольорів допоможе створити унікальний зовнішній вигляд для будь-якого веб-сайту.
Окремі кольори ніколи не висять у вакуумі, і кожен відтінок впливає на оточуючі. Інструмент Contrast-A застосовує суто технічний підхід до конфігурації палітри, надаючи докладну інформацію про співвідношення каналу яскравості (Luminance Ratio) та відмінності в яскравості та кольорі. Це ідеальний інструмент, якщо потрібно створити мінімалістський сайт із невеликою кількістю кольорів, які доповнюють один одного.
Цей популярний плагін для Firefox дозволяє прямо у браузері визначити значення окремих кольорів та виміряти різницю між ними. Існує «браузер колірних схем» для вибору окремих кольорів із заздалегідь підібраних наборів. Простий у використанні та надзвичайно багатофункціональний, плагін ColorZilla – немов швейцарський армійський ніж серед розширень браузера для веб-дизайнерів та художників.
На відміну від більшості інших генераторів колірних схем типу "колірного колеса", Colorotate показує палітру на тривимірному конусі. Як і Kuler, користувачі можуть зберігати та редагувати свої колірні схеми, а також переглядати палітри, зроблені іншими дизайнерами. Інструмент інтегрований з популярними дизайнерськими програмами Adobe Fireworks та Photoshop.
Коли йдеться про ефективний веб-дизайн, то говорять про інтуїтивний інтерфейс і макети, проте колірні схеми мають таке ж велике значення, а то й більше. Перераховані тут інструменти повинні направити вас у правильному напрямку, щоб вибрати відмінну палітру кольорів для сайту з першої спроби. В інтернеті можна знайти інші корисні інструменти, але саме з цих ви можете почати підбір ідеального арсеналу, який відповідає вашому персональному стилю. Удачі та щасливого дизайну!
Вибір палітри кольору завдання завжди складна, будь то дизайн веб-сайту або мобільного додатка. Не варто вибирати кольори абияк, адже якісно підібрана палітра задає стиль всьому сайту.
Щоразу при розробці нового веб-дизайну багато часу витрачається на вибір різних колірних комбінацій. Альтернативні інструменти палітри кольорів допоможуть у майбутньому заощадити вам час.
Існує велика кількість програм для підбору палітри кольорів, але в цьому списку були відібрані інструменти, які дещо відрізняються від стандартних програм.
Сайт з назвою, що говорить, де зібрана і детально представлена інформація про колір. Він більше схожий на інструмент розробника, де є і додавання та віднімання, доступне створення градієнтів з точним вказівкою коду кольору у всіх можливих колірних просторах. Такий підхід зручний для тих, у кого є вільний час, а також незрозуміла любов до обчислень.
Доброзичливий та теплий «ламповий» сервіс, який радує з першої хвилини знайомства. Логіка сайту полягає в тому, що ви вибираєте «один колір», і сервіс пропонує відповідні для нього рішення: градієнт, розбіг по темному і світлому відтінку, трохи приглушені або яскраві відтінки обраного кольору.
На відміну від попередніх сервісів, сайт демонструє вже готові підібрані палітри, на яких відображено, як кольори взаємодіють один з одним на прикріплених фотографіях. Розглядаючи морські хвилі або квіти, дивуєшся, наскільки багата природа у своєму творчому пориві, і як убогі наші пізнання в кольорі. В цілому, це цінний ресурс для тих, хто тільки починає розбиратися в поєднаннях кольорів і любить красиві картинки.
Як описує автор свій ресурс: "я зробив сайт 0to255, щоб спростити свою роботу". Веб-дизайнери та люди подібних професій працюють з квітами щодня. Вибираючи необхідний, їм потрібні його різні кольори, а використовуючи даний сервіс можна просто зекономити час, не обтяжуючи себе редагуванням шістнадцяткового коду.
Рішення для тих, хто любить знаходити кольори у зображеннях. Достатньо завантажити зображення та сервіс видасть палітру основних кольорів із шістнадцятковим кодом.
Кому може знадобитися додаток для вибору кольорових рішень для планшета? Ймовірно, тим, хто не просто працює з кольором, а живе з ним, або людям зі здатністю до синестезії. Сайт пропонує, схожий, але трохи урізаний функціонал інтерфейсу, розроблений для планшета. На жаль, на сайті є недоробки, наприклад, 3D спектр, який є фішкою сайту, насправді виявляється незручним у використанні.
В американських серіалах часто говорять фразу «Тільки якби ти був останнім чоловіком на землі», у нашому ж випадку «Якщо немає будь-якого графічного редактора під рукою». Сухо, як правило, нецікаво. Немає в ньому ні шарму, ні бажання взаємодіяти, певне, продукт давно не розвивають.
Складно назвати цей сайт простим, адже творці вмістили в нього все, що могло б знадобитися під час роботи з кольором. Тут є все: великий вибір добірок, каналів, тренди, різноманітних інструментів для створення патернів, пошук кольорів за зображенням. Загалом, все, що душа забажає.
Підведемо підсумок:
Незважаючи на різноманітність сервісів з вибору кольорів, все ж таки Adobe Kuler, на думку нашої редакції, можна назвати кращим, якщо судити по можливості вибору колірних поєднань.
Однією з основних переваг даного міксера кольорів є можливість зберігати свої вибірки, переглядати вибрані кольори на весь екран, а також ділитися своїми знахідками та дивитися чужі. А для тих, хто вже не хоче розлучатися з цим сервісом ні на хвилину, існує плагін для Photoshop, який дозволяє користуватися програмою без відриву від редактора.
Дизайнеру в цифрову епоху, звичайно, не потрібно обмежуватися квітами, які можна отримати з фарб, чорнила або інших пігментів, хоча з підходу до кольору у творах образотворчого мистецтва також можна багато чого витягти. Людське око може розрізняти мільйони різних відтінків, але іноді навіть поєднання двох кольорів може виявитися складним завданням.
Дивовижні властивості кольору
Це тому, що вибір відтінків для дизайну дуже суб'єктивний і вимагає певних знань. Так що робити дизайнерам, які хочуть скласти красиву колірну палітру, здатну зробити клієнта щасливим? Хочете ви цього це чи ні, але найкращі поєднання кольорів виходять за рамки просто особистих уподобань, тому що вони мають дивовижну здатність впливати на настрій, емоції та сприйняття, набувати культурного та персонального значення та привертати увагу – як свідомо, так і підсвідомо.
Завдання дизайнерів та маркетологів полягає у балансуванні комплексних функцій відтінків для створення привабливої та ефектної палітри поєднання кольорів. Ось тут і знадобиться базове розуміння теорії кольору. Вона може допомогти зрозуміти, які тони добре поєднуються (чи ні) і який ефект створять різні комбінації у рамках даного дизайну.
поєднання квітів
У школі на уроках малювання діти проходять цю тему, тому кожен, напевно, знайомий із його урізаною формою: червоним, жовтим та синім основними тонами. Традиційне колірне коло складається з 12 тонів і часто використовується художниками. Це простий візуальний спосіб зрозуміти взаємини кольорів.
Основне завдання, яке виконує колірне коло, - поєднання кольорів. Змішування базових або первинних відтінків (жовтого, синього та червоного) утворює вторинні: зелений, фіолетовий та помаранчевий. Комбінація їх із основним тоном дозволяє отримати третій рівень кола - третинні кольори. До них належать червоно-оранжевий, зелено-синій, синьо-фіолетовий та фіолетово-червоний. Первинні та вторинні тони є частиною видимого спектру, або кольорами веселки. Їхній порядок легко запам'ятати за допомогою мнемонічної фрази «Кожен мисливець бажає знати, де сидить фазан»: червоний, помаранчевий, жовтий, зелений, блакитний, синій та фіолетовий.
Такий спосіб розуміння кольору відомий як субтрактивна модель, яка полягає в змішуванні пігментів, таких як фарби або чорнила, і використовується як у традиційному колі, так і в системі CMYK, що застосовується в поліграфічному устаткуванні. Вона відрізняється від адитивної моделі, яка полягає у змішуванні світла різної частоти (наприклад, на екрані комп'ютера або телевізора), що складається з іншого набору червоного, зеленого, синього (RGB).
У графічних редакторах використовується інша версія кольору. Будь-який відтінок можна вибрати, використовуючи його шістнадцятковий код.
Термінологія
Перед складанням палітр необхідно освоїти термінологію, яка допоможе зрозуміти різні типи відтінків:
- колірний тон - синонім кольору та традиційно відноситься до одного з 12 кольорів;
- яскравість: ступінь віддаленості кольору від чорного кольору;
- світла: близькість тону до білого кольору;
- насиченість - інтенсивність або чистота кольору (чим ближче відтінок наближається до сірого, тим менший він насичений).
Найкращі поєднання кольорів
З кольору можна виділити ряд класичних палітр, що використовувалися художниками протягом багатьох століть. Для більшості дизайнерських рішень із цих схем має бути виділено один домінуючий колір - за кількістю його використання або за його виділенням з інших тонів - одного або кількох акцентів:
1. Монохромна схема: використання різної яскравості, світлоти або насиченості тонів одного кольору в діапазоні від світлого до темного. Приклад вдалого монохромного поєднання – червоний із чорним та білим. Ця схема забезпечує тонкий та консервативний дизайн. Синій з білим – класична комбінація китайської порцеляни IX ст. та французького текстилю XVIII ст.
2. Аналогічна розташовані пліч-о-пліч на кольоровому колі. Є універсальною і її легко застосовувати при розробці проектів. Прикладом може бути поєднання фіолетового з синьо-фіолетовим.
3. Додаткова схема: використовуються тони, розташовані у протилежних кінцях колірного кола. Наприклад, синій та помаранчевий, червоний та зелений. Комплементарні кольори мають високу інтенсивність і контрастність, але їх складно застосовувати гармонійно і збалансовано в їх чистому вигляді, тому що вони можуть легко зіткнутися в дизайні.
4. Спліт-комплементарна схема: будь-який тон колірного кола плюс два кольори, що межують з його доповненням. Наприклад, жовтий із зеленим та червоно-фіолетовим. Ця схема також має сильний візуальний контрастом, хоча й слабший, ніж попередня. Забезпечує найкращі поєднання кольорів для новачків у дизайні, оскільки її складно зіпсувати.
5. Тріадна схема: будь-які три тони, рівномірно розподілені на колірному колі. Забезпечує досить яскраві поєднання, навіть якщо тони бліді та ненасичені. Для успішного використання необхідно досягти повного балансу – один колір має стати домінуючим, а два інших – акцентами.
6. Зошитова, або подвійна комплементарна: складається з двох комплементарних пар. Дана схема надзвичайно приваблива, але більш складна у застосуванні, ніж одна пара додаткових кольорів, тому що більше тонів складніше збалансувати. При використанні цієї схеми слід вибрати один колір як домінуючий і регулювати насиченість, яскравість і світловість відтінку деяких або всіх тонів, щоб вони забезпечували кращі поєднання кольорів у різних частинах дизайну.
Натхнення
Крім комбінацій колірного кола природа пропонує безліч готових рішень гармонійних колірних схем.
Варіанти поєднання кольорів включають облік їхньої температури (гарячі чи холодні), насиченості (яскраві тони часто виглядають молодо, у той час як бліді – вінтажно), настрої (яскраві та веселі, темні та серйозні), теми (місце розташування, сезон, свято) та інших якостей.
Іншою чудовою технікою пошуку кольору може стати звернення за натхненням до різних історичних періодів та художніх течій: теплі, світлі тони імпресіоністів; яскраві, несподівані комбінації постімпресіоністів; м'які, землісті кольори стилю модерн; яскраві, сміливі відтінки поп-арту.
Психологія кольору
Колір оточує нас. Розуміємо ми це чи ні, але він відіграє велику роль у нашому повсякденному житті. Ви бачили на дорозі помаранчевий або жовтий дорожній знак? Він неспроста привернув увагу. Колір має дивовижний зв'язок з нашими настроями та емоціями.
Але не всі відчувають колір однаково. Сенс та символіка, які у нас асоціюються з різними тонами, дуже залежать від впливу культурних та соціальних груп, до яких ми належимо. Ось деякі загальні значення, пов'язані з основними кольорами у західній культурі.
червоний
Цей колір передає багато різних ідей залежно від контексту. Асоціюючись із вогнем, він може символізувати тепло чи небезпеку. Оскільки червоний – це колір крові, він вважається енергійним, живим тоном, тому пов'язаний із серцевими справами, інколи ж і з насильством.
Альтернативні значення: у деяких східних культурах червоний символізує удачу та процвітання та є кольором, який носять нареченої у день весілля. У всьому світі червоний асоціюється з різними політичними рухами та символізує революцію.
У брендингу: часто означає силу, впевненість та владу і є дуже помітним.
Помаранчевий
Також, будучи кольором вогню, помаранчевий поєднує теплоту червоного з бадьорістю жовтого та символізує активність, енергію та оптимізм. Крім того, пов'язаний із урожаєм чи восени.
Альтернативні значення: в Індії шафран, який має жовтуватий відтінок помаранчевого, вважається священним. У Японії колір символізує кохання.
У брендингу: часто представляє молодість та творчі здібності. Золото, яке є відтінком помаранчевого або жовтого кольору, символізує розкіш і високу якість.
Жовтий
Як колір сонця, він часто символізує щастя, життєрадісність, дружелюбність та свіжість весни. Крім того, у певних контекстах він може передавати сигнал попередження або попереджати про обережність. Деякі варіації (особливо ненасичений і із зеленуватим відтінком) виглядають болючими або неприємними, що не дивно, тому що історично жовтий іноді асоціюється з хворобою та карантином.
Альтернативні значення: у деяких східних та азіатських культурах жовтий асоціюється з високим походженням чи статусом. У деяких частинах Африки та Латинської Америки цей тон є традиційним кольором жалоби.
У брендингу: чистий або яскраво-жовтий тон привертає увагу, але може викликати тривогу або навіть погано помітним (наприклад, білий текст на яскраво-жовтому фоні або навпаки), якщо його використовувати необережно.
Зелений
Це колір природи, рослинності та росту. Він часто символізує здоров'я, свіжість або природні якості. Темно-зелений може представляти багатство та стабільність.
Альтернативні значення: серед культур, які сповідують іслам, зелений є священним кольором. Також він асоціюється з Ірландією, Днем святого Патріка та щасливим чотирилисником.
У брендингу: бренди або товари, що подаються як «зелені» (натуральні, здорові, екологічно чисті, органічні тощо), часто використовують природні кольори, такі як зелений та коричневий.
Блакитний
Колір моря та неба, він часто символізує мир та чистоту. На відміну від більш енергійних та теплих тонів, блакитний сприймається як заспокійливий. У деяких випадках може представляти печаль або депресію.
Альтернативні значення: у близькосхідних культурах блакитний традиційно захищає від зла. Через свою асоціацію з небом, у багатьох культурах колір символізує безсмертя та духовність.
У брендингу: блакитний широко використовується і є одним із найбільш універсальних кольорів. Зазвичай він символізує надійність, безпеку та стабільність. Тон особливо популярний у корпоративних контекстах, оскільки сприймається як такий, що має серйозні, консервативні та професійні якості.
Фіолетовий
Традиційно асоціюється з благородством, величчю чи честю. Таким чином, він має духовні, містичні або релігійні конотації.
Альтернативні значення: у багатьох культурах по всьому світу поєднання фіолетового символізує знати чи багатство, однак у Таїланді та деяких частинах Південної Америки асоціюється з жалобою.
У брендингу: темні відтінки фіолетового часто є символом розкоші, а світліші та яскравіші популярні у жінок та дітей.
Чорний
Подібно до червоного, цей колір має безліч (іноді суперечать один одному) значень. Він може представляти владу, розкіш, вишуканість та ексклюзивність. З іншого боку, чорний символізує смерть, зло чи таємницю. В одязі є символом формальності або жалоби і жалоби (бо траур традиційно носять на похороні).
Альтернативні значення: у деяких країнах Азії та Латинської Америки чорний вважається чоловічим кольором. У Єгипті він означає друге народження. У багатьох культурах колір асоціюється з магією, забобонами чи невдачею, а також з незрозумілим чи невідомим.
У брендингу: чорний настільки широко використовується, що майже став нейтральним, хоча він може символізувати вищезазначене залежно від контексту. Багато дизайнів просто чорно-білі (усвідомлено або просто для економії кольорового друку).
Білий
Як колір світла та снігу, білий часто символізує чистоту, невинність, добро чи досконалість (зазвичай його носять нареченої), але також означає строгість чи стерильність.
Альтернативні значення: у Китаї білий – колір жалоби. У багатьох культурах він позначає світ – білий прапор є універсальним символом перемир'я чи капітуляції.
У брендингу: білий часто комунікує простоту, чистоту чи сучасність. Дизайнери, які шукають естетику мінімалізму, часто використовують багато білого.
Колір у дизайні
Підібрати поєднання кольорів – це більше, ніж вибрати два або три відтінки та розподілити їх у рівних пропорціях по всьому дизайну. Ефективне їх застосування має багато спільного з балансом і чим більше тонів використовується, тим складніше його досягти.
Найпростіше ця концепція втілюється шляхом поділу вибраних кольорів на превалюючі та акценти. Домінуючий тон буде найбільш видимим і найчастіше використовується в дизайні, тоді як один або кілька акцентів його доповнюватимуть і балансуватимуть. Звернення уваги на взаємодію кольорів - наявність або відсутність контрасту, як виглядають розташовані поряд тони, який настрій створює поєднання кольорів і відтінків і т. д. - допоможе точно підібрати ідеальну палітру для цілей дизайну.
Загальноприйнятим правилом використання основної триколірної палітри є правило "60-30-10". Такий підхід часто використовується в оформленні інтер'єрів, але може ефективно застосовуватися і для веб-дизайну або друку. Достатньо приділити домінуючому кольору 60%, а двом акцентам віддати 30% і 10%, що залишилися. Хорошим прикладом, що пояснює це правило, є чоловічий костюм: на піджак і штани припадає 60% кольору одягу, сорочка займає 30%, а краватка - 10%, що залишилися. Все разом забезпечує збалансовану, елегантну зовнішність.
Ще одним способом зберегти простоту та рівновагу палітри є використання яскравості та світлоти (або світліших і темніших версій обраного тону). Таким чином можна розширити вибір кольору без пригніченого дизайну різнобою.
та брендингу
Впізнаваність бренду залежить від кольору. Достатньо подумати про «Кока-Коле», «Фейсбук» або «Старбакс», і неважко згадати тони, з якими ці бренди асоціюються.
Дослідження, проведене в Університеті Вінніпега, показало, що початкові судження людей про продукцію значною мірою засновані на кольорі (60-90% оцінки). Це означає, що тон у дизайні - не лише художній вибір, а й найважливіше бізнес-рішення, яке торкається всіх - від сприйняття споживачами бренду до реалізації продукції.
Однак при виборі колірної схеми для логотипу не обов'язково дотримуватись традицій, символіки чи стереотипів. Тут немає захисту від дурнів чи швидких правил. Важливіше те, як тон використовується в дизайні та гармонує з ринковим контекстом бренду та його характером.
RGB проти CMYK
Під час роботи над друкованим проектом монітор комп'ютера не може відображати кольори так, як вони виглядатимуть на папері. Те, що ви бачите, не є тим, що ви отримаєте, тому що цифрові монітори та принтери використовують дві різні системи: RGB та CMYK. Перша відноситься до маленьких точок червоного, зеленого та синього світла, які поєднуються, щоб сформувати видимі кольори на екрані; друга ж означає блакитний, пурпуровий, жовтий та чорний тони для створення кольорових відбитків. Оскільки RGB використовує більш широкий спектр, ніж CMYK, деякі дизайнери спочатку створюють проект друку RGB для збереження більшої кількості варіантів кольору і конвертують готовий дизайн в CMYK перед друком.
З цієї причини їм необхідний інструмент, що забезпечує стабільний колір при роботі з обома системами, наприклад, при розробці логотипу для веб-сайту та його друку на візитці. Однією з таких систем є Pantone Matching System (PMS). У ній тони можуть бути зіставлені для веб-сайтів та друку (а також для різних типів друкованих поверхонь), щоб забезпечити однаковий вигляд.
Колір: зрозуміти, дослідити та любити його!
Дизайнери спеціалізуються на вивченні теорії кольору, психології чи нейробіології – складних предметах, що знаходяться на стику мистецтва та науки. Але це є частиною того, що робить цю професію таким цікавим та ефективним інструментом на ринку. Хоча цей посібник лише окреслює базові напрями, є надія, що воно допоможе проводити більш обґрунтований та ефективніший вибір кольору для особистих чи професійних проектів.
Кольори для веб-дизайну відіграють величезну роль. Щоб грамотно підібрати схему кольорів для сайту, існують спеціальні сервіси. Упевнена, що у кожного веб-дизайнера в закладках є хоча б один такий.
Іноді ось сидиш і думаєш, який відтінок блакитного вибрати основним для сайту, трохи світліший або яскравіший, а може темніше взяти… А до нього ще треба додаткові підібрати. Можна звичайно робити це і на око, але краще скористатися одним із спеціальних сервісів.
Я не розповідатиму про теорію кольору (це занадто об'ємна інформація), а просто опублікую тут сервіси, які є в закладках і якими я користуюся.
З цим інструментом я дружу вже багато років. Найзручніший інструмент для підбору кольорів (на мій погляд). Має багато додаткових можливостей. Наприклад, можна побачити приклад світлої та темної сторінки з вибраними кольорами.
Є можливість оцінити, як бачитимуть вашу колірну гаму люди з дальтонізмом та іншими особливостями зору. Можна вибрати безпечні веб-кольори.
Adobe Kuler є другий веб інструмент, який я досить часто використовую. Підбір колірної схеми відбувається практично так само, як і на попередньому сайті, але люблю я його не за це. Крім того, що ви самі можете створювати колірні схеми, ви можете подивитися та використовувати схеми, створені іншими людьми.
Для цього потрібно натиснути кнопку у верхньому лівому меню «Дивитись». І перед вами відкриється галерея всіляких поєднань кольорів.
Цей інструмент трохи схожий на Сolorscheme, але має менше функцій, зате є можливість подивитися, як виглядатимуть колірні блоки.
Цим сайтом я практично не користуюся, але якщо він є у мене в закладках, то вирішила додати і його.
Наступні два сайти генерують палітру із вибраного вами зображення. It is magic:)
Ви вибираєте будь-яку картинку, кольори якої вам подобаються, її сервіс аналізує і видає вам колірну палітру. Ці два сайти відрізняються лише тим, як надавати їм картинку.
На цей сайт потрібно завантажитизображення зі свого комп'ютера.
Дуже зручний інструмент для вибору кольору. Заснований на принципі "Подобається - Не подобається".
Як видно з назви, тут можна підібрати кольори для модного зараз плоского дизайну. Сайт цікавий тим, що вибравши палітру, ви можете завантажити її для програм Corel та Photoshop.
Ще один модний тренд – матеріал дизайн. Цей сайт допомагає підібрати поєднання кольорів для UI (user interface). Додатково на сайті є великий набір іконок.
Колір – один із найважливіших елементів у роботі дизайнера. Але його, як концепцію, досить складно освоїти: через безліч комбінацій палітр часто важко вирішити, як краще оформити інтерфейс веб-сторінок і додатків. Раніше ми публікували огляди інструментів на вибір і . Сьогодні хочемо розширити тему, розмістивши в блозі переклад статті 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-дизайну, згадані в статті, напевно допоможуть вам у пошуках цікавої та ефективної гами. Але пам'ятайте: найкращий спосіб навчитися створювати дивовижні палітри – багато практикуватися та експериментувати.