Цвета для сайта: как выбрать цветовую схему

Чтобы подобрать цвета для сайта, определите основной цвет бренда, добавьте 1–2 акцента и подберите фон. Затем проверьте читаемость текста и заметность кнопок. Палитру можно собрать по логотипу или фотографии, а сочетания настроить в Adobe Color. Готовые примеры помогут распределить цвета между элементами страницы.

Каким образом цвет влияет на восприятие сайта и бренда?

Цвет связывает логотип, рекламу и страницы сайта в единое оформление. Например, Coca-Cola использует красный и в логотипе, и в рекламе. Этот пример показывает последовательное применение фирменного цвета.

На сайте цвет также помогает различать роли элементов. Контрастная кнопка выделяет действие, приглушенная заливка объединяет связанные блоки. Одинаковое оформление ссылок помогает узнавать их на разных страницах.

Сам по себе красный не гарантирует покупку или доверие. Впечатление зависит также от текста, фотографий, композиции и контекста. Поэтому оценивайте цветовую гамму для сайта на готовой странице.

Как выбрать основной цвет под бренд и аудиторию?

Как использовать главный цвет на сайте

Закрепите за основным цветом понятные роли во всем интерфейсе. Например, используйте его в логотипе, ссылках и активной навигации. Для главной кнопки можно взять отдельный контрастный акцент.

Не окрашивайте все заголовки, кнопки и плашки одинаково ярко. Если каждый блок привлекает внимание, главное действие теряется среди остальных. Оставьте второстепенные элементы нейтральными или используйте контур вместо заливки.

• Логотип поддерживает фирменное оформление.
• Активный пункт меню показывает текущий раздел.
• Ссылка отличается от обычного текста цветом и подчеркиванием.
• Главная кнопка выделяется на фоне соседних элементов.

Цвет не должен оставаться единственным обозначением состояния. Добавляйте к ошибке текст, к выбранному пункту – дополнительный маркер. Тогда смысл сохранится и при различиях в цветовосприятии.

Сочетания цветов для сайта в Adobe Color

Adobe Color помогает подобрать сочетания цветов для сайта на цветовом круге. Правила гармонии задают взаимное расположение оттенков. Они помогают собрать исходную палитру, но не гарантируют читаемость текста.

На основе преобладающего цвета

1. Получите HEX основного цвета из брендбука. Если у вас только изображение логотипа, загрузите его в инструмент извлечения палитры Adobe Color. Переместите маркер на однотонный участок нужного цвета и скопируйте его код. Не берите пиксель на сглаженном краю буквы. Если код не отображается, используйте пипетку Chrome из подраздела «На основе понравившейся фотографии».
2. Откройте инструмент с цветовым кругом. Выберите образец, который будет базовым, и введите исходный HEX в его поле кода. Ориентируйтесь на обозначение базового образца, а не на положение колонки. Заливка образца должна соответствовать цвету логотипа.
3. Выберите правило гармонии. Для начала сравните аналоговую и комплементарную схемы. При переключении правила расположение маркеров на круге изменится.
4. Настройте дополнительные оттенки маркерами на круге. После изменения сравните HEX базового образца с исходным значением. Если он изменился, верните код бренда.
5. Скопируйте HEX-коды 1–2 дополнительных образцов в отдельный документ. Подпишите назначение каждого: кнопка, выделенная плашка или декоративный элемент.

Если логотип уже размещен на сайте, его цвет можно получить из CSS. Откройте инструменты разработчика браузера через контекстное меню нужного элемента. В стилях найдите color, background-color или fill для SVG.

Этот способ показывает цвет оформления элемента; цвет пикселей внутри растровой картинки извлекайте пипеткой.

Какие правила гармонии подходят для сайта?

Подбор цветовой гаммы для сайта начните с простого сочетания. Чем больше самостоятельных оттенков, тем важнее заранее распределить их роли.

Светлота влияет на читаемость сильнее, чем название выбранной гармонии. Например, противоположные оттенки могут давать слабый контраст текста и фона. Проверяйте каждую пару отдельно.

На основе понравившейся фотографии

Фотография подойдет как основа, если она передает стиль проекта. Возьмите снимок товара, интерьера или собственной работы. Случайная яркая фотография может задать палитру, которая спорит с содержанием.

1. Откройте в Adobe Color инструмент извлечения темы из изображения. Загрузите фотографию через область выбора файла. Сервис покажет снимок с цветовыми маркерами и набором образцов.
2. Переместите маркеры на нужные участки фотографии. Выберите один ведущий оттенок и 1–2 дополнительных. Избегайте бликов и глубоких теней, если они искажают цвет предмета.
3. Скопируйте коды выбранных образцов, если рядом с палитрой видны поля HEX. Если видны только цветные образцы, получите их коды пипеткой браузера по инструкции сразу после списка. Переход к цветовому кругу для этого не нужен.
4. Добавьте нейтральный фон и отдельный цвет текста. Палитра фотографии может содержать только средние по светлоте оттенки. Их недостаточно для читаемого интерфейса.

Пипетка в инструментах разработчика Chrome позволяет снять цвет прямо с видимого образца палитры.

1. Оставьте палитру Adobe Color на экране. Откройте инструменты разработчика через контекстное меню страницы: выберите команду просмотра кода элемента. Рядом со страницей появится панель с HTML и CSS.
2. В панели CSS-правил добавьте выбранному элементу временное свойство color: #000000. Рядом со значением появится черный цветной квадратик. Это изменение действует только в открытой вкладке.
3. Нажмите на квадратик рядом с #000000. В открывшейся панели цвета нажмите значок пипетки. Наведите указатель на середину нужного образца Adobe Color и щелкните по нему. Квадратик в CSS примет выбранный цвет.
4. Закройте панель цвета щелчком вне нее. Удерживая Shift, нажмите цветной квадратик в строке CSS-свойства. В появившемся списке форматов выберите HEX. Скопируйте значение свойства, начинающееся с #. Сохраните его вместе с назначением цвета, например «основной» или «акцент кнопки».
5. Повторите выбор пипеткой для остальных образцов. Снимайте цвет с однотонной середины, избегая рамок и подписей. В результате у вас получится список HEX-кодов выбранной палитры.

Чтобы убрать временное CSS-свойство, удалите добавленную строку в панели правил. Не обновляйте страницу Adobe Color до сохранения кодов: перезагрузка может сбросить подбор.

Сохраните первоначальные HEX-коды до экспериментов. Чтобы вернуть исходную палитру, повторно введите эти значения в образцы. Работа с палитрой не меняет файл вашей фотографии.

Цветовые схемы для сайта: как распределить акценты

Выбирайте один или два дополнительных цвета. Используйте их последовательно: например, один для главного действия, второй для выделенных информационных блоков.

Правило 60–30–10 можно использовать как приблизительный ориентир. Отдайте около 60% оформления нейтральной основе, 30% – основному цвету, 10% – акценту. Не измеряйте эти доли по пикселям: содержимое страницы меняет баланс.

Цветовая палитра для сайта должна описывать назначение каждого оттенка. Один список красивых HEX-кодов не объясняет, как оформлять кнопку или карточку.

Эта палитра цветов для сайта служит исходным вариантом макета. Цвет текста внутри кнопки выбирайте отдельно от основного текста страницы. Проверьте также ссылки, подписи полей и состояния при наведении.

Как перенести HEX-коды в оформление сайта?

В настройках темы ищите поля цветов фона, текста и кнопок. Если тема не дает нужных настроек, используйте CSS в таблице стилей проекта. Перед изменениями сохраните ее копию.

:root {
  --color-bg: #F8FAFC;
  --color-text: #0F172A;
  --color-primary: #1D4ED8;
  --color-accent: #C2410C;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
}

a {
  color: var(--color-primary);
  text-decoration: underline;
}

.button-primary {
  background-color: var(--color-accent);
  color: #FFFFFF;
}

Класс button-primary примените к главной кнопке вашего макета. После обновления страницы фон станет светлым, ссылки – синими, кнопка – оранжевой.

Если оформление не изменилось, проверьте подключение файла и переопределяющие правила в инструментах разработчика. Для отката восстановите сохраненную копию стилей.

Цветовая гамма для сайта: как выбрать цвет фона

Фоновый цвет вашего сайта зависит от того, на что вы хотите обратить внимание пользователей.

Тип 1 – Ресурсы с большим количеством контента или интернет-коммерция

Для статьи или каталога начните с белого либо светлого нейтрального фона. Он позволяет оценивать фотографии без дополнительной цветной подложки. Разделяйте карточки отступами, границами или немного отличающимися поверхностями.

Не делайте второстепенные подписи слишком бледными. Цена, доставка и характеристики должны оставаться читаемыми рядом с фотографиями. Проверяйте их контраст так же, как контраст основного текста.

Тип 2 – Корпоративные сайты и сервисы

Для продвижения бренда используйте фирменный оттенок в отдельных крупных блоках. Длинные описания услуг разместите на спокойной нейтральной поверхности. Так вы сохраните фирменное оформление и разделите разные части страницы.

В рабочем интерфейсе сервиса уделите внимание таблицам, формам и уведомлениям. Фон должен помогать различать эти области. Акцентные цветовые сочетания для сайта оставьте для действий и важных состояний.

Тип 3 – Творческие сайты с большим количеством графики

Портфолио допускает темный фон, насыщенные заливки и крупные цветовые блоки. Но подписи к работам, меню и контакты должны сохранять читаемость. Для текста поверх фотографии используйте сплошную подложку или затемнение изображения.

Если фотография меняется в слайдере, проверьте текст на каждом слайде. Контраст на одном изображении ничего не говорит об остальных.

Как адаптировать палитру под темную тему?

Для темного режима назначьте отдельные цвета фона, поверхностей и текста. Не ограничивайтесь инверсией всей страницы: она изменит фотографии и фирменные элементы. Основной оттенок может потребовать более светлого варианта для ссылок.

Проверьте обе темы на одинаковых страницах. Сравните 3 элемента: основной текст, главную кнопку и поле ввода. Дополнительно оцените ошибки, выделение текста и индикатор клавиатурного фокуса.

Как проверить контраст текста и фона

WCAG 2.x на уровне AA требует контраста не ниже 4,5:1 для обычного текста. Для крупного текста порог составляет 3:1. Крупным считается текст от 18 pt, либо от 14 pt при жирном начертании. В CSS это примерно 24 px и 18,7 px соответственно.

Проверить пару цветов можно инструментом контраста в Adobe Color. Он сравнивает цвет текста с цветом фона. На готовой странице также удобно использовать инструменты разработчика браузера.

1. В инструменте проверки контраста задайте цвет текста и цвет фона. Возьмите HEX-коды из вашей палитры. Для примера используйте #0F172A и #F8FAFC.
2. Посмотрите рассчитанное отношение контраста. Для обычного текста добейтесь значения не ниже 4,5:1. На светлом фоне затемните темный текст либо осветлите фон. На темном фоне осветлите светлый текст либо затемните фон. После изменения повторите расчет: коэффициент должен увеличиться.
3. Проверьте каждую рабочую пару отдельно. У кнопки сравните надпись с заливкой, у ссылки – текст с фоном страницы. Для темной темы повторите проверку с ее значениями.

Коррекция должна увеличивать различие относительной яркости текста и фона.

В браузерных инструментах разработчика выберите текстовый элемент и откройте образец его CSS-цвета. Если панель показывает коэффициент контраста, сравните его с нужным порогом. Этот способ помогает обнаружить отличие фактических цветов от запланированной палитры.

На градиенте или фотографии оценивайте самый слабый участок под буквами. Если контраст меняется, добавьте тексту однотонную подложку. Повторите проверку после изменения размера окна.

Какой цвет выбрать: проверка готовой палитры

Если у бренда уже есть фирменный цвет, сохраните его основным. Для сайта без фирменного стиля сравните несколько вариантов на одинаковом макете. Для портфолио по фотографии дополните извлеченные оттенки нейтральными цветами текста и фона.

• Каждый цвет получил постоянную роль в интерфейсе.
• Главная кнопка отличается от второстепенных действий.
• Обычный текст проходит порог контраста 4,5:1.
• Ошибки и выбранные состояния понятны без различения цветов.
• Светлая и темная темы сохраняют читаемость элементов.

Совет от нашей редакции: сначала оформите палитрой одну содержательную страницу. Возьмите страницу с фотографией, длинным текстом, формой и кнопками. Она покажет слабые сочетания раньше, чем вы перенесете их на весь сайт.