Как работает генерация шкалы оттенков (50–950)?

Инструмент использует HSL-интерполяцию яркости. Входной цвет принимается за базовый шаг 500, оттенки 50–400 плавно осветляются к белому, а 600–950 темнеют к черному.

Что означают метки WCAG (AA, AAA) в результатах?

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

Можно ли сгенерировать цвета без создания шкалы оттенков?

Да, выберите схему именования «Одно имя (одно значение)», чтобы перенести цвета в конфиг «как есть», без генерации дополнительных шагов.

Как настроить палитру для темной темы?

Включите опцию «Включить тёмную тему» и введите альтернативный набор HEX-кодов в появившемся поле для генерации соответствующей конфигурации.

Что произойдет, если не указать имя для HEX-кода?

Инструмент автоматически присвоит цветам стандартные имена по порядку, например color1, color2 и так далее.

Elysia Tools

Навигация

Development

Синхронизатор палитры Tailwind

Введите HEX, выберите схему именования (шкала 50–950 / одно имя / вложенность) — генерирует фрагмент theme.extend.colors для tailwind.config.ts с уровнями WCAG AA/AAA. Тёмная тема опциональна.

Детали

С чем помогает этот инструмент

Превращает список 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.

Запуск

Запустить этот инструмент

Заполните форму, запустите инструмент и посмотрите результат на этой же странице.

Подготовленные примеры запуска

Нажмите пример, чтобы автоматически заполнить форму. Файлы по-прежнему нужно загрузить.

2 примеров

Брендовая палитра с полной шкалой

Два брендовых цвета в 11-ступенчатые шкалы с уровнями WCAG, вложенный формат.

{
  "type": "html"
}

Токены одного значения + тёмная тема

Три цвета как токены одного значения, с тёмным набором.

{
  "type": "html"
}

Ввод

Заполните нужные поля и запустите инструмент.

4 параметров

СодержимоеВставьте или введите основные значения.2

Цвета (по HEX на строку, или "name: HEX")textareaОбязательноЦвета тёмной темы (опц., тот же формат)textareaНеобязательно

НастройкиНастройте форматы, диапазоны, числа и режимы.1

Схема именованияselectНеобязательно

ПереключателиВключайте или отключайте дополнительные режимы.1

Включить тёмную темуcheckboxНеобязательноВключено, если отмечено

Результат

Готово к запуску

После запуска здесь появятся файлы, текст, структурированные данные или потоковый вывод.

Примеры

Примеры для этого инструмента

Связано

Синхронизатор палитры Tailwind

С чем помогает этот инструмент

Запустить этот инструмент

Подготовленные примеры запуска

Ввод

Результат

Примеры для этого инструмента

Продолжить с похожими инструментами и темами

Подготовленные примеры запуска

Ввод

Результат

Узнайте, когда использовать этот инструмент, что он поддерживает и как его применяют пользователи.

Ключевые факты

Обзор

Когда использовать

Как это работает

Сценарии использования

Примеры

1. Брендовая палитра с полной шкалой

2. Токены одного значения с темной темой

FAQ

Примеры цветовых кодов

Примеры Tailwind CSS

Примеры Обработки Изображений Web Python

Примеры Обработки Изображений Android Java

AI-генератор идей доменов

Аудитор зависимостей package.json

Конвертер цветовых пространств

Генератор и анализатор JWK

Инструменты кодирования и конвертации аудио

Инструменты конвертации форматов изображений и анимированного экспорта

Инструменты JSON-обмена и перевода форматов

Инструменты перевода цветовых пространств для веба и печати