Адаптер цветов для тёмной темы

Мгновенно преобразуйте любую палитру светлой темы в аналоги для тёмной темы. Выберите один из трёх режимов адаптации — перцептивный, инверсия или сдвиг — с автоматическим соблюдением контраста WCAG. Экспортируйте как CSS-переменные или конфигурацию Tailwind. Вся обработка выполняется локально в браузере. Регистрация не требуется.

Dark Mode Color Adapter

Enter your light-mode color palette and instantly generate dark-mode equivalents with WCAG contrast checks. Export as CSS custom properties or Tailwind config - all processing runs locally in your browser.

Light Mode Palette

ColorHEXName / CSS Variable

Dark Mode Results

→

background

#828282

4.53:1

→

surface

#708599

4.56:1

→

border

#6485af

4.57:1

→

text

#e5e9f0

14.29:1

→

muted

#818ea2

5.24:1

→

primary

#3780f6

4.63:1

→

accent

#9369f7

4.64:1

Adaptation Settings

Adaptation Mode

Dark BG Lightness10%

Background lightness of the dark theme

Saturation Adjust0%

Boost or reduce saturation in dark mode

Min Contrast4.5:1

WCAG AA = 4.5, AAA = 7.0

Export

:root {
  --background: #ffffff;
  --surface: #f8f9fa;
  --border: #e2e8f0;
  --text: #1a202c;
  --muted: #718096;
  --primary: #3b82f6;
  --accent: #8b5cf6;
}

[data-theme="dark"],
.dark {
  --background: #828282;
  --surface: #708599;
  --border: #6485af;
  --text: #e5e9f0;
  --muted: #818ea2;
  --primary: #3780f6;
  --accent: #9369f7;
}

Contrast ratios are calculated against the dark background lightness you set. WCAG AA requires 4.5:1 for normal text. WCAG AAA requires 7:1. Colors that fail the minimum contrast are automatically nudged toward higher lightness until they pass.

Зачем использовать наш адаптер цветов для тёмной темы?

Мгновенное создание тёмной темы: вставьте палитру светлой темы и получите аналоги для тёмной в реальном времени. Меняйте режим и настройки — все цвета обновляются сразу.
Безопасно и приватно: все вычисления выполняются на 100 % на стороне клиента, в браузере. Данные палитры не отправляются на сервер, поэтому можно безопасно адаптировать фирменные цвета бренда.
Проверка контраста WCAG: каждый адаптированный цвет автоматически проверяется относительно тёмного фона на соответствие WCAG AA (4,5:1) и AAA (7:1). Непрошедшие цвета корректируются до соответствия.
100 % бесплатно навсегда: полностью бесплатно, без регистрации, лимитов использования и рекламы, блокирующей интерфейс. Адаптируйте сколько угодно палитр.

Частые сценарии использования адаптера цветов для тёмной темы

Добавление тёмной темы в существующие приложения: преобразуйте токены дизайна светлой темы в аналоги для тёмной за секунды. Экспортируйте как CSS-переменные и вставьте в текущую таблицу стилей.
Темизация React и Next.js: создайте токены цветов тёмной темы для конфигурации Tailwind или объекта темы CSS-in-JS. Экспорт Tailwind готов к вставке в tailwind.config.js.
Поддержка дизайн-системы: держите светлую и тёмную палитры синхронизированными по мере развития системы. Перезапускайте адаптер при каждом обновлении цвета светлой темы.
Адаптация цветов бренда: адаптируйте фирменные цвета для тёмных интерфейсов, сохраняя оттенок и насыщенность. Перцептивный режим удерживает средние тона и акценты визуально согласованными.
Соответствие требованиям доступности: проверяйте, что все цвета тёмной темы соответствуют контрасту WCAG AA на тёмном фоне. Непрошедшие цвета корректируются автоматически.
CSS-переменные и токены: экспортируйте обе палитры, светлую и тёмную, как CSS-переменные одним кликом. Вывод использует селекторы data-theme="dark" и .dark для максимальной совместимости.

Что такое адаптер цветов для тёмной темы?

Адаптер цветов для тёмной темы преобразует палитру светлой темы в подходящие аналоги для тёмной, корректируя светлоту каждого цвета в пространстве HSL. Простая инверсия (100 − L) часто даёт плохой результат: очень светлые цвета становятся очень тёмными, а средние тона мутными. Наш адаптер использует три более умных алгоритма — перцептивный, инверсию и сдвиг — чтобы получить визуально согласованные и доступные цвета для тёмной темы. Вся обработка идёт мгновенно в браузере, без загрузки на сервер.

Как работает наш адаптер цветов для тёмной темы

Введите палитру светлой темы: добавьте каждый цвет с именем (используется как имя CSS-переменной) и значением HEX. Кнопки предустановок мгновенно загружают пример палитры.
Выберите параметры адаптации: укажите режим (перцептивный, инверсия или сдвиг), задайте светлоту тёмного фона, отрегулируйте насыщенность и минимальный коэффициент контраста WCAG. Цвета тёмной темы обновляются в реальном времени.
Экспортируйте CSS или конфигурацию Tailwind: скопируйте созданные CSS-переменные (с селекторами :root и .dark) или сниппет конфигурации Tailwind прямо в проект.

Три режима адаптации

Перцептивный режим: использует S-образное отображение, сохраняющее относительные контрастные связи между цветами. Светлые цвета (высокое L) становятся чуть ярче на тёмном фоне, тёмные (низкое L) значительно светлее. Рекомендуемый режим для большинства дизайн-систем.
Режим инверсии: отражает светлоту относительно 50 % (тёмный = 100 − светлый). Просто и предсказуемо, но может давать выцветшие средние тона. Лучше всего для минималистичных контрастных палитр.
Режим сдвига: смещает все цвета к светлому краю диапазона тёмной темы. Тёмные цвета получают больший прирост, чем светлые. Хорош для палитр с множеством тёмных тонов.
Соблюдение контраста: после адаптации каждый цвет проверяется относительно тёмного фона по формуле контраста WCAG. Цвета ниже минимального коэффициента сдвигаются к большей светлоте, пока не пройдут проверку.

Часто задаваемые вопросы

Адаптер цветов для тёмной темы преобразует палитру светлой темы в аналоги для тёмной темы: корректирует светлоту HSL, проверяет контраст WCAG и автоматически исправляет цвета, не проходящие проверку. Адаптер работает полностью в браузере.

Простая инверсия светлоты часто даёт плохой результат: очень светлые цвета становятся очень тёмными, а средние тона — мутными. Перцептивный режим и режим сдвига используют более умные алгоритмы, сохраняющие визуальную иерархию.

Каждый адаптированный цвет проверяется относительно тёмного фона по формуле коэффициента контраста WCAG 2.1. Цвета ниже минимального коэффициента автоматически сдвигаются к большей светлоте, пока не пройдут проверку.

Да. Все вычисления выполняются на 100 % на стороне клиента. Цветовые данные никогда не отправляются на сервер.

Вставьте CSS-вывод в свою таблицу стилей. Блок :root определяет цвета светлой темы, блок .dark — тёмной. Переключайте класс dark на корневом элементе для смены темы.

Объедините сниппет конфигурации Tailwind с разделом theme.extend.colors в вашем tailwind.config.js. Цвета ссылаются на CSS-переменные и автоматически переключаются вместе с классом dark.

Да. 100 % бесплатно, без регистрации и ограничений по использованию. Адаптируйте сколько угодно палитр.