HTML палитра цветов онлайн
Визуальный выбор цвета, мгновенная конвертация между HEX, RGB и HSL, проверка читаемости текста (WCAG) и готовая палитра.
Интерактивная палитра цветов и конвертер между форматами HEX, RGB и HSL с автоматическим расчётом относительной яркости по стандартам доступности WCAG. Инструмент мгновенно определяет оптимальный цвет текста (тёмный или светлый) для любого выбранного фона, поддерживает системную пипетку и готовые дизайн-чипы.
Популярная палитра для быстрого выбора:
Как пользоваться
Выбор оттенка
Кликните по спектральному полю, используйте системную пипетку экрана либо вставьте код цвета в любое поле.
Двусторонняя синхронизация
Инструмент мгновенно пересчитает введённое значение во все остальные форматы: HEX, RGB и HSL.
Проверка контрастности по WCAG
Обратите внимание на динамический бейдж, подсказывающий оптимальный цвет текста (светлый или тёмный) для этого фона.
Копирование значения
Нажмите кнопку копирования рядом с нужным форматом для быстрой вставки в стили CSS или графический редактор.
Формулы, правила и стандарты
HEX в RGB: R = parseInt(hex[0..1], 16), G = parseInt(hex[2..3], 16), B = parseInt(hex[4..5], 16).
RGB в HSL: нормализация r, g, b в [0, 1]. Светлота L = (max + min) / 2. Насыщенность S = d / (1 - |2L - 1|). Тон H вычисляется из сегментов круга 360°.
Относительная яркость WCAG: Y = 0.2126 * R_lin + 0.7152 * G_lin + 0.0722 * B_lin. При Y > 0.45 фон считается светлым и требует тёмного текста.
Практические примеры
Пример 1: Анализ фирменного бирюзового цвета Utilora Teal
Конвертация светлого акцентного оттенка с проверкой читаемости:
Результаты конвертации:
• HEX: #2dd4bf
• RGB: rgb(45, 212, 191)
• HSL: hsl(172, 66%, 50%)
• Относительная яркость: Y = 0.54 (> 0.45)
• Контрастный текст: Тёмный текст (#000000) — комфортное чтение.
Пример 2: Анализ глубокого тёмно-синего оттенка фона Slate
Конвертация контрастного фона для ночной темы интерфейса:
Результаты конвертации:
• HEX: #0f172a
• RGB: rgb(15, 23, 42)
• HSL: hsl(222, 47%, 11%)
• Относительная яркость: Y = 0.01 (< 0.45)
• Контрастный текст: Светлый текст (#ffffff) — максимальная разборчивость.
Частые ошибки и нюансы
Трёхзначная сокращённая запись HEX
Запись #fff дублирует каждый символ попарно (#ffffff), тогда как несимметричные цвета вроде #2d4 не могут быть сокращены без искажения исходного цветового оттенка.
Удобство HSL для дизайнеров
Модель HSL гораздо удобнее RGB для создания дизайн-систем: изменяя только параметр Lightness (светлота), можно моментально получить hover- и active-состояния кнопки.
Стандарты контрастности WCAG 2.1
Для соответствия уровню доступности WCAG AA контрастное соотношение между обычным текстом и фоном должно составлять не менее 4.5:1, а для крупного текста — не менее 3:1.
Цветовой охват sRGB
Форматы HEX и стандартный RGB ограничены цветовым охватом sRGB. Сверхнасыщенные оттенки Display P3 современных экранов требуют расширенных директив color(display-p3...).
Частые вопросы (FAQ)
HEX кодирует интенсивность красного, зелёного и синего каналов в шестнадцатеричной системе от 00 до FF. RGB делает то же самое в десятичных числах от 0 до 255. Модель HSL описывает цвет с точки зрения восприятия человеком: цветовой тон (Hue в градусах от 0 до 360), насыщенность (Saturation в процентах) и светлота (Lightness в процентах).
Алгоритм рассчитывает относительную яркость (Relative Luminance) по международному стандарту доступности веб-контента WCAG 2.1. Значения RGB предварительно линеаризуются с учётом гамма-коррекции. Если интегральная яркость превышает порог 0.45, рекомендуется тёмный текст, иначе — белый.
Трёхзначная запись — это сокращённая форма для цветов, у которых в каждом из трёх каналов цифры дублируются. Например, запись #fff браузер декодирует как #ffffff, а #f80 — как #ff8800. Если цифры в парах различаются (как в #2dd4bf), сократить код без изменения оттенка невозможно.
HSL позволяет математически предсказуемо управлять палитрами в CSS через переменные var(). Например, зафиксировав тон H и насыщенность S, разработчик может легко создавать состояния наведения (hover), затемнения (active) и границы, просто меняя процент светлоты L.
При клике на поле выбора цвета браузер активирует нативный интерфейс EyeDropper API операционной системы. С его помощью можно навести курсор на любую точку рабочего стола или другого приложения и считать точный шестнадцатеричный код пикселя.
Инструмент оптимизирован для работы с непрозрачными цветами палитры веб-дизайна. При необходимости задания прозрачности в CSS полученные значения RGB и HSL легко дополняются альфа-каналом: rgb(45 212 191 / 80%) или rgba(45, 212, 191, 0.8).
Похожие инструменты
CSS / JS Минификатор
Удаление пробелов, переносов и комментариев из файлов стилей CSS и скриптов JavaScript с наглядной оценкой экономии.
Открыть ▸Сжатие картинок
Быстрое уменьшение веса фотографий JPEG, PNG и WebP с интерактивным сплит-сравнением качества «до и после».
Открыть ▸Base64 Кодер / Декодер
Кодирование текста и файлов в Base64 и обратное декодирование с корректной поддержкой UTF-8 кириллицы.
Открыть ▸PNG в WebP Конвертер
Конвертация тяжелых PNG-картинок в современный легковесный формат WebP с прозрачностью.
Открыть ▸Руководства по теме
HEX, RGB и HSL: форматы цвета для CSS и дизайна
Браузеры поддерживают несколько нотаций для задания цветов в CSS. Выбор формата влияет не только на читаемость кода, но и на удобство программной генерации цветовых схем, реализации тёмной темы и анимаций. В руководстве разбираем математику каждого формата и рекомендации по применению.
Читать руководствоМинификация CSS и JavaScript: как работает и зачем нужна
Минификация — процесс удаления из исходного кода всех символов, не влияющих на его выполнение: пробелов, переносов строк, отступов и комментариев. Для JavaScript минификаторы также переименовывают локальные переменные в однобуквенные идентификаторы. В результате размер файлов уменьшается на 20–60%, что напрямую ускоряет загрузку страницы.
Читать руководствоКак сжать изображение без потери качества: форматы, параметры и реальные тесты
Тяжёлая графика отвечает более чем за 60% общего веса веб-страницы. В этом руководстве разбираем практическую механику компрессии: почему показатель качества 80–82% является точкой перегиба на графике SSIM, как избежать размытия красного цвета из-за субдискретизации и ускорить Largest Contentful Paint (LCP) до целевых показателей Google Core Web Vitals.
Читать руководство