Як обрати правильну кольорову палітру для UI/UX: 6 перевірених кроків

💡 Усі статті, обговорення, новини про дизайн — в одному місці. Приєднуйтесь до Design спільноти!

Хочу проговорити з вами базу!

Гарний інтерфейс не створюється випадковим набором кольорів (тсс, насправді створюється, але краще так 👇). Правильна палітра здатна покращити юзабіліті продукту, підвищити впізнаваність бренду та м’яко підштовхнути користувачів до дій.

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

1. Забудьте про «улюблені кольори» — шукайте функцію

Колір у продукті має працювати. Замість того, щоб думати «який колір зробити основним», розділіть палітру на семантичні ролі:

• Brand (Primary): Колір, який продає. Кнопки CTA, активні стани, ключові акценти.
• Surface & Background: Те, що займає 80% екрана. Ваші білі, світло-сірі або темно-графітові відтінки для підкладок та карток.
• Semantic (Feedback): Success (зелений), Warning (жовтий/помаранчеваний), Error (червоний), Info (синій). Вони мають бути інтуїтивними і не сперечатися з основним брендовим кольором.

2. Математика інтерфейсу: адаптуємо оттак 👉 60-30-10

Всі чули про правило 60-30-10 в UI?

• 60% (Невидимий фундамент): Це ваші фони. Вони не мають привертати увагу.
• 30% (Структура): Картки, бордери, вторинні кнопки, хедери. Це те, що організовує контент.
• 10% (Керування увагою): Основні акценти (Primary кнопки, бейджі, тумблери). Якщо акцентного кольору стає більше ніж 10%, інтерфейс починає «кричати» на користувача, і конверсія падає.

3. Генеруйте Scale (шкалу), а не обирайте точково

Вибрати один гарний синій — це лише 5% роботи. Для реального продукту вам потрібні стани: :hover, :active, :disabled, фони для алертів тощо. Ніколи не робіть це на око (додаючи білий чи чорний через прозорість). Можна юзати генератори палітр, щоб створити лінійку від 50 до 900 (де 50 — це найсвітліший фон, а 900 — найтемніший текст).

4. Контраст перевіряється цифрами, а не очима

Якщо ваш дизайнерський сірий текст на світло-сірому фоні виглядає стильно, але його не може прочитати людина з поганим зором на вулиці то це поганий дизайн. Доступність — це технічна вимога. Завжди перевіряйте контрастність тексту щодо фону за стандартом WCAG (мінімум 4.5:1 для звичайного тексту). Благо, плагінів для цього зараз безліч.

5. Мисліть дизайн-токенами

Не називайте кольори Blue-500 чи Light-Grey. Називайте їх за їхньою функцією: bg-primary, text-secondary, border-error. Коли ви (або ваш розробник) захочете впровадити Dark Mode або зробити ребрендинг, ви скажете собі «дякую». Зміна значення одного токена автоматично перефарбує весь продукт без болю та пошуку по макетах.

6. Крадіть як митець (але в правильних місцях)

Коли відчуваєте, що зайшли в глухий кут, не йдіть за натхненням на Dribbble — там багато нежиттєздатних концептів. Відкрийте краще реальні інтерфейси типу Linear, Stripe, Vercel або Notion, або будь які інші. Проаналізуйте піпеткою, як вони працюють з тінями, бордерами та ледь помітними градієнтами на фонах. Це школа реального, «дорогого» продуктового дизайну.

Підсумок

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

Більше про продуктову розробку, системний дизайн та те, як оптимізувати свою роботу (зокрема за допомогою AI), я регулярно пишу у своєму Telegram-каналі @dontprompt. Залітайте, там багато корисного!