# Синхронизатор палитры Tailwind Введите HEX, выберите схему именования (шкала 50–950 / одно имя / вложенность) — генерирует фрагмент theme.extend.colors для tailwind.config.ts с уровнями WCAG AA/AAA. Тёмная тема опциональна. > Каноническая страница: https://elysiatools.com/ru/tools/tailwind-color-palette-sync - **Категория:** Development - **Ключевые слова:** tailwind, конфиг tailwind, палитра, токены, wcag, контраст, тёмная тема ## Обзор Превращает список HEX в блок `theme.extend.colors` — с проверками WCAG. **Ввод.** По HEX на строку. Можно с именем: `brand: #3b82f6`. Безымянные → `color1`. **Схемы.** Шкала (50–950, 11 шагов), одно имя или вложенность. Шкала генерит полную палитру интерполяцией к белому/чёрному в HSL. **WCAG.** Каждый оттенок маркируется AAA (≥7), AA (≥4.5), AA-Large (≥3) или Fail. **Тёмная тема.** Опц., второй список HEX → отдельная конфигурация. **Математика.** HSL-интерполяция яркости; входной цвет = шаг 500. ## Входные данные - **Цвета (по HEX на строку, или "name: HEX")** (textarea): brand: #3b82f6 accent: #10b981 #f59e0b - **Схема именования** (select) - **Включить тёмную тему** (checkbox) - **Цвета тёмной темы (опц., тот же формат)** (textarea): brand: #60a5fa accent: #34d399 ## Когда использовать - При создании дизайн-системы на базе Tailwind CSS, когда нужно быстро сгенерировать гармоничные оттенки из базовых HEX-кодов. - Для проверки доступности интерфейса и соответствия цветов стандартам контрастности WCAG AA/AAA. - При настройке конфигурации tailwind.config.ts с поддержкой светлой и темной тем оформления. ## Как это работает - Введите один или несколько HEX-кодов (по одному на строку, опционально указав имя цвета, например brand: #3b82f6). - Выберите схему именования: полную шкалу (50–950), одиночные значения или вложенные объекты, и при необходимости добавьте цвета для темной темы. - Инструмент выполнит HSL-интерполяцию яркости, рассчитает контрастность каждого оттенка относительно черного и белого фонов и сформирует готовый код для конфигурационного файла Tailwind. ## Сценарии использования - Быстрый перенос брендбука компании в конфигурационный файл Tailwind CSS с автоматическим расчетом всех промежуточных оттенков. - Аудит доступности цветовой схемы веб-приложения на соответствие стандартам WCAG непосредственно в процессе разработки. - Подготовка чистой структуры дизайн-токенов для проектов с поддержкой переключения тем оформления (светлая/темная). ## Частые вопросы ### Как работает генерация шкалы оттенков (50–950)? Инструмент использует HSL-интерполяцию яркости. Входной цвет принимается за базовый шаг 500, оттенки 50–400 плавно осветляются к белому, а 600–950 темнеют к черному. ### Что означают метки WCAG (AA, AAA) в результатах? Они показывают уровень контрастности оттенка по отношению к белому и черному фону, помогая выбрать безопасные цвета для текста и элементов интерфейса. ### Можно ли сгенерировать цвета без создания шкалы оттенков? Да, выберите схему именования «Одно имя (одно значение)», чтобы перенести цвета в конфиг «как есть», без генерации дополнительных шагов. ### Как настроить палитру для темной темы? Включите опцию «Включить тёмную тему» и введите альтернативный набор HEX-кодов в появившемся поле для генерации соответствующей конфигурации. ### Что произойдет, если не указать имя для HEX-кода? Инструмент автоматически присвоит цветам стандартные имена по порядку, например color1, color2 и так далее. ## Связанные инструменты - [AI-генератор идей доменов](https://elysiatools.com/ru/tools/ai-domain-name-idea-generator): Введите ключевые слова бренда — ИИ сгенерирует до 10 идей доменов, отфильтровав занятые через DNS + RDAP. Для стартапов и разработчиков. - [Аудитор зависимостей package.json](https://elysiatools.com/ru/tools/package-json-dependency-auditor): Проверяет package.json на гигиену зависимостей и качество диапазонов версий, а также при желании исследует транзитивное дерево из package-lock.json или yarn.lock. Отмечает дубликаты, wildcard/pre-release, неотсортированные ключи, отсутствующие метаданные и неверную классификацию runtime/dev зависимостей. - [Конвертер цветовых пространств](https://elysiatools.com/ru/tools/color-space-converter): Конвертирует цвет между HEX, RGB, HSL, CIELAB и Display-P3 с CSS-выводом и проверкой гаммы. - [Генератор и анализатор JWK](https://elysiatools.com/ru/tools/jwk-generator): Генерирует JSON Web Keys (JWK) для RSA, EC (P-256/P-384/P-521/secp256k1) и OKP (Ed25519/Ed448/X25519/X448), либо разбирает существующий JWK для просмотра параметров, отпечатка и метаданных - [Коуч по cycle time и пропускной способности канбана](https://elysiatools.com/ru/tools/kanban-cycle-time-throughput-coach): Импортируйте метки создан→начат→завершён из CSV (Jira-стиль или простой) и получите метрики потока глазами agile-коуча: перцентили lead/cycle time, возраст WIP, пропускную способность по дням/неделям/месяцам, накопительную диаграмму потока и проверку закона Литтла. - [Генератор PKCE Code Verifier и Challenge](https://elysiatools.com/ru/tools/pkce-code-verifier-generator): Создание, проверка и верификация пар code_verifier / code_challenge PKCE (RFC 7636) для OAuth2 / OIDC. Три режима: (1) создать новую пару из криптостойких случайных байт (256/384/512/768 бит), (2) аудит имеющегося verifier по RFC — длина (43–128), набор \[A-Za-z0-9-._~\] и ≥256 бит энтропии, (3) проверить пару, пересчитав BASE64URL(SHA256(verifier)). При желании строит полный URL запроса авторизации и тело обмена токена. Дополняет универсальный nonce-generator (только выдаёт пару) аудитом соответствия RFC и проверкой пар. - [Проверщик заголовков безопасности](https://elysiatools.com/ru/tools/security-headers-checker): Аудит HTTP-заголовков ответа на безопасность — анализирует необработанные заголовки, которые вы вставляете (без сети), и оценивает их по набору безопасных заголовков OWASP с проверками на уровне значения: HSTS max-age, CSP unsafe-inline/eval, X-Content-Type-Options, Referrer-Policy, Permissions-Policy, COOP/COEP/CORP и др. Возвращает оценку (от A+ до F) и находки по каждому заголовку с готовыми к копированию рекомендациями. - [Конструктор осей и экземпляров вариативных шрифтов и CSS font-variation-settings](https://elysiatools.com/ru/tools/variable-font-axis-instance-and-css-font-variation-settings-builder): Загрузите вариативный шрифт (TTF/OTF/WOFF/WOFF2), чтобы изучить оси fvar и именованные экземпляры, посмотреть интерполяцию прямо в браузере и получить готовый CSS font-variation-settings, эквивалентные высокоуровневые свойства и блок @font-face. ## Примеры - [Примеры цветовых кодов](https://elysiatools.com/ru/samples/color-code): Коллекция цветовых кодов в различных форматах (Hex, RGB, HSL, именованные цвета) для тестирования валидации - [Примеры Tailwind CSS](https://elysiatools.com/ru/samples/tailwind-css): Примеры Tailwind CSS - CSS-фреймворк с утилитарно-первым подходом, адаптивным дизайном, компонентами и пользовательской конфигурацией - [Примеры Обработки Изображений Web Python](https://elysiatools.com/ru/samples/web-image-processing-python): Примеры обработки изображений Web Python используя PIL/Pillow включая чтение, сохранение, изменение размера и преобразование формата - [Примеры Обработки Изображений Android Java](https://elysiatools.com/ru/samples/android-image-processing-java): Примеры обработки изображений Android Java включая чтение/сохранение, масштабирование и преобразование формата