На сайте у каждого цвета своя роль: фон, текст, кнопки, ссылки и уведомления. Эти 12 палитр созданы именно для этого — со светлым или тёмным фоном, читаемым цветом текста и акцентом для кнопок. Скопируй HEX-коды прямо в CSS или в свой конструктор сайтов.
Чистый синий для SaaS
Почти белый фон, очень тёмно-синий текст и кнопки живого синего цвета.
Сдержанная корпоративная
Для юридических фирм, консалтинговых компаний или промышленных предприятий.
Тёплый интернет-магазин
Оранжевый выделит кнопки покупки на тёплом фоне.
Тёмная тема с зелёным
Многослойные тёмные фоны, светлый текст и зелёный акцент для действий.
Природная и органическая
Для магазинов натуральных продуктов, садовых центров или велнеса.
Доминирующий цвет (обычно фон) используй примерно на 60 % страницы, второстепенный — на 30 % (разделы, карточки, шапка), а акцент — на оставшихся 10 %. Акцент прибереги для кнопок и ссылок, чтобы пользователь знал, куда нажать.
Проверь контраст текста
Правила доступности WCAG требуют для обычного текста контраста не менее 4,5:1. Светло-серый на белом выглядит элегантно, но плохо читается, особенно на телефоне на солнце. Перед публикацией воспользуйся инструментом проверки контраста.
Задай цвета для состояний и уведомлений
Помимо фирменных цветов сайту нужны цвета для ошибок (красный), успеха (зелёный) и предупреждений (жёлтый или оранжевый). Выбери оттенки, которые сочетаются с твоей палитрой, и используй их в формах и сообщениях всегда одинаково.
Обычно хватает трёх-четырёх: фон, цвет текста, основной цвет и акцент, плюс цвета для уведомлений.
Какой цвет лучше всего подходит для кнопок на сайте?
Единственного лучшего цвета не существует; важно, чтобы кнопка контрастировала с фоном и чтобы этот цвет больше ни для чего на странице не использовался.
Как настроить палитру цветов на своём сайте?
Скопируй HEX-коды в цветовые переменные своего CSS или в глобальные настройки цветов своего редактора, например в WordPress, Wix или Shopify.
