Генератор палитры тёмной темы

Генератор палитры тёмной темы

Вставьте цвета из светлой темы — по одному на строку — и этот инструмент создаст тёмный эквивалент для каждого, готовый к использованию в вашей таблице стилей. Он разработан для типичного сценария поставки тёмной темы после того, как светлая уже готова: передайте цвета фона, поверхностей и акцентов, и инструмент вернёт тот же набор, инвертированный для тёмного интерфейса.

Озаглавьте каждую строку как CSS переменную ("background: #ffffff", "--accent: #3366cc") или просто вставьте голый hex код. Фон тёмной темы устанавливает фон страницы, на котором строится палитра, и контрастность каждого цвета проверяется против него. Требуемая контрастность выбирает WCAG AA (4.5:1) или AAA (7:1) — акценты (более насыщенные записи, предназначенные для текста, ссылок и иконок) подталкиваются к этому коэффициенту, в то время как приглушённые поверхности сообщаются честно, но никогда не принуждаются, поскольку фон карточки не читается как текст. Снизить насыщенность смягчает цвета, которые в противном случае светились бы при полной насыщенности в тёмном режиме, Сохранить оттенок акцента оставляет оттенок и интенсивность фирменного цвета нетронутыми, а Отобразить уровни глубины ступенчато переходит нейтральные оттенки выше фона, как карточка сидит выше страницы за ней.

Строка, которую инструмент не может прочитать как цвет — случайный комментарий, пустой заголовок — пропускается, а не нарушает остаток списка, и счётчик показывается в итоговой сводке рядом с тем, сколько цветов было создано и сколько акцентов достигли целевого контраста. Очень длинные списки и переводы строк Windows или Unix обрабатываются без дополнительных настроек.

Всё выполняется локально в вашем браузере: цвета никогда не загружаются и не отправляются никуда. Скопируйте результат, загрузите его как .txt файл или отправьте вывод прямо обратно на вход, чтобы продолжить уточнение палитры.

FAQ