Перейти до вмісту
TextArray1.87.0
100% локально

Генератор палітри темної теми

Перетворіть кольори зі світлої теми в темні еквіваленти. Перевірка WCAG контрастності та автоматичне вирівнювання за рівнями для ідеальної темної палітри.

Введення
30
Вихід
Пов'язані інструменти
Генератор кольорової палітриВипадкові генератори
Перевірка контрастностіІнструменти розробника
Екстрактор змінних кольорів CSSІнструменти розробника
ключ i18n дифІнструменти розробника
Конвертер TOML в JSONІнструменти розробника
SQL в JSONІнструменти розробника
Генератор палітри темної теми
Вставте кольори зі світлої теми — по одному на рядок — і цей інструмент створить темний еквівалент для кожного, готовий до використання у вашій таблиці стилів. Він розроблений для типового сценарію поставки темної теми після того, як світла уже готова: передайте кольори фону, поверхонь і акцентів, і інструмент повернеться той самий набір, інвертований для темного інтерфейсу.
Озаголовте кожен рядок як CSS змінну ("background: #ffffff", "--accent: #3366cc") або просто вставте голий hex код. Фон темної теми встановлює фон сторінки, на якому будується палітра, і контрастність кожного кольору перевіряється проти нього. Бажана контрастність вибирає WCAG AA (4.5:1) або AAA (7:1) — акценти (більш насичені записи, призначені для тексту, посилань та іконок) підштовхуються до цього коефіцієнту, в той час як приглушені поверхні повідомляються чесно, але ніколи не примушуються, оскільки фон карточки не читається як текст. Зменшити насиченість пом'якшує кольори, які в іншому випадку світилися б при повній насиченості в темному режимі, Зберегти відтінок акценту залишає відтінок і інтенсивність фірмового кольору недоторканими, а Відобразити рівні глибини ступінчасто переходить нейтральні відтінки вище фону, як карточка сидить вище сторінки за нею.
Рядок, який інструмент не може прочитати як колір — випадковий коментар, порожній заголовок — пропускається, а не порушує решту списку, і лічильник показується у підсумковій зведці поряд із тим, скільки кольорів було створено і скільки акцентів досягли цільової контрастності. Дуже довгі списки та переведення рядків Windows або Unix обробляються без додаткових налаштувань.
Усе виконується локально у вашому браузері: кольори ніколи не завантажуються і не надсилаються нікуди. Скопіюйте результат, завантажте його як .txt файл або відправте вихід прямо назад на вхід, щоб продовжити уточнення палітри.
FAQ
Який формат вхідних даних очікує інструмент?
Один колір на рядок у вигляді hex значення. Озаголовте його як CSS змінну ("primary: #3366cc") для читаємого імені змінної, або вставте голий hex код, і інструмент назве його автоматично.
Як він вирішує, які кольори є акцентами?
Колір з помітною насиченістю розглядається як акцент — призначений для тексту, посилань або іконок — і підштовхується до вашого вибраного рівня контрастності. Колір, близький до сірого, розглядається як поверхня і слідує відображенню рівнів глибини.
Чому не кожен колір досягає цільового коефіцієнту контрастності?
Тільки акценти підштовхуються до цільового коефіцієнту, оскільки це правило контрастності тексту. Заповнення поверхонь і фону не є текстом, тому їх контрастність повідомляється у підсумковій зведці, але не примушується.
Що робить "Відобразити рівні глибини"?
Вона ступінчасто переводить ваші нейтральні, низьконасичені кольори вгору від нового темного фону невеликими, рівномірними приростами, замість того щоб дзеркально відображати їх вихідну світність — такий самий багатошаровий вигляд, як карточки, що сидять вище фону сторінки.
Мій список кольорів завантажується кудись?
Ні. Палітра генерується повністю у вашому браузері і ніколи не залишає вашого пристрою.