Генератор Оттенков Цвета
Создайте полную палитру с тонами, оттенками и оценками контраста WCAG
Генератор Оттенков Цвета
Примеры Использования
Светлые тона (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.
Часто Задаваемые Вопросы
Что такое Генератор Оттенков Цвета?
Генератор Оттенков Цвета создаёт полный диапазон тонов и оттенков из одного базового цвета. Вместо того, чтобы угадывать, какую более светлую или тёмную вариацию использовать, вы получаете согласованную палитру, работающую на кнопках, фонах, границах и тексте. Этот инструмент создаёт 10-шаговую шкалу от 50 (самый светлый) до 900 (самый тёмный), соответствующую популярной цветовой системе Tailwind CSS.
Как Это Работает
Генератор преобразует ваш базовый цвет в HSL и корректирует значение яркости для создания 10 равномерно распределённых шагов. Затем каждый оттенок оценивается на белом и чёрном фоне с использованием формулы контраста WCAG 2.1, поэтому вы сразу знаете, какие цвета доступны для текста. Всё работает в вашем браузере без обращений к серверу.
Распространённые Варианты Использования
Дизайнеры используют генераторы оттенков для создания фирменных палитр, дизайн-токенов и поддержания визуальной согласованности продукта. Разработчики любят их за создание записей конфигурации Tailwind или пользовательских свойств CSS. Они также необходимы для аудита доступности, помогая выбирать пары текста и фона, соответствующие требованиям WCAG AA или AAA.
Конфиденциальность и Безопасность
Этот Генератор Оттенков Цвета на 100% работает на стороне клиента. Все расчёты цветов происходят в вашем браузере с использованием JavaScript. Никакие цвета, палитры или экспорты не отправляются ни на какой сервер. Никакие файлы cookie не отслеживают ваш выбор, и ничего не сохраняется за пределами вашей текущей сессии. Безопасен для конфиденциальной работы с брендами и внутренних дизайн-систем.
Теория цвета в веб-дизайне - Оттенки и контраст WCAG
Освойте теорию цвета, оттенки, стандарты контраста WCAG и создание палитры дизайн-системы.