Редактор цветов
Точная настройка и корректировка цветов. Изменяйте оттенок, насыщенность и яркость, создавайте шкалы оттенков и проверяйте контрастность для обеспечения доступности текста.
Об этом инструменте
Редактор цветов — это полноценный инструмент для точной настройки и совершенствования любого цвета. Введите цвет в формате HEX, RGB, HSL или даже по названию, затем используйте ползунки для изменения Оттенка (тон цвета), Насыщенности (интенсивность цвета) и Яркости (насколько светлый или тёмный цвет). Изменения применяются в режиме реального времени, что позволяет мгновенно видеть результат и проверять читаемость цвета на светлом и тёмном тексте. Кроме того, инструмент автоматически конвертирует цвет в основные форматы, используемые в веб-дизайне и разработке: HEX, RGB, HSL, HSV и OKLCH.
Возможности
Где Применять Редактор Цветов
- Создавать согласованные палитры для дизайн-систем, компонентов и веб-интерфейсов
- Проверять соответствие цветовых сочетаний критериям доступности WCAG и APCA перед публикацией
- Адаптировать фирменные цвета для разных контекстов: тёмная тема, состояния hover и неактивных элементов
- Генерировать шкалы оттенков в стиле Tailwind для экспорта как CSS-переменных или дизайн-токенов
- Конвертировать цвета между HEX, RGB, HSL и OKLCH при работе с разными инструментами дизайна и разработки
Как Использовать Редактор Цветов
Введите базовый цвет
Введите любое значение HEX, RGB, HSL или название цвета в поле Базовый цвет. Инструмент автоматически загружает цвет и конвертирует его во все доступные форматы
Настройте ползунками
Используйте регуляторы Оттенка, Насыщенности и Яркости для изменения цвета в реальном времени. Все выходные значения и шкала оттенков обновляются мгновенно
Проверьте контрастность
Раздел доступности показывает соотношение контрастности с белым и чёрным текстом по моделям WCAG 2.1 и APCA с указанием, соответствует ли комбинация критериям
Скопируйте значения
Нажмите на любой блок формата (RGB, HSL, HSV, OKLCH), чтобы скопировать значение напрямую. Значение HEX отображается в главном превью
Экспортируйте шкалу оттенков
В разделе Tints & Shades выберите формат экспорта (CSS, SCSS, JSON, Tailwind) и формат цвета (HEX, RGB, HSL или OKLCH). Нажмите Копировать, чтобы использовать в своём проекте
Часто задаваемые вопросы
WCAG 2.1 использует простую математическую формулу для расчёта контрастности между цветами. APCA (Accessible Perceptual Contrast Algorithm) — более современная модель, учитывающая особенности восприятия яркости человеческим глазом в различных контекстах чтения. Для обычного текста значение APCA 60 и выше считается достаточным.
Выберите формат экспорта Tailwind и нужный формат цвета. Сгенерированный код можно вставить непосредственно в tailwind.config.js или в CSS-файл как пользовательские свойства. При использовании OKLCH он нативно совместим с Tailwind 4.
OKLCH — это перцептуально равномерное цветовое пространство: изменение яркости или насыщенности даёт визуально предсказуемые результаты. Это формат, применяемый внутри Tailwind 4 и CSS Color Level 4, что делает его идеальным для создания более равномерных шкал оттенков по сравнению с HSL.