· Інструмент для підбору кольорів та генерації колірних схем ·

Монохроматична модель. Ця колірна схема заснована на одному відтінку кольору, і використовує варіації, зроблені тільки зміною насиченості та яскравості.

Результат комфортний для очей, навіть за умови використання агресивних кольорів. Разом з тим важче знайти діакритичні знаки та основні факти.

Також монохроматичні варіації зроблено кожному за кольору за іншими схемах.

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

Не слід зловживати контрастними кольорами в дизайні, використовуйте їх лише як колірний акцент.

Модель колірної тріади (м'який контраст). Основний колір доповнений двома кольорами, які тотожно поміщені по обидва боки його комплементу. На відміну від «гострого» розмаїття, ця колірна схема Найчастіше є більш комфортною для очей, вона м'якша, і в ній більше простору для балансування теплих/холодних кольорів.

Тріада утворена трьома кольорами, рівномірно розподіляючи колірне коло (120 °). Колірні схеми тріади мають багато можливостей щодо поєднання кольорів, регулювання контрасту, акцентів та балансу теплих/холодних кольорів.

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

Найменша дистанція між кольорами викликає в результаті менше напруги. Проте зошит завжди є більш «нервовим» і «викликаючим», ніж інші колірні схеми. Працюючи з нею, ви повинні дбати про зв'язки між одним кольором та його суміжним додатковим кольором (комплементом). У разі зошита (кут 90°), необхідно гарне відчуття кольору та дуже делікатний підхід до поєднання кольорів.

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

Ви можете встановити дистанцію суміжних (вторинних) кольорів, кут не повинен перевищувати 60°.

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

Відтінок. На цій вкладці відображається колірне коло. Клацніть по ній для регулювання відтінків основних, додаткових та вторинних кольорів.

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

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

Відтінок основного кольору. Щоб змінити значення, перетягніть повзунок по колірному колу. Для введення числового значення двічі клацніть по ньому.

Відтінок додаткового кольору. Щоб змінити значення, перетягніть повзунок по колірному колу. Для введення числового значення двічі клацніть по ньому.

Відтінок вторинного кольору. Щоб змінити кут/дистанцію, перетягніть повзунок далі або ближче від основного кольору. Для введення числового значення двічі клацніть по ньому.

Відтінок вторинного кольору. Щоб змінити кут/дистанцію, перетягніть повзунок далі або ближче від основного кольору. Для введення числового значення двічі клацніть по ньому.

Кут/дистанція відтінку вторинних кольорів. Натисніть , щоб ввести числове значення. Має сенс тільки в колірних схемах, що використовують вторинні кольори.

Будьте обережні: через помилку округлення під час перетворення, значення RGB, що використовується в колірної схемиможе трохи відрізнятися від введеного значення.

Пресети колірних схем. Клацніть та оберіть певні комбінації яскравості, насиченості та контрастності колірної схеми.

Яскравість та насиченість. Перетягуйте повзунок по квадрату для регулювання яскравості (вгору = світліше, вниз = темніше) та насиченості (вправо = насичене, вліво = розбавлене).

Контрастність колірної схеми. Перетягуйте повзунок по квадрату для регулювання контрастності варіантів кольору у схемі (вгору/вниз для темного варіанта, вліво/вправо для світлого варіанта).

Контрастність колірної схеми. Панель для регулювання яскравості та насиченості відразу всіх варіантів схеми.

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

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

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

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

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

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

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

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

Web-кольори RGB. Зводить колірний простір RGB до використання лише 216 «безпечних для Web/HTML кольорів».

Колірна модель PANTONE™. Виберіть кольори з групи кольорів Pantone™. © Pantone, Inc. Всі права захищені. Відповідність кольорів тільки приблизна, ви отримаєте тільки враження того, як виглядають кольори Pantone. Посібник з Pantone — єдине надійне джерело для перегляду та визначення кольорів.

Колірна модель RAL™. Виберіть кольори із групи кольорів RAL ™. © RAL GmbH. Всі права захищені. Відповідність кольорів лише приблизна. Використовуйте реальні карти кольорів та колекції RAL для перегляду та визначення кольорів.

Експортувати палітру. Виберіть формат збереження колірної схеми для подальшого використання.

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

Експортувати у форматі HTML. Експорт колірної схеми у вигляді HTML-таблиці, зручної для збереження чи друку.

Експортувати у форматі XML. Експорт колірної схеми як розмітку XML, яка в подальшому може бути оброблена XML-парсером.

Експортувати у форматі ACO. Експорт схеми у форматі палітри кольорів Photoshop. Збережіть файл та імпортуйте його у Photoshop, Fireworks або іншу програму, яка підтримує цей формат.

Експортувати у форматі ASE. Експорт схеми у форматі палітри кольорів Adobe Creative Suite.Файли "Adobe Swatch Exchange" працюють у програмах Adobe Photoshop, Adobe Illustrator, Adobe Indesign (починаючи з версій CS2 та CS3), а також можуть бути завантажені в Kuler.

Зберегти зображення у форматі PNG. Інструмент для збереження палітри кольорів у вигляді невеликого зображення.

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

Експортувати у форматі GPL. Експорт схеми як палітра кольорів GIMP Збережіть файл і імпортуйте його в редактор GIMP.

Вісім правил про колірні палітри, які повинен знати кожен

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

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

1. Обмежте кількість кольорів

Застосування кольору до дизайну проекту має багато спільного з балансом. Чим більше кольорів ви використовуєте, тим важче досягти цього балансу. максимум трьох основних кольорів у вашій колірній гамі. Згідно з дослідженням Університету Торонто про те, як люди використовували Adobe Color CC, більшість людей заявили, що віддають перевагу простим кольоровим комбінаціям, які спираються тільки на два або три кольори, крім тих, які ви задали. у своїй палітрі, використовуйте відтінки та тони.

Як створити колірну схему

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

Монохроматична схема дуже приємна на вигляд (особливо синій чи зелений відтінки). Як ви можете бачити на прикладі Facebook, схема виглядає чистою та елегантною.

• Аналогова. Аналогові колірні схеми створюються із суміжних кольорів. Один колір використовується як домінуючий, а інші використовуються для збагачення схеми. Хоча це відносно легко, трюк полягає в тому, щоб вирішити резонанс кольорів, що використовуються, оскільки вся схема буде перебільшена ним. Наприклад, Clear – додаток для складання та організації списків справ, використовує яскраві аналогові кольори для візуального визначення пріоритетів поточного набору завдань. У той час як, додаток для медитації Calm, використовує сині та зелені аналогові кольори, щоб допомогти користувачам відчувати себе спокійними та умиротвореними.

Аналогові схеми створюються з використанням трьох кольорів, розташованих поруч один з одним на 12-колірному колі. Clear – додаток для складання та організації списків справ, що використовує яскраві аналогові кольори для візуального визначення пріоритетів вашого поточного набору завдань.

Calm використовує аналогові кольори для створення загального настрою.

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

Використання додаткових кольорів – найпростіший спосіб виділити щось.

• Користувальницька. Створення користувальницької колірної схеми не так складно, як багато хто думає. Існує простий трюк, який можна використовувати для створення чудової палітри кольорів: просто додайте яскравий колір для акценту в нейтральну палітру (наприклад, традиційну монохроматичну схему). Отримана схема буде візуально яскравою.

Додавання одного кольору в дизайн у відтінках сірого легко і ефективно привертає увагу. Макет з поєднанням білого та сірого з синіми акцентами у колірній схемі Dropbox.

2. Надихайтеся природою

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

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

3. Намагайтеся дотримуватися правила 60–30–10

Це вічне правило декорування, яке допоможе вам легко скласти колірну схему. Пропорції 60% + 30% + 10% призначені для забезпечення балансу кольорів у будь-якому просторі.

Ця концепція неймовірно проста у використанні: 60% – ваш домінуючий відтінок, 30% – вторинний колір, а 10% – колір акценту. Ідея полягає в тому, що вторинний колір підтримує основний колір, але вони досить відрізняються, щоб розділяти їх. Ваші 10% – колір акценту.Це може бути колір для виклику до дії або іншого елемента, який ви бажаєте виділити.

60% – ваш домінуючий відтінок, 30% – вторинний колір та 10% – колір для акценту. Цей метод дозволяє оку зручно переміщатися з однієї точки в іншу.

4. Спочатку дизайн у відтінках сірого

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

Додати колір в самому кінці, і навіть тоді, тільки з певною метою.

Додавання одного кольору до макету з відтінками сірого привертає погляд просто та ефективно.

5. Уникайте використання чорного кольору

У реальному житті чиста чорна майже ніколи не зустрічається. Всі “чорні” об'єкти навколо нас мають деяку кількість світла, що відбивається від них, а це означає, що вони не зовсім чорні, вони темно-сірі. Дороги не чорні. Тіні не чорні.

Колір цього собаки темно-сірий, а не чорний.

Коли ви поміщаєте чистий чорний колір поруч із набором ретельно підібраних кольорів, чорний все пересилить. Він виділяється, тому що це природно. У більшості програм, які ми щодня використовуємо, є чорні кольори, які насправді не чорні, але темні сірі. Наприклад, найтемніший колір на верхній панелі Asos не # 000000, це # 242424. Тому не забудьте завжди додати трохи насиченості у свій колір.

Темний колір у ASOS – не чорний

6.Наголосіть на важливості, використовуючи колірний контраст

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

Чим більше ви хочете щось виділити, тим більше ви повинні покладатися на контрастні кольори.

7. Використовуйте колір для впливу на емоції користувачів

Відомо, що кольори мають властиві їм значення і можуть викликати емоції.

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

Червоний, Помаранчевий, Жовтий

• Червоний (Пристрасний, Потужний, Небезпечний): Червоний – надзвичайно стимулюючий колір. читають старанніше та швидше. Використання червоного – це спосіб привернути увагу користувачів або виділити окремий елемент, який потребує уваги.
• Помаранчевий (грайливий, енергійний, привабливий, дешевий): Помаранчевий – теплий та повний життя колір. Він має енергійну ауру і здатний створити теплий прийом для ваших користувачів. Деякі дослідники вважають, що помаранчевий виражає дешевизну.
• Жовтий (Веселий, доброзичливий, стимулюючий, що привертає увагу): Жовтий – надзвичайно універсальний колір, залежно від обраного відтінку. Світло-жовтий асоціюється із сонцем і, отже, передає позитивність та теплоту. Темні відтінки жовтого (наприклад, золото) створюють враження давнини та віку. Ці темніші відтінки часто пов'язані з вічністю та мудрістю.

Зелений, синій, фіолетовий

• Зелений (природний, безпечний, свіжий): зелений колір відображає почуття довкілля та близькість до природи. Він також означає зростання, і саме тому він часто пов'язаний із бізнесом. Зелений означає почуття правильного чи неправильного.
• Синій (заспокійливий, відповідальний, вірний, надійний): синій колір часто асоціюється зі спокійними і розслаблюючими емоціями. Він також асоціюється з силою та надійністю, з почуттям довіри та професіоналізму. Синій випромінює відчуття внутрішньої безпеки. Ось чому ви можете бачити банки та технологічні компанії, які використовують цей колір. Гіганти соціальних мереж, такі як Facebook, Twitter та LinkedIn, використовують синій колір у своїх мережах.
• Фіолетовий (Розкішний, Таємничий, Романтичний, Духовність): Історично пов'язаний із королівською родиною, фіолетовий натякає, що продукт високого класу.

Рожевий, Чорний, Білий, Сірий

• Рожевий (жіночий, невинність, молодість): рожевий найбільш відомий своїми асоціаціями з жіночністю.
• Чорний (потужний, витончений, загадковий, трендовий): чорний привертає увагу швидше, ніж інші кольори, зокрема червоний. Ось чому він найчастіше використовується лише для тексту та акцентів.
• Білий (чистота, здоров'я, охайність, невинність): білий робить акцент на інших кольорах навколо нього, що робить його популярним вибором як вторинний колір.
• Сірий (нейтральний, формальний, вишуканий, стерильний): сірий колір є нейтральністю, він може приймати характеристики чорного або білого кольорів. При використанні його як основний колір створюється враження формальності.

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

8. Зробіть свій дизайн доступним

Доступність – ключовий момент під час проектування з кольором. Сьогоднішні продукти мають бути доступні всім – незалежно від здібностей людини.

Уникайте використання кольору як індикатора

Приблизно 8% чоловіків та 0,5% жінок страждають від деякої форми колірної сліпоти. Це 1 із 12 чоловіків та 1 із 200 жінок. Хоча існує кілька форм цього захворювання, червоно-зелена кольорова сліпота є найпоширенішою. Людина, яка страждає на цю форму дальтонізму, зазвичай має проблеми з відмінностями як червоного, так і зеленого кольорів.

Як бачить кольори людина з нормальним зором і ті ж кольори людина з червоно-зеленою сліпотою (дейтеронопія і протанопія).

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

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

Уникайте низької контрастності тексту

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

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

Перевірте контраст, щоб кольори фону та переднього плану відображалися з достатнім контрастом для людини, яка страждає на дальтонізм або погано бачить людину. Це дійсно не так складно – все, що вам потрібно зробити, це перевірити коефіцієнт контрастності. Коефіцієнт контрастності показує, як колір відрізняється від іншого кольору (зазвичай це 1: 1 або 21: 1). Чим вище різниця між двома числами у співвідношенні, тим більша різниця у відносній яскравості між кольорами. W3C рекомендує наступні коефіцієнти контрастності для тексту та тексту на зображенні:

• Маленький текст повинен мати коефіцієнт контрастності щонайменше 4,5:1 стосовно фону.
• Великий текст (при 14 pt жирний / 18 pt звичайний) повинен мати коефіцієнт контрастності принаймні 3: 1 до фону.

Хороші новини вам не потрібно перевіряти їх вручну. Використовуючи інструмент Color Contrast Checker, ви можете перевірити свої комбінації кольорів всього за кілька кліків.

Програма перевірки кольорового розмаїття від Webaim

Бонус: Основні інструменти UX дизайнера

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

Adobe Color CC

Adobe Color CC (раніше відомий як Kuler) – чудовий інструмент для пошуку, зміни та створення колірних схем. Кожен колір на панелі може бути індивідуально змінений або обраний як базовий колір всього за кілька кліків. Палітри можуть бути збережені та додані до бібліотеки, і існує безліч відмінних колірних схем, створених спільнотою та доступних на сайті:

Adobe Color CC – чудовий інструмент, який здатний прискорити вивчення різних варіантів колірної схеми.

Dribbble пошук за кольором

Якщо ви хочете зробити візуальні дослідження з використання певного кольору іншими дизайнерами, зайдіть на dribbble.com/colors та виберіть потрібний колір.

Ви також можете вказати мінімальний відсоток вмісту кольору (наприклад, 30% синього).

Вкажіть мінімальний відсоток вмісту кольору

Material Design

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

Colorzilla

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

Coolors.co

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

Один із моїх улюблених способів створення колірної схеми – це використання фотографії. Цей інструмент дозволяє завантажити зображення і зробити колірну палітру.

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

Симуляція колірної сліпоти в Adobe Photoshop

За допомогою Photoshop можна перевірити доступність вашого дизайну. Просто перейдіть в View> Proof Setup, а потім ви можете вибрати один з двох типів сліпоти кольору (протанопія або дейтронопія).

NoCoffee Vision Simulator для Chrome

Щоб уникнути проблем із доступністю в дизайні, при проектуванні рекомендується перевіряти дизайн на колірну сліпоту. NoCoffee Vision Simulator можна використовувати для імітації проблем із зором. Наприклад, використовуючи параметр “Color Deficiency”, встановивши “Deuteranopia”, ви можете переглядати веб-сторінки у відтінках сірого. Це допоможе вам зробити ваш дизайн доступним для користувачів із порушеннями зору.

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

Колірні схеми – ваша проблема? Записуйтесь на курси від Springboard Введення у UX дизайн. Тисячі студентів пройшли їх, щоб розпочати успішну кар'єру у дизайні.