Генератор Оттенков Цвета

Создайте полную палитру с тонами, оттенками и оценками контраста WCAG

Генератор Оттенков Цвета

Базовый Цвет

HEX

RGB

HSL

Сгенерированная Палитра Нажмите для копирования

Предпросмотр

Экспорт

100% на стороне клиента. Ваши цвета никогда не покидают ваш браузер.

Примеры Использования

Светлые тона (50-200) лучше всего подходят для фонов и тонких выделений.

Средние оттенки (400-600) идеальны для кнопок, ссылок и основных элементов.

Тёмные оттенки (700-900) идеально подходят для заголовков и высококонтрастного текста.

Всегда проверяйте контраст WCAG — AA требует 4.5:1 для обычного текста.

Контраст

WCAG contrast requirements

AA: 4.5:1 (Normal text)
AA Большой: 3:1 (Large text)
AAA: 7:1 (Normal text)

Возможности

Полная Палитра 50-900

Создайте полную палитру в стиле Tailwind из любого базового цвета

Контраст WCAG

Каждый оттенок показывает оценки контраста на белом и чёрном фоне

Несколько Форматов Экспорта

Копируйте как CSS переменные, SCSS, конфиг Tailwind или JSON

Приватно и Оффлайн

Работает полностью в вашем браузере, данные не отправляются на сервер

Как Использовать

Выберите Базовый Цвет

Выберите цвет с помощью палитры или введите значение HEX, RGB или HSL.

Просмотрите Палитру

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

Экспорт или Копирование

Копируйте отдельные цвета или экспортируйте всю палитру как CSS, SCSS, Tailwind или JSON.

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

Инструмент преобразует ваш базовый цвет в HSL и корректирует значение яркости (Lightness) для создания 10 равномерно распределённых шагов. Шаг 50 — самый светлый (близкий к белому), шаг 900 — самый тёмный (близкий к чёрному). Шкала соответствует подходу цветовой палитры Tailwind CSS, где шаг 500 приближается к вашему исходному базовому цвету.

Каждый оттенок показывает коэффициент контраста на белом и на чёрном фоне. Для соответствия WCAG AA обычный текст требует 4.5:1, крупный текст — 3:1. Для AAA: 7:1 для обычного, 4.5:1 для крупного. Светлые оттенки (50-300) обычно проходят AA на чёрном тексте; тёмные оттенки (700-900) обычно проходят AA на белом тексте.

Нажмите «Экспорт конфига Tailwind» и скопируйте JavaScript объект. Вставьте его в секцию "colors" вашего tailwind.config.js. Tailwind автоматически генерирует утилиты вроде bg-brand-500, text-brand-700, border-brand-200.

Нажмите «Экспорт CSS переменных» — вы получите объявления пользовательских свойств CSS (например, --color-500: #0ea5e9). Вставьте их в блок :root и обращайтесь через var(--color-500). Работает с любым CSS-окружением.

Тон — это более светлая версия (смешение с белым, более высокая яркость). Оттенок — более тёмная версия (смешение с чёрным, более низкая яркость). Шаги 50-400 — это тона, шаги 600-900 — оттенки, шаг 500 приближается к исходному цвету.

Это объясняется требованиями контраста WCAG: светлый фон + тёмный текст даёт высокий контраст. Фоны шагов 50-100 с текстом шагов 700-900, как правило, соответствуют WCAG AA. Тёмные фоны (800-900) с белым или текстом шагов 50-100 тоже работают хорошо.

Да. Введите любой допустимый цвет в форматах HEX, RGB или HSL. Генератор создаёт полную пользовательскую палитру из вашего точного базового цвета — удобно для фирменных цветов, которых нет в стандартной палитре Tailwind.

Нет. Все расчёты цветов выполняются локально в вашем браузере через JavaScript.

Что такое Генератор Оттенков Цвета?

Генератор Оттенков Цвета создаёт полный диапазон тонов и оттенков из одного базового цвета. Вместо того, чтобы угадывать, какую более светлую или тёмную вариацию использовать, вы получаете согласованную палитру, работающую на кнопках, фонах, границах и тексте. Этот инструмент создаёт 10-шаговую шкалу от 50 (самый светлый) до 900 (самый тёмный), соответствующую популярной цветовой системе Tailwind CSS.

Как Это Работает

Генератор преобразует ваш базовый цвет в HSL и корректирует значение яркости для создания 10 равномерно распределённых шагов. Затем каждый оттенок оценивается на белом и чёрном фоне с использованием формулы контраста WCAG 2.1, поэтому вы сразу знаете, какие цвета доступны для текста. Всё работает в вашем браузере без обращений к серверу.

Распространённые Варианты Использования

Дизайнеры используют генераторы оттенков для создания фирменных палитр, дизайн-токенов и поддержания визуальной согласованности продукта. Разработчики любят их за создание записей конфигурации Tailwind или пользовательских свойств CSS. Они также необходимы для аудита доступности, помогая выбирать пары текста и фона, соответствующие требованиям WCAG AA или AAA.

Конфиденциальность и Безопасность

Этот Генератор Оттенков Цвета на 100% работает на стороне клиента. Все расчёты цветов происходят в вашем браузере с использованием JavaScript. Никакие цвета, палитры или экспорты не отправляются ни на какой сервер. Никакие файлы cookie не отслеживают ваш выбор, и ничего не сохраняется за пределами вашей текущей сессии. Безопасен для конфиденциальной работы с брендами и внутренних дизайн-систем.

Безопасность и конфиденциальность

Безопасность ваших данных — наш приоритет

Локальная обработка

Вся обработка происходит в вашем браузере

Без передачи данных

Ваши данные не отправляются на наши серверы

Без хранения данных

Данные не хранятся и не передаются

SSL-шифрование

SSL-шифрование для безопасного соединения

Был ли этот инструмент полезен?

Генератор Оттенков Цвета