Правило 60-30-10
Це найкорисніше правило для розподілу кольорів. Воно прийшло з дизайну інтер’єру, але підходить для будь-якого проєкту.
- 60 %: домінантний колір. Зазвичай це нейтральний або м’який тон. Він займає тло й великі площі.
- 30 %: допоміжний колір. Він додає характеру. Його використовують у блоках, меню чи меблях.
- 10 %: акцентний колір. Він найпомітніший. Його використовують у кнопках, іконках чи деталях.
Наприклад: молочно-білий на 60 %, темно-синій на 30 % і помаранчевий на 10 %.
Точно вимірювати не потрібно. Ідея в тому, щоб один колір домінував, другий супроводжував, а третій виділявся.
Роль нейтральних кольорів
Нейтральні кольори — це білий, чорний, сірий, бежевий, кремовий і світло-коричневі. Вони поєднуються майже з усім.
Вони дають очам відпочити й допомагають яскравим кольорам виділятися. Палітра без нейтральних зазвичай втомлює.
- Білий і молочно-білий: чистота й простір.
- Сірий: сучасний і стриманий. Обирайте теплі або холодні сірі залежно від решти палітри.
- Бежевий і пісочний: тепло й природність.
- Чорний або майже чорний: елегантність і контраст. Для тексту дуже темний сірий зазвичай комфортніший, ніж чистий чорний.
Поєднання за температурою
Кольори поділяють на теплі (червоні, помаранчеві, жовті) й холодні (сині, зелені, фіолетові). Є три прості способи їх поєднувати:
- Усе тепле: затишно й енергійно. Ідеально для ресторанів чи дружніх брендів.
- Усе холодне: спокійно й професійно. Ідеально для медицини, технологій чи фінансів.
- Холодна основа з теплим акцентом: найуніверсальніший варіант. Теплий акцент притягує погляд на спокійному тлі.
Найчастіше не працює суміш багатьох яскравих теплих і холодних кольорів одночасно, без домінантного кольору.
Контраст для тексту
Гарний колір марний, якщо текст не читається. Контраст між текстом і тлом важливий для читання й доступності.
- Використовуйте темний текст на світлому тлі або світлий текст на темному.
- Уникайте жовтого, світло-зеленого чи світло-сірого тексту на білому.
- Не розміщуйте насичені комплементарні кольори один на одному, як-от червоний на зеленому. Вони «вібрують» і втомлюють.
- Стандарти WCAG вимагають мінімального співвідношення 4,5:1 для звичайного тексту й 3:1 для великого.
Будь-яку пару кольорів можна перевірити в нашому інструменті перевірка контрасту.
15 поєднань кольорів, які завжди працюють
Ці пари — надійний старт. Використовуйте їх як основу й додавайте нейтральний колір чи акцент за потреби.
- Темно-синій і кремовий: класичне, серйозне й легке для читання.
- Чорний і золотий: розкіш і елегантність.
- Синій і помаранчевий: комплементарні кольори з великою енергією.
- Лісовий зелений і бежевий: природне й спокійне.
- Рожевий і графітовий: сучасне й збалансоване.
- Жовтий і чорний: максимальний контраст, ідеально для попереджень.
- Бордовий і пісочний: тепле й вишукане.
- Бірюзовий і кораловий: свіже й літнє.
- Фіолетовий і світло-бузковий: монохромне й креативне.
- Коричневий і шавлієвий: землисте, ідеально для природних брендів.
- Сірий і персиковий: м’яке й приємне.
- Глибокий синій і блідо-жовтий: спокійне з дрібкою світла.
- Теракотовий і молочно-білий: тепле й середземноморське.
- Темний синьо-зелений і гірчичний: ретро й з характером.
- Білий і червоний: пряме, енергійне й дуже помітне.
Ще більше ідей із HEX-кодами ви знайдете на нашій сторінці поєднання кольорів.
Що поєднується з кожним кольором
Якщо у вас уже є основний колір, цей список дасть швидку відправну точку:
- Червоний: білий, чорний, сірий, темно-синій і бежевий. Для сміливішого варіанта — рожевий або помаранчевий.
- Помаранчевий: темно-синій, бірюзовий, білий, кремовий і коричневий.
- Жовтий: сірий, чорний, темно-синій і білий. Гірчичний добре поєднується з темно-зеленим.
- Зелений: бежевий, білий, коричневий, золотий і ніжно-рожевий.
- Синій: білий, помаранчевий, сірий, жовтий і кораловий. Темно-синій працює майже як нейтральний.
- Фіолетовий: сірий, бузковий, золотий, шавлієвий і білий.
- Рожевий: сірий, темно-синій, оливковий, білий і золотий.
- Коричневий: кремовий, зелений, глибокий синій, помаранчевий і молочно-білий.
Зверніть увагу: нейтральні кольори є майже в кожному списку. Це найбезпечніший спосіб доповнити яскравий колір.
Як створити власне поєднання
- Оберіть основний колір відповідно до того, що хочете передати.
- Знайдіть допоміжний колір на колірному колі: сусідній для спокійного ефекту, протилежний для яскравого.
- Додайте один-два нейтральні кольори.
- Оберіть лише один акцентний колір для найважливішого.
- Перевірте палітру на реальному прикладі: сторінці, слайді чи фото кімнати.
Якщо сумніваєтеся, залиште менше кольорів. Трьох–п’яти кольорів достатньо майже для будь-якого проєкту.
Типові помилки під час поєднання кольорів
- Забагато кольорів. Результат виглядає безладним, і ніщо не виділяється.
- Однакова вага для всіх. Без домінантного кольору око не знає, куди дивитися.
- Забутий контраст. Текст, що не читається, або кнопки, яких не видно.
- Усе насичене. Дуже яскраві кольори втомлюють. Поєднуйте їх із м’якими тонами.
- Ігнорування контексту. Колір виглядає по-різному при денному світлі, на екрані й у друці.
- Копіювання без адаптації. Палітра, що працює для одного бренду, може не підійти вашій аудиторії.
- Нейтральні кольори різної температури. Холодний сірий поруч із теплим бежевим може виглядати брудно. Обирайте нейтральні з однієї родини.
- Перевірка лише на одному екрані. Колір може гарно виглядати на комп’ютері й тьмяно на телефоні. Завжди перевіряйте на кількох пристроях.