32 колірні схеми сайту з HEX-кодами з дизайнів шаблонів We.Inc, а також як побудувати схему, що конвертує: спокійна базова палітра й один акцент для дій, приклади за галузями та перевірки доступності.
Немає кольору, який перемагав би всюди. Найкращий колір кнопки сильно контрастує зі сторінкою й ніде більше не використовується, тому погляд одразу прямує до неї.
Поширений підхід — нейтральна основа (білий або майже білий фон і темний текст), один основний колір бренду та один акцент для закликів до дії, а також семантичні кольори для повідомлень про успіх і помилки. Більша кількість зазвичай послаблює візуальну ієрархію.
Асоціації з кольорами існують, але залежать від культури, галузі й контексту; багато популярних тверджень перебільшені. На конверсії надійно впливають контраст, читабельність і те, чи візуально очевидна потрібна дія.
Промисловим покупцям важливі ясність і довіра. Для цієї сфери пасують темно-синій, графітовий і сталеві сірі відтінки з одним виразним акцентом, часто сигнально-помаранчевим, жовтим або яскраво-синім. Виділіть акцентом технічні характеристики, кнопки запиту ціни й телефонні номери, щоб їх було легко знайти.
Скористайтеся перевіркою контрастності, наприклад WebAIM. WCAG 2.2 рівня AA вимагає контрастності щонайменше 4.5:1 для звичайного тексту та 3:1 для великого тексту й важливих елементів інтерфейсу, таких як межі кнопок і поля форм.
Немає одного кольору, який найкраще конвертує. Важливо те, наскільки кнопка виділяється на тлі сторінки. Схеми кольорів, що сприяють конверсії, мають спокійну послідовну основу й один контрастний акцент, зарезервований лише для дій, яких ви очікуєте від відвідувачів.
Замість запитання «який колір?» запитайте: «Чи не схожа моя найважливіша кнопка на решту сторінки?» Цей посібник показує, як побудувати палітру навколо цієї ідеї.
Ці палітри взято з вихідних дизайнів шаблонів We.Inc (чотири найпоширеніші кольори в попередньому перегляді кожного дизайну без чистих сірих рамки попереднього перегляду). Це шаблонні дизайни, а не сайти клієнтів; ми не робимо жодних заяв щодо конверсії жодного з них. Скопіюйте HEX-код у засіб вибору HEX-кольору, щоб переглянути його та отримати значення RGB/HSL; кожну пару тексту й фону перевіряйте в засобі перевірки контрастності кольорів перед використанням.
| Шаблон We.Inc | Стиль | Кольори (HEX) | Схема |
|---|---|---|---|
| Atlas Builders | Будівництво / ремесла | #101d2c #0b1521 #f2a614 #d18f0a | Глибока темно-синя основа, бурштиновий акцент |
| Summit Trades | Ремесла | #0e2436 #e4671e #16222e #f6eeec | Темно-синій із сигнально-помаранчевим |
| Ironpeak Roofing | Покрівля | #e4671e #0e2436 #17415f #16222e | Помаранчева домінанта, темно-синя структура |
| Ridgewater Plumbing | Сантехніка | #b08544 #d8401f #f2ede3 #c9a063 | Латунь і червоний на теплому кремовому |
| Sunward Solar | Сонячна енергія | #0b1f3a #f5a524 #d98a0b #fff6e6 | Опівнічно-синій і сонячне золото |
| Hookline Towing | Евакуація | #0e0e0e #ffc400 #f4f1ea #161616 | Чорний і жовтий підвищеної видимості |
| Redline Auto Group | Автодилер | #e3262e #0e0f11 #eeeeee #17191c | Гоночний червоний на майже чорному |
| Maple Street Motors | Авторемонт | #1f4d3a #1b1b1b #f2b134 #e6efe9 | Лісовий зелений із гірчичним |
| Freshpile Carpet Cleaning | Прибирання | #ffd23f #0d1b52 #1d3fd8 #dbe2ff | Яскраво-жовтий на темно-синьому |
| Tideline Pressure Washing | Зовнішнє прибирання | #0b1b2b #3fd0c9 #f3f6f5 #020617 | Темно-синій із бірюзовим |
| Mowline Lawn Care | Догляд за газоном | #eef3e6 #c6f24e #0f1410 #1a2a17 | Бліда зелена основа, лаймовий акцент |
| Fairway Lawn Co. | Ландшафтний дизайн | #f6f1e7 #1d2b1f #e8c872 #2f5d3a | Кремовий, темно-зелений, м'яке золото |
| Brightside Dental | Стоматологія | #10312e #3f605c #0e5f57 #0a4841 | Спокійні відтінки бірюзово-зеленого |
| Meadowpaw Veterinary | Ветеринарія | #2f6e6a #e9f0ef #c9d7d4 #f7f9f8 | Приглушений бірюзовий на блідо-м'ятному |
| Vibrant Wellness | Клініка здоров'я | #25382c #eef2e6 #7c9a7e #3f6b4a | Шавлієвий і лісовий |
| Kinfolk Home Care | Догляд вдома | #0f3d2e #f4c542 #fffdf6 #0a2e22 | Соснова зелень із теплим жовтим |
| Lumora | Охорона здоров'я | #c8a97e #182c41 #0b1220 #0e1a26 | Опівнічно-синій із піщаним золотом |
| Sterling & Vance LLP | Юридична фірма | #8a93a2 #b08a4f #0b0e14 #f6eeec | Сланець, бронза й чорнило |
| Harborview Wealth Partners | Фінансові консультації | #102a43 #b08d57 #d9bf8f #faf8f4 | Темно-синій і золотий на слоновій кістці |
| Harborline Insurance Agency | Страхування | #0f2742 #5fd3c9 #17a398 #0b1e33 | Темно-синій із бірюзовим |
| Larkfield Partners | Консалтинг | #1f4d3f #f4f1ea #14181c #4a5560 | Пляшковий зелений на папері |
| Keystone Realty | Нерухомість | #f6eeec #7a2e2a #59606b #e9f0ef | Блідо-рожева основа з бордовим |
| Lucia Trattoria | Ресторан | #e9c9a8 #f7f1e6 #efe6d4 #23301f | Теплий пісок з оливково-чорним |
| Ember & Roast | Кафе / ресторан | #ede6dc #c9642f #14100d #f6eeec | Вівсяний, горілий помаранчевий, еспресо |
| Kilnhouse Coffee | Кав'ярня | #2b1d16 #c65d3b #f3ebe0 #fff8ef | Коричневий обсмаження та теракота |
| Parcel No. 9 Wines | Виноробня | #3a0a15 #fbe9e3 #b8324b #f4a7a0 | Бордо з рожевим |
| Petalry Florist | Квіткова крамниця | #3e1f2b #b4546c #fbf5f2 #f3e3dd | Сливовий і пилова рожевий |
| Hollow Oak Farm Shop | Фермерський магазин | #24301f #f6f1e4 #5e7f3a #e3a33b | Мох, кремовий і медовий |
| Suds & Scruff | Грумінг для тварин | #3b1740 #ffd84d #ff8fab #fff8e7 | Баклажан, жовтий і рожевий |
| Datacore SaaS Hero | SaaS | #7b39fc #a484d7 #6a2ce0 #f87b52 | Фіолетовий із кораловим |
| Mast Security | Безпека | #1e2628 #34e0a1 #e7ede9 #8d9a97 | Графіт із м'ятним |
| Afterglow Sound | Заходи / музика | #efeaff #f472b6 #ec4899 #8b5cf6 | Лаванда, рожевий і фіолетовий |
В більшості схем видно спільний патерн: темна або бліда основа поєднується з одним насиченим акцентом (бурштиновий, помаранчевий, жовтий, лаймовий або кораловий). Це та сама структура «спокійна основа — один акцент для дій», описана нижче.
У статтях про психологію кольору часто стверджують, що синій означає довіру, червоний — терміновість, а зелений — зростання. Загальні асоціації справді існують, але вони сильно залежать від культури, галузі й контексту. В одному середовищі червоний попереджає про небезпеку, в іншому — символізує свято. Зелений може означати рух, екологічність або гроші.
Надійніше підтверджений ефект ізоляції, також відомий як ефект фон Ресторф: елемент, що відрізняється від оточення, з більшою ймовірністю помітять і запам’ятають. Єдина помаранчева кнопка на синьо-білій сторінці привертає увагу. Такий самий помаранчевий на сторінці, повній помаранчевих елементів, — ні.
Звідси випливають два правила для будь-якої галузі:
Дизайнери інтер’єрів використовують співвідношення 60–30–10; для сайтів воно теж добре працює:
| Частка | Роль | Типовий вибір |
|---|---|---|
| ~60% | Тло й основа | Білий, майже білий, дуже світло-сірий або насичений темний для темної теми |
| ~30% | Бренд і структура | Основний колір бренду для шапки, навігації та тла секцій |
| ~10% | Акцент / дія | Кнопки, ключові посилання, один елемент, на який потрібно натиснути |
Додайте темний колір тексту (часто обирають майже чорний або темно-сірий, а не чисто чорний) і семантичні кольори: зелений для успіху, червоний для помилок, бурштиновий для попереджень. Не використовуйте їх для основних кнопок, щоб кнопку «Купити» не сплутали з повідомленням про помилку.
Якщо у вас є логотип, візьміть його основний колір як головний. Якщо ні — оберіть колір, що пасує вашій галузі (див. таблицю нижче) і з яким вам буде комфортно працювати.
Подивіться на колірне коло. Комплементарні кольори, розташовані навпроти, створюють найсильніший контраст: синій і помаранчевий, фіолетовий і жовтий, бірюзовий і кораловий. Якщо ваш бренд синій, помаранчевий або теплий жовтий акцент помітно вирізнятиметься на тлі краще, ніж ще один відтінок синього.
Оберіть колір тла, поверхні карток, рамок і тексту. Вони виконують основну роботу, тож мають бути спокійними.
Перевірте кожне поєднання тексту й кнопок за допомогою інструмента контрастності (WebAIM пропонує безкоштовний). WCAG 2.2 рівня AA вимагає:
Світло-сірий текст на білому — одна з найпоширеніших проблем читабельності в інтернеті. Якщо людям важко прочитати вашу пропозицію, колір кнопки майже не має значення.
Перегляньте палітру на телефоні надворі, на недорогому екрані ноутбука та в темному режимі, якщо сайт його підтримує. Кольори, що мають вишуканий вигляд на моніторі дизайнера, можуть зблякнути на інших екранах.
Це практичні відправні точки, а не правила. У кожній палітрі спокійна основа й один контрастний акцент.
| Галузь | Основа й основний колір | Акцент для дій | Чому працює |
|---|---|---|---|
| Виробництво / промисловість | Темно-синій, графітовий, сталевий сірий | Сигнально-помаранчевий або жовтий | Серйозний і надійний вигляд, помітний заклик «Запросити цінову пропозицію» |
| Охорона здоров’я / стоматологія | Білий, ніжно-блакитний або бірюзовий | Теплий кораловий або зелений | Чистий і спокійний вигляд, помітна кнопка запису |
| Юридичні послуги / фінанси | Насичений темно-синій або лісовий зелений, кремовий | Золотий або яскраво-синій | Традиційні сигнали довіри й помітна дія для зв’язку |
| Ресторани / їжа | Теплі нейтральні тони, темно-червоний або оливковий | Яскраво-жовтий або помаранчевий | Викликає апетит і виділяє «Замовити» чи «Забронювати» |
| SaaS / технології | Білий або майже чорний, індиго чи синій | Яскраво-зелений, помаранчевий або рожевий | Чистий вигляд і контрастний заклик «Почати безкоштовно» |
| Краса / добробут | Пудровий, шавлієвий, кремовий | Темно-сливовий або чорний | М’яка айдентика й виразна кнопка запису |
| Домашні послуги (сантехніка, HVAC, покрівля) | Білий, темно-синій | Червоний або помаранчевий | Кнопка виклику створює відчуття терміновості у надзвичайній ситуації |
| Електронна комерція / мода | Переважно білий і чорний | Один акцентний колір бренду | Дозволяє фотографіям товарів додати кольору |
Для виробників особливо важливо, щоб покупці часто переходять одразу на сторінку товару або можливостей і шукають технічні характеристики чи ціну. Зробіть «Запросити цінову пропозицію», «Завантажити технічні характеристики» й номер телефону єдиними елементами цих сторінок з акцентним кольором.
Уявімо сайт ландшафтної компанії із зеленим логотипом, зеленими заголовками й піктограмами, зеленим головним тлом і зеленою кнопкою «Отримати безкоштовну оцінку». Усе відповідає бренду, але кнопка зникає.
Що робити:
Бренд не змінився, але тепер дія — найпомітніший елемент екрана.
Якщо у вас достатньо трафіку, проведіть A/B-тест кольору кнопки або акценту. Змінюйте лише один елемент за раз і збирайте дані достатньо довго, щоб результат був змістовним. Сайти з невеликим трафіком часто не можуть отримати надійний результат, тож скористайтеся простішими перевірками:
Колір — лише один із чинників конверсії сторінки. В іншому допоможе наш огляд прикладів цільових сторінок із високою конверсією. У We.Inc можна описати бажаний вигляд у чаті, наприклад «темно-синя й сіра палітра з помаранчевою кнопкою запиту ціни», переглянути шаблони, а потім візуально налаштувати кольори або змінити їх у коді.
Почати безкоштовно · Банківська картка не потрібна