Цветовые палитры для тёмной темы: 12 палитр с hex-кодами для ночи
Двенадцать палитр для тёмной темы с точными hex-кодами: акценты, которые светятся ночью, акценты, которые тонут, один акцент для двух тем и не слепящий светлый серо-белый текст.
Палитра для тёмной темы — это не светлая, перевёрнутая вверх ногами. Акцент ведёт себя на тёмной странице иначе, тексту нужна мягкость, а некоторые цвета попросту перестают работать. Вот двенадцать тёмных палитр со всеми hex-кодами, собранных, чтобы показать, что меняется ночью.
Тёмная тема переворачивает ваш акцент
Акценты, которые мучаются на белом, светятся на тёмной поверхности. Акценты, которые выглядят надёжно на белом, могут потерять остроту. Значит, тёмная тема не может просто позаимствовать акцент светлой без проверки.
Каждая палитра ниже состоит из светлых чернил, акцента и тёмной поверхности. Плитки показывают акцент на тёмной странице и на белой. О системе, стоящей за тёмной темой, читайте в нашей статье о цветовых системах тёмного режима.
Lime
Electric Lime #C6F432 на Graphite #17181C: светится
Тот же акцент на белом: бледный
Chalk #F2F3EE на Graphite
Electric Lime почти невидим на белом и светится на Graphite. Цвета, которые мучаются на белом, ночью сияют.
Pink
Hot Pink #FF4F9A на Night Plum #1A1218: светится
Тот же акцент на белом: слабее
Blush White #F6EEF2 на Night Plum
Hot Pink слабее на белом и заметно сильнее на Night Plum.
Amber
Amber #FFB020 на Coffee Black #1B1610: светится
Тот же акцент на белом: бледный
Warm White #F5F0E6 на Coffee Black
Amber слабый акцент на белом и тёплый, сильный на Coffee Black.
Royal
Royal #3B4CCA на Midnight #121426: тонет
Тот же акцент на белом: сильный
Frost #EEF0FA на Midnight
Royal — хрестоматийный синий светлой темы. На Midnight он тонет ниже уровня, при котором кнопка читается как форма: тот же hex, другая страница.
Тот же hex, другая страница. За Royal нужен глаз да глаз: кнопка, которая работает на белом, ночью может утонуть.
Один акцент, две темы
Кнопка должна выделяться на странице, на которой стоит. Waikiki справляется и на светлой странице, и на тёмной. Very Berry тоже. Один hex, обе темы.
Lime Punch и Gentian Blue так не умеют. Каждый отлично смотрится в одной теме и исчезает в другой.
Waikiki
Waikiki
На Silver Bird #FBF8F1: проходит
На Midnight Oil #10141F: проходит
Средний по тону бирюзовый, который заметен на обеих страницах. Один hex, обе темы.
Very Berry
Very Berry
На French Porcelain #F7F4FB: проходит
На Twilight Zone #0F1C16: проходит
Ещё один средний тон, который работает и на светлой странице, и на тёмной.
Lime Punch
Lime Punch
На Ceramic #FBFAF5: не проходит
На Infinite Night #171538: проходит
Слишком светлый для светлой темы: на дневной поверхности кнопка почти исчезает. На Infinite Night он светится.
Gentian Blue
Gentian Blue
На Open Book #F6EFE5: проходит
На Balsamico #1C1612: не проходит
Слишком тёмный для тёмной темы. На Open Book он сильный, на Balsamico растворяется.
Если нужен один акцент для обеих тем, берите средний тон и проверяйте дважды. Если нет, дайте каждой теме свой оттенок. О том, как выпустить вторую тему, рассказывает наш гид по дизайну тёмного режима.
Off-white лучше чисто белого
Чисто белый на почти чёрной поверхности даёт максимальный контраст, и в этом проблема: он слепит. Off-white в этих палитрах всё равно читается куда легче, чем нужно основному тексту.
Тёмная тема Material Design по той же причине задаёт основной текст в 87% белого. Добавьте off-white чуть тепла или чуть холода и позвольте акценту говорить за себя.
Smoked Salmon
Distant Cloud #E7ECEC на Dark Moon #0B1B1F
Чисто белый #FFFFFF на Dark Moon: слепит
Smoked Salmon #FF887A на Dark Moon
Холодный off-white с тёплым коралловым акцентом. Акцент отлично заметен без всякой помощи.
Minted Elegance
Vanilla Sugar #F1EBDF на Violet Void #1C1022
Чисто белый #FFFFFF на Violet Void: слепит
Minted Elegance #4FCB9C на Violet Void
У Vanilla Sugar чуть тепла, а мятному акценту на Violet Void хватает места.
Malibu
Milk and Cookies #EFE7E7 на Asphalt #1C140F
Чисто белый #FFFFFF на Asphalt: слепит
Malibu #57BAF0 на Asphalt
Тёплый off-white на тёплом почти чёрном и небесно-голубой, который прорезает всё насквозь.
Dream Vapour
Star Magnolia #EAEFE4 на Black Stallion #0E1A16
Чисто белый #FFFFFF на Black Stallion: слепит
Dream Vapour #BB9DF0 на Black Stallion
Star Magnolia слегка уходит в зелёный, что хорошо сочетается с мягким сиреневым акцентом.
Каждый акцент в этих четырёх палитрах отлично заметен на своей ночной поверхности, так что тексту можно оставаться тихим.
Все двенадцать палитр в одной таблице
| Палитра | Цвета | Что показывает |
|---|---|---|
| Lime | Chalk #F2F3EE, Electric Lime #C6F432, Graphite #17181C | Светится на тёмном |
| Pink | Blush White #F6EEF2, Hot Pink #FF4F9A, Night Plum #1A1218 | Сильнее на тёмном |
| Amber | Warm White #F5F0E6, Amber #FFB020, Coffee Black #1B1610 | Светится на тёмном |
| Royal | Frost #EEF0FA, Royal #3B4CCA, Midnight #121426 | Тонет на тёмном |
| Waikiki | Midnight Oil #10141F, Waikiki #0098A4, Silver Bird #FBF8F1 | Работает в обеих темах |
| Very Berry | Twilight Zone #0F1C16, Very Berry #CE4390, French Porcelain #F7F4FB | Работает в обеих темах |
| Lime Punch | Infinite Night #171538, Lime Punch #B7DD31, Ceramic #FBFAF5 | Работает только на тёмном |
| Gentian Blue | Balsamico #1C1612, Gentian Blue #292BAE, Open Book #F6EFE5 | Работает только на светлом |
| Smoked Salmon | Distant Cloud #E7ECEC, Smoked Salmon #FF887A, Dark Moon #0B1B1F | Off-white текст |
| Minted Elegance | Vanilla Sugar #F1EBDF, Minted Elegance #4FCB9C, Violet Void #1C1022 | Off-white текст |
| Malibu | Milk and Cookies #EFE7E7, Malibu #57BAF0, Asphalt #1C140F | Off-white текст |
| Dream Vapour | Star Magnolia #EAEFE4, Dream Vapour #BB9DF0, Black Stallion #0E1A16 | Off-white текст |
Цифры для того, кто защищает выбор
Каждая пара измерена по формуле контраста WCAG 2 относительно поверхности, на которой стоит. Это единственная таблица в статье с коэффициентами.
| Палитра | Тест | Коэффициент | Результат |
|---|---|---|---|
| Lime | Акцент на тёмной поверхности / на белом | 13.84:1 / 1.28:1 | Светится, бледный |
| Pink | Акцент на тёмной поверхности / на белом | 5.98:1 / 3.07:1 | Сильнее на тёмном |
| Amber | Акцент на тёмной поверхности / на белом | 9.82:1 / 1.83:1 | Светится, бледный |
| Royal | Акцент на тёмной поверхности / на белом | 2.66:1 / 6.83:1 | Тонет на тёмном |
| Waikiki | Кнопка на светлом / на тёмном | 3.2:1 / 5.2:1 | Проходит оба |
| Very Berry | Переключатель на светлом / на тёмном | 3.9:1 / 4.0:1 | Проходит оба |
| Lime Punch | Кнопка на светлом / на тёмном | 1.4:1 / 11.1:1 | Не проходит, проходит |
| Gentian Blue | Кнопка Play на светлом / на тёмном | 8.9:1 / 1.7:1 | Проходит, не проходит |
| Smoked Salmon | Off-white текст / чисто белый / акцент | 14.7:1 / 17.6:1 / 7.6:1 | Проходит, слепит, проходит |
| Minted Elegance | Off-white текст / чисто белый / акцент | 15.4:1 / 18.3:1 / 9.0:1 | Проходит, слепит, проходит |
| Malibu | Off-white текст / чисто белый / акцент | 14.9:1 / 18.1:1 / 8.3:1 | Проходит, слепит, проходит |
| Dream Vapour | Off-white текст / чисто белый / акцент | 15.2:1 / 17.8:1 / 7.8:1 | Проходит, слепит, проходит |
Как собрать свою тёмную палитру
- Сначала выберите тёмную поверхность. Почти чёрный вроде Graphite #17181C или Violet Void #1C1022 мягче, чем чисто чёрный.
- Набирайте текст в off-white. Добавьте чуть тепла или чуть холода, как в Vanilla Sugar #F1EBDF.
- Проверьте акцент на тёмной поверхности. Не используйте акцент светлой темы повторно без проверки.
- Решите: один акцент или два. Если один акцент должен обслуживать обе темы, берите средний тон и проверяйте его на обеих страницах. Иначе дайте каждой теме свой оттенок.
- Проверьте кнопку как форму. Она должна выделяться на странице, а не просто читаться как подпись.
Скачайте файлы для каждого набора
Каждый набор — бесплатный цветовой набор на Forge с копированием кодов по тапу, файлами образцов для Figma и Adobe (ASE), CSS-переменными и дизайн-токенами.
Бесплатный набор цветов
Тёмная тема переворачивает ваш акцент: Lime, Pink, Amber, Royal
Все hex-коды, плюс образцы ASE, CSS-переменные и дизайн-токены.
Бесплатный набор цветов
Один акцент, две темы: Waikiki, Very Berry, Lime Punch, Gentian Blue
Все hex-коды, плюс образцы ASE, CSS-переменные и дизайн-токены.
Бесплатный набор цветов
Off-white для тёмной темы: Smoked Salmon, Minted Elegance, Malibu, Dream Vapour
Все hex-коды, плюс образцы ASE, CSS-переменные и дизайн-токены.
FAQ
Какие цвета лучше всего работают в палитре для тёмной темы?
Почти чёрная поверхность, off-white для текста и акцент, который выделяется на тёмном. Хороший пример: Smoked Salmon #FF887A на Dark Moon #0B1B1F с Distant Cloud #E7ECEC для текста.
Нужно ли использовать в тёмной теме чисто белый текст?
Нет. Чисто белый на почти чёрной поверхности слепит. Off-white вроде Vanilla Sugar #F1EBDF всё равно читается намного легче, чем нужно основному тексту, и он мягче.
Можно ли использовать один и тот же акцент в светлой и тёмной теме?
Только если это средний тон. Waikiki #0098A4 заметен на обеих страницах. Lime Punch #B7DD31 исчезает на светлом, а Gentian Blue #292BAE исчезает на тёмном.
Почему моя синяя кнопка исчезает в тёмной теме?
Синий, который силён на белом, может быть слишком тёмным для тёмной поверхности. Royal #3B4CCA тонет на Midnight #121426. Для тёмной темы берите более светлый синий.
Какого цвета должны быть кнопки в тёмной теме?
Такого, который выделяется на тёмной поверхности. Electric Lime #C6F432, Hot Pink #FF4F9A и Amber #FFB020 справляются, потому что яркие цвета ночью светятся.
Какой лучший цвет фона для тёмной темы?
Почти чёрный, например Graphite #17181C или Coffee Black #1B1610, а не чисто чёрный. Он мягче рядом с off-white и при этом позволяет акценту светиться.
Источники
- Названия цветов и hex-коды взяты из цветовых наборов UX Brainy на Forge, выпуски 05, 09 и 10. Контраст рассчитан по формуле WCAG 2 относительно поверхности, на которой стоит каждый цвет.
- Пороги для текста и форм соответствуют W3C WCAG 2.2: Contrast (Minimum) и Non-text Contrast.
- Тёмная тема Material Design задаёт основной текст в 87% белого: Material Design, Dark theme.
- Впервые опубликовано тремя каруселями в UX Brainy: Акцент, который работает на белом, может исчезнуть в тёмной теме, Один акцент для светлой и тёмной темы работает только в середине и Тёмной теме не нужен чисто белый текст.
Want a dark theme designed and tested for your own product, not borrowed from the light one? Our team designs interfaces that hold up in both themes.
Get Started
