Як обрати колірну схему для свого сайту

Більшість порад про «колірну схему сайту» розвалюються тієї ж миті, коли ви відкриваєте реальний файл дизайну. Ви вибираєте три гарненькі зразки з генератора, кидаєте їх у макет — і вже за годину імпровізуєте четвертий колір для повідомлення про помилку, п'ятий для приглушеного тексту підпису й шостий, бо початковий брендовий синій нечитабельний на білому. Проблема не у вашому смаку. Річ у тім, що сайту не потрібна палітра гарненьких кольорів — йому потрібна маленька багатошарова система, де в кожного кольору є своя робота.

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

Скільки кольорів сайту насправді потрібно

Набагато менше, ніж думають люди, і набагато більше за три.

Плутанина береться зі змішування тонів і кольорів, що використовуються в інтерфейсі. Чистий сайт може бути побудований лише з двох-трьох тонів — скажімо, брендового синього й теплого сірого — але вони розгортаються в понад п'ятнадцять реальних значень, щойно ви врахуєте фони, межі, текст різних рівнів акценту, стани наведення тощо. Тож чесна відповідь така: орієнтуйтеся на один-два справжні тони плюс дисциплінований набір нейтралей, а далі виводьте з них усе решта.

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

Багатошаровий набір: призначте роботу кожному кольору

Мисліть шарами, а не пласким рядом зразків. Ось структура, яку я будую щоразу, згори вниз.

1. Основний / брендовий колір

Це колір, який назвав би відвідувач, якби ви спитали, чим ваш сайт «є». Він несе характер і має з'являтися на тому, що ви найбільше хочете показати — на лого, головних кнопках, активній навігації. Обирайте його першим, бо все решта реагує на нього.

Одне застереження з досвіду: насичений брендовий колір майже ніколи не читабельний як основний текст і не годиться для великого фону. Фіолетовий Stripe, зелений Spotify, майже-чорний GitHub — на практиці ці бренди використовують свій фірмовий тон ощадно й спираються на нейтралі для решти 90% поверхні. Ваш брендовий колір — це спеція, а не страва. Якщо ви обираєте тон з нуля, емоційні асоціації мають значення, і Психологія кольору в брендингу — краще місце, щоб поміркувати, який саме тон взяти, ніж будь-який прев'ю генератора.

2. Нейтральна / фонова шкала

Це невидимий герой кожного професійно виглядаючого сайту й той шар, який новачки пропускають. Вам потрібна шкала нейтралей — не один сірий, а градієнт із п'яти-восьми кроків від майже-білого до майже-чорного. Щось на кшталт #FFFFFF, #F7F8FA, #EBEDF0, #D2D6DC, #9AA0A8, #4B5159, #23272E.

Чистий сірий (рівні R, G, B) теж годиться, але тонований нейтраль відчувається продуманішим — зрушіть тон на кілька градусів до кольору бренду й опустіть насиченість приблизно до 5–10%. Сірий із синім нахилом під синім брендом читається як «спроєктований»; мертвий нейтрально-сірий читається як «дефолтний Bootstrap». Використовуйте ці кроки для фонів сторінок, поверхонь карток, роздільників і неактивних станів. Механіку генерування цілісної шкали варто зрозуміти як слід — див. Світлі відтінки, темні й приглушені тони: пояснення.

3. Читабельні кольори тексту (і правило контрасту, що ними керує)

Основний текст рідко буває чисто-чорним на чисто-білому — #000000 на #FFFFFF може відчуватися різко й викликати вібруючий, втомлюючий ефект для деяких читачів. Я зазвичай ставлю основний текст близько #1A1D21 і визначаю ще два рівні: вторинний текст біля #5A6068 для підписів і метаданих та неактивний/плейсхолдерний сірий біля #9AA0A8.

Але справжнє обмеження тут не естетичне, а вимірюване. Згідно з рекомендаціями WCAG від W3C, основний текст звичайного розміру потребує коефіцієнта контрасту щонайменше 4.5:1 щодо фону, щоб відповідати рівню AA; великому тексту (приблизно 24px, або 18.66px жирним) потрібно лише 3:1. Той вторинний сірий, який вам сподобався? Перевірте його. Найпоширеніший провал доступності, який я бачу, — це світло-сірий «приглушений» текст на білому, що сідає десь на 2.8:1 — гарний у макеті, нечитабельний на сонці. Проганяйте кожну пару «текст на фоні» через чекер контрасту WCAG у генераторі палітр, перш ніж фіксувати. Якщо хочете зрозуміти, що насправді вимірює коефіцієнт і чому саме 4.5:1 є межею, Коефіцієнти контрасту WCAG: пояснення копає глибше.

4. Акцентний / CTA-колір

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

Генеруйте його свідомо. Киньте тон бренду на коло, перемкніться на комплементарну чи спліт-комплементарну гармонію — і отримаєте кандидата, достатньо напруженого, щоб притягувати око, не дисонуючи. Синій бренд (#2563EB) чисто поєднується з теплим бурштиновим чи кораловим акцентом (#F59E0B / #F97316) для головного CTA. Бережіть цей колір майже виключно для моментів конверсії — щойно ви використаєте його для декору, він перестане означати «натисни тут».

5. Семантичні кольори станів

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

По-перше, хрестоматійні червоний і зелений дисонують із ретельно підібраними кольорами бренду й виглядають як окрема, гучніша мова дизайну, прикручена збоку. Виправлення — підтягнути ці тони до загальної насиченості й теплоти вашої палітри, щоб вони відчувалися родиною. Орієнтуйтеся на щось на кшталт успіх #16A34A, попередження #D97706, помилка #DC2626, інформація #2563EB, а потім підкрутіть насиченість, щоб вона збігалася з рештою ваших кольорів.

По-друге — і це важить більше — ніколи не покладайтеся лише на колір, щоб передати стан. Приблизно 1 з 12 чоловіків і 1 з 200 жінок мають ту чи іншу форму порушення сприйняття кольору, і червоний/зелений — класична плутанина. Завжди поєднуйте колір стану з іконкою, підписом чи формою. Червона межа та повідомлення «✕ Обов'язкове поле». Зелена галочка та слово «Збережено». Це вимога WCAG, а не люб'язність, і це найвагоміша звичка доступності, яку ви можете виробити. Якщо ваша аудиторія чи продукт чутливі до кольору, Палітри, дружні до дальтоніків розкривають, як це тестувати безпосередньо.

6. Кольори посилань, наведення й фокусу

Найменший шар і той, що відділяє відполіровані сайти від неохайних.

• Посилання зазвичай беруть колір бренду, але перевірте контраст щодо поверхні, на якій вони сидять — колір бренду, підлаштований під кнопки, часто заслабкий для текстових посилань у рядку.
• Наведення має бути виведеним тоном, а не новим кольором: візьміть базовий і зсуньте світлість донизу на 8–12% у HSL. Цілісно, передбачувано, безкоштовно.
• Фокус-кільця не підлягають обговоренню для тих, хто користується клавіатурою. WCAG 2.1 також вимагає, щоб компоненти інтерфейсу та їхні стани досягали коефіцієнта нетекстового контрасту 3:1, тож ледь помітний обвід фокусу, який «виглядає чисто», але майже не видно, — це провал. Зробіть його очевидним.

Збираємо схему зі згенерованої палітри

Ось робочий процес, який перетворює вивід генератора на систему вище, а не на п'ять зразків, які потім доводиться рятувати.

Почніть із фіксації тону бренду на колі. Використовуйте правило гармонії, щоб пропонувати, а не диктувати — аналогову, якщо хочете спокійне, цілісне відчуття; комплементарну чи спліт-комплементарну, якщо потрібен пробивний акцент. (Якщо вагаєтеся між схемами, Спліт-комплементарні проти тріадних палітр розбирає компроміси.) Скопіюйте hex бренду й hex акценту; це шари 1 і 4.

Далі будуйте нейтралі свідомо. Візьміть тон бренду, опустіть насиченість приблизно до 8% і за показником HSL прокрокуйте світлість від ~98% донизу до ~14% за п'ять-шість зупинок. Це вся ваша нейтральна шкала — шар 2 — і оскільки вона ділить тон бренду, вона відчуватиметься єдиною, а не прищепленою. Виведіть кольори тексту з темного кінця цієї шкали (шар 3) і перевірте кожен щодо його фону інструментом контрасту, поки кожна пара не подолає 4.5:1.

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

Причина працювати в HSL від початку до кінця в тому, що це робить «трохи світліше» чи «дрібку менш насичено» зміною одного числа, а не вгадуванням через три канали RGB. Якщо це представлення для вас нове, Кольорові коди HEX, RGB і HSL: пояснення варті десяти хвилин.

Один крок, що рятує вас від редизайну

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

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