Go Toolstack

Палитра и Конвертер цветов Tailwind CSS

Быстрый поиск HEX, RGB и HSL оттенков с сопоставлением классов Tailwind v3 и v4

Палитра и Конвертер цветов Tailwind CSS

Быстрый поиск HEX, RGB и HSL оттенков с сопоставлением классов Tailwind v3 и v4

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

1
Set Criteria & Options
Select length, format, or generation parameters for your output.
2
Generate Instantly
Generate secure, random, or custom data entirely in your browser.
3
Copy or Export
Copy the generated output to your clipboard or download the file.

Другие клиентские утилиты в этой категории

Хаб: Изображения и Дизайн • Рабочие процессы и руководство по сравнению

Ознакомьтесь со всеми инструментами категории «Изображения и Дизайн», лимитами и руководством по выбору.

Перейти в хаб →
JSON Форматировщик и Валидатор

Форматируйте, сжимайте и валидируйте данные JSON с 64-битной точностью и правилами JSON Schema (Draft-07 / 2020-12).
Base64 Кодировщик и Декодер

Быстрое двустороннее кодирование и декодирование текста, двоичных данных и изображений в Base64
SQL Форматировщик и Бьютификатор

Автоматическое приведение к стандарту и форматирование сложных SQL-запросов (PostgreSQL, MySQL, Oracle)

Связанные руководства в блоге

Технические руководства, устранение неполадок и практические инструкции

Изображения и Дизайн • ~4 мин чтения

Как проверить и удалить метаданные EXIF и геолокацию с фотографий перед публикацией | GoToolstack

Проверка скрытых тегов камеры и GPS-координат в EXIF-просмотрщике, удаление метаданных очистителем и повторный аудит перед отправкой фото.

Читать руководство →
Центр знаний и экспертное руководство

Генератор Цветовых Палитр Tailwind CSS, Шкала Оттенков 50–950 и Экспорт Конфигурации

Генератор палитр Tailwind CSS преобразует любой выбранный базовый цвет (HEX, RGB или HSL) в полную профессиональную шкалу из 11 сбалансированных оттенков: от ультрасветлого 50 до глубокого темного 950. Математическая интерполяция в перцептивно равномерных цветовых пространствах (OKLCH и HSL) гарантирует плавное нарастание контрастности без искажения насыщенности и цветового тона.

В типичном сценарии разработчик выбирает фирменный акцентный цвет бренда: например, глубокий синий #2563eb. Инструмент автоматически принимает его в качестве опорного оттенка 500 и рассчитывает все остальные ступени: пастельный фоновый 50 (#eff6ff), промежуточные оттенки для ховеров и границ (100–400) и насыщенные темные тона для темной темы и текста (600–950). Для каждого сгенерированного оттенка отображается HEX-код, RGB-значение и коэффициент контрастности по стандарту WCAG относительно белого и черного текста. Готовую палитру можно в один клик скопировать в формате объекта для вставки в tailwind.config.js.

Все колориметрические формулы и генерация кода палитры исполняются локально в JavaScript-движке браузера. Настройки вашей корпоративной цветовой палитры не передаются на внешние сервера.

Архитектура и математическая формула

Интерполяция оттенков: HEX ➔ Пространство OKLCH/HSL ➔ Кривая яркости [50: 97% ➔ 500: Base ➔ 950: 12%] ➔ HEX

Базовый цвет раскладывается на компоненты цветового тона, насыщенности и светлоты. Затем функция нелинейной интерполяции строит шкалу яркости с сохранением оптического баланса оттенка.

Лучшие практики и ключевые рекомендации

  • Используйте оттенки 500 и 600 для основных кнопок и акцентов: Это общепринятый стандарт Tailwind, обеспечивающий оптимальный баланс видимости в светлой теме оформления.
  • Применяйте оттенки 50 и 100 для фонов карточек и уведомлений: Пастельные тона служат мягким контекстным фоном для информационных блоков и бейджей.
  • Проверяйте контрастность текста на оттенках 400–600: Средние оттенки требуют особого внимания при выборе цвета текста (белый или черный) для соответствия стандартам доступности WCAG.
  • Экспортируйте палитру прямо в tailwind.config.js под осмысленным именем: Задавайте семантические имена (например, brand или accent), чтобы использовать классы bg-brand-500 по всему проекту.

Часто задаваемые вопросы (FAQ)

Почему для генерации оттенков лучше использовать пространство OKLCH, а не простой HSL?
Пространство OKLCH перцептивно равномерно: при изменении светлоты человеческий глаз не ощущает паразитного сдвига оттенка (например, желтый цвет не превращается в грязно-зеленый).
Как быстро добавить сгенерированную палитру в проект на Tailwind CSS?
Нажмите кнопку 'Копировать Config', откройте файл tailwind.config.js и вставьте скопированный объект внутрь блока theme.extend.colors.
Можно ли скопировать значения цветов в формате переменных CSS (--color-...)?
Да, инструмент поддерживает переключение формата экспорта между JS-конфигурацией Tailwind, набором переменных CSS Custom Properties и HEX-списком.
Проверяет ли инструмент соответствие требованиям контрастности для текста?
Да, на каждой плашке оттенка автоматически рассчитывается коэффициент контрастности по WCAG и выводится маркер (AA или AAA) для черного и белого шрифта.