Смешивание цветов

Сочетание цветов для сайта и презентации

Хорошая веб-палитра — это один базовый цвет, один акцент для кнопок и нейтрали для фона и текста, плюс достаточный контраст для читаемости. Ниже — схемы, готовые палитры и живой подбор.

Готовые палитры для интерфейса

#1E5BB8 #F07316 #FFFFFF #1C2330
Синий бренд + оранжевый акцентСпокойная база, заметная кнопка (комплемент).
#0F8A5F #F6F7F9 #1C2330 #CBA135
Изумруд + нейтралиСвежий «эко»/финтех-стиль.
#7A3FB0 #F6C90E #FFFFFF #1C2330
Фиолетовый + жёлтый акцентЯркая пара для лендинга.
#16264F #1E5BB8 #7DC0EC #F07316
Монохром-синий + один акцентСтрогий корпоративный вид.

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

Палитра интерфейса — это не украшение, а инструмент, который направляет внимание, поэтому её строят функционально. Рабочий минимум — три роли: базовый (бренд-цвет крупных элементов и заголовков), акцентный (яркий цвет для кнопок и ссылок — того, что нужно нажать) и нейтральные (фон, границы, основной текст). Классическая схема: один-два «характерных» цвета плюс нейтральная шкала серого от почти-белого фона до почти-чёрного текста. Акцент выбирают контрастным к базовому — часто по комплементу (синий бренд + оранжевая кнопка): так призыв к действию заметен сразу. Дальше решают распределение по правилу 60-30-10: нейтральный фон — около 60%, базовый цвет — 30%, яркий акцент — 10%; если акцентом залить пол-экрана, он перестаёт быть акцентом. Ключевое отличие веба и презентаций от живописи — контраст и читаемость: текст должен уверенно читаться на фоне, поэтому светлый текст кладут на тёмный фон и наоборот, а рекомендации доступности (WCAG) советуют держать контраст текста к фону не ниже примерно 4.5:1. Не стоит полагаться только на цвет для передачи смысла (например, ошибку помечают не одним красным, но и значком или подписью) — часть людей не различает цвета. Меньше — лучше: два-три цвета плюс нейтрали выглядят профессиональнее радуги, а единая палитра на всех слайдах и экранах создаёт ощущение качества. Инструмент выше поможет подобрать акцент к базовому цвету бренда и покажет коды HEX для CSS.

Чего избегать на сайте и в презентации

Частые вопросы

Как подобрать цвета для сайта?

Возьмите один базовый бренд-цвет, один контрастный акцент для кнопок и ссылок и нейтральную шкалу серого для фона и текста. Распределяйте по правилу 60-30-10.

Сколько цветов нужно в веб-палитре?

Обычно достаточно двух «характерных» цветов плюс нейтралей (белый, серый, почти-чёрный). Меньше цветов — чище и профессиональнее интерфейс.

Какой контраст текста считается достаточным?

По рекомендациям доступности WCAG — не ниже примерно 4.5:1 для обычного текста. Светлый текст кладут на тёмный фон и наоборот, чтобы он уверенно читался.

Как выбрать акцентный цвет для кнопок?

Возьмите цвет, контрастный к базовому — часто это комплемент (синий фон — оранжевая кнопка). Инструмент выше подберёт комплемент к вашему бренд-цвету с кодом HEX.