Как подобрать цвета для тёмной темы
Как сделать тёмную тему сайта или приложения: фон не чисто чёрный, уровни поверхностей, светлые акценты, контраст текста и перенос палитры из светлой темы.
Цвет в веб-дизайне · · 2 мин чтения
Для тёмной темы берите фон не чисто чёрный, а глубокий тёмно-серый с лёгким оттенком (например, #141113 или #121821), поверхности делайте на ступень светлее фона, а акцентный цвет — светлее и чуть менее насыщенным, чем в светлой теме. Основной текст — не белый, а слегка приглушённый (#F2EDE8), чтобы не резал глаза.
Почему не чистый чёрный
- Белый текст на
#000000даёт максимальный контраст 21:1 — на больших объёмах текста это утомляет. - На чистом чёрном невозможно показать «глубину»: тени не видны, а уровни поверхностей сливаются.
- Слегка окрашенный тёмный фон связывает тему с акцентом: тёплый графит для тёплой палитры, сине-чёрный для холодной.
Уровни поверхностей
В тёмной теме иерархию задают не тени, а светлота: чем «выше» элемент, тем он светлее.
| Уровень | Пример | Что |
|---|---|---|
| Фон | #141113 |
Страница |
| Поверхность 1 | #1F1B1E |
Карточки, панели |
| Поверхность 2 | #2A2529 |
Поля ввода, выделенные блоки, меню |
| Текст основной | #F2EDE8 |
Заголовки и текст |
| Текст второстепенный | #B5ACA6 |
Подписи |
Эта палитра используется на нашем сайте: тёмный фон «проявочной», на котором фото и его цвета выглядят ярче.
Акцент в тёмной теме
- Насыщенные тёмные цвета (
#074A97,#8D2330) на тёмном фоне теряются — поднимите светлоту до 55–70%. - Слишком яркие неоновые цвета «светятся» и вибрируют — снизьте насыщенность на 10–20%.
- Текст на акцентной кнопке выбирайте по контрасту: на светлом акценте — тёмный.
Как перенести палитру из светлой темы
- Нейтральные инвертируются: светлый фон → тёмный фон, тёмный текст → светлый текст.
- Акцент сохраняет тон (H в HSL), но меняет светлоту и насыщенность.
- Цвета состояний (успех, ошибка) тоже высветляются: красный
#C62828→#FF8A80. - Проверьте контраст каждой пары — см. статью контраст текста по WCAG.
В коде удобно хранить цвета в переменных и переключать набор целиком — пример в статье цвета в CSS: переменные и темы.
Фото и тёмная тема
Тёмный фон делает фотографии насыщеннее, а цвета палитры — ярче. Поэтому генератор палитры работает в тёмной теме и перекрашивает акцент интерфейса в главный цвет загруженного снимка.
Частые вопросы
Какой цвет фона лучше для тёмной темы?
Тёмно-серый со светлотой 7–12% и лёгким подтоном. Популярные варианты: #121212, #141113, #0F172A.
Нужно ли менять картинки в тёмной теме?
Фотографии обычно остаются как есть. Иллюстрации и иконки с белым фоном стоит заменить или добавить им подложку.
Как учитывать системную тему?
В CSS используйте медиазапрос prefers-color-scheme: dark, а для ручного переключения — атрибут на элементе html и переменные.