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 можно описать внешний вид в чате, например «темно-синий и серый с оранжевой кнопкой запроса сметы», выбрать шаблон, а затем настроить цвета визуально или в коде.
Начать бесплатно · Банковская карта не нужна