Цвет и пиксели

Определитель цвета по коду

Вставьте HEX, RGB или HSL, чтобы увидеть точный цвет и конвертировать форматы.

Значение цвета

Примеры

HEX#e63946
RGBrgb(230, 57, 70)
HSLhsl(355, 78%, 56%)

Что такое Определитель цвета по коду?

Paste a HEX, RGB or HSL value to preview the exact color and convert between formats. Вставьте HEX, RGB или HSL — и сразу увидите точный цвет, без каких-либо изображений. Проверьте цвет, скопированный из CSS или брендбука, прежде чем публиковать макет. Живой образец с синхронными значениями HEX, RGB и HSL, каждое копируется в один клик.

Вся обработка выполняется локально в вашем браузере. Ваши изображения никогда не загружаются на сервер.

Ключевые возможности

Автоопределение синтаксиса HEX, RGB(A) и HSL(A) при вводе
Одновременная конвертация между тремя форматами
Альфа-канал и HEX на 3/4/6/8 символов

Как использовать этот инструмент

«Определитель цвета по коду» превращает текстовое значение цвета в цвет, который вы реально видите. Вставьте любой код HEX, RGB или HSL — из CSS, дизайн-спецификации, брендбука или чата — и инструмент мгновенно отобразит точный цвет вместе с эквивалентами в двух других форматах.

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

Введите или вставьте код цвета в поле. Парсер распознаёт формат автоматически: HEX с # или без (3/4/6/8 символов), rgb()/rgba() с разделителями запятой, пробелом или косой чертой и hsl()/hsla() с единицами deg/rad/turn. Результат обновляется при каждом нажатии клавиши — без всяких кнопок.

Предпросмотр показывает большой образец найденного цвета и список значений HEX, RGB и HSL. У каждой строки своя кнопка копирования, а «Копировать всё» помещает в буфер обмена сразу три значения.

Автоопределение формата при вводе
Конвертация HEX, RGB и HSL в одном виде
Альфа-канал с выводом в процентах
Копирование в один клик по одному или всех значений сразу

Практическое применение

В дизайн-передаче часто смешиваются нотации: брендбук даёт HEX, разработчик пишет rgb() в CSS, а motion-инструмент экспортирует HSL. Вставьте каждое значение сюда и убедитесь, что все они дают один и тот же цвет, пока расхождение не дошло до продакшена.

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

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

Какие форматы поддерживаются?

HEX с # или без (3/4/6/8 символов), rgb()/rgba() с запятыми, пробелами или косой чертой, hsl()/hsla() с единицами deg/rad/turn.

Точен ли предпросмотр?

Да: стандартная sRGB-математика, отрисовывает браузер, без лишних округлений.

Между какими форматами?

HEX, RGB, HSL или HSV. Мгновенная конвертация.

Проверка доступности?

Да, показывает коэффициент контраста с индикаторами WCAG AA/AAA.

Несколько цветов?

Сейчас по одному за раз.

Инструмент бесплатный?

Да, полностью бесплатно, без регистрации, водяных знаков и лимитов. Вся обработка локально.

Нужно ли выбирать формат ввода?

Нет. Парсер автоматически определяет синтаксис HEX, RGB(A) и HSL(A) и конвертирует между тремя форматами сразу.

Поддерживаются ли 8-символьные HEX?

Да. Последние два символа трактуются как альфа (непрозрачность) и видны в конвертированных значениях и в процентах.

Что такое Определитель цвета по коду?

Ключевые возможности

Популярные сценарии

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

Практическое применение

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

Похожие инструменты для изображений

Пипетка

Инверсия

Оттенки серого

Цвет фона

Пиксели / мозаика