PixelTool

Конвертер цветов

Переводите цвет между HEX, RGB, HSL, CMYK и LAB: вставьте значение в любом формате — остальные посчитаются автоматически.

Что такое цветовые форматы

Один и тот же цвет можно записать по-разному: HEX для CSS, RGB по каналам экрана, HSL для удобной подстройки, CMYK для печати. Конвертер переводит значение из любого формата во все остальные. Вставьте цвет, и результат пересчитается сразу.

Один цвет в разных форматах

Один и тот же цвет в HEX, RGB и HSL.

ЦветHEXRGBHSL
#2563ebrgb(37, 99, 235)hsl(221, 83%, 53%)
#ec4899rgb(236, 72, 153)hsl(330, 81%, 60%)
#22c55ergb(34, 197, 94)hsl(142, 71%, 45%)

Форматы цвета: когда какой

ФорматКогда использовать
HEXЗапись #rrggbb, основной формат для web и CSS. Компактный, удобно копировать.
RGB / RGBAКаналы красного, зелёного, синего (0–255). A задаёт прозрачность (0–1). Модель экранов.
HSL / HSLAТон, насыщенность, светлота. Удобно менять яркость и оттенок, не пересчитывая каналы.
CMYKГолубой, пурпурный, жёлтый, чёрный. Модель для печати, а не для экрана.
LABПерцептивная модель, расстояния в ней соответствуют видимой разнице. Для точного подбора и контраста.

Как пользоваться конвертером

  1. Вставьте цвет в любом формате: HEX, RGB, HSL и других.
  2. Остальные форматы пересчитаются автоматически.
  3. Скопируйте нужное значение одной кнопкой.

Что дальше

Подобранный цвет пригодится в генераторе градиентов, а проверить читаемость текста на фоне поможет проверка контраста цветов.

Похожие инструменты

Другие полезные инструменты из той же категории

SVG
SVG URL кодировщик

Кодируйте SVG для использования в CSS свойстве background-image

Попробовать
Cubic-bezier: кривая плавности для CSS

Потяните за контрольные точки и получите свою cubic-bezier() для transition-timing-function или animation-timing-function.

Попробовать
CSS clamp(): адаптивный шрифт без медиазапросов

Задайте минимальный и максимальный размер — калькулятор соберёт clamp(), и шрифт будет плавно тянуться за шириной экрана.

Попробовать
CSS Flexbox генератор

Визуальный генератор CSS Flexbox: расположите и выровняйте элементы, скопируйте готовый код CSS или Tailwind.

Попробовать
CSS Grid генератор

Визуальный генератор CSS Grid: постройте адаптивную сетку без кода и скопируйте результат в CSS или Tailwind.

Попробовать
Специфичность CSS: калькулятор веса селектора

Вставьте селектор и узнайте его вес — станет понятно, какое правило победит в каскаде и почему стиль не применяется.

Попробовать
Сжать CSS: минификация онлайн

Вставьте стили и получите сжатый CSS: комментарии и пробелы уйдут, размер файла упадёт на 20–40%.

Попробовать
Конвертер px, rem и em

Переведите rem в px или px в rem: введите значение, задайте базовый размер шрифта — результат посчитается сразу.

Попробовать
Тень в CSS: box-shadow и text-shadow

Настройте тень блока или текста ползунками и заберите готовый CSS: смещение, размытие, растяжение, внутренняя тень.

Попробовать

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

Конвертер поддерживает HEX, RGB, RGBA, HSL, HSLA, CMYK, LAB и XYZ форматы с бесшовным преобразованием между ними.

Преобразования используют отраслевые стандартные алгоритмы. Некоторые форматы, такие как CMYK, могут немного отличаться в зависимости от цветовых профилей.

Да! Форматы RGBA и HSLA поддерживают альфа-прозрачность. Конвертер сохраняет значения прозрачности при преобразовании.

HSL (Hue, Saturation, Lightness) интуитивнее для регулировки цветов - легко создать светлее/темнее варианты, изменяя только Lightness. RGB лучше для точного математического управления.

LAB разработан для восприятия человеком - расстояния в LAB соответствуют визуальным различиям. Идеален для алгоритмов подбора цветов, градиентов и доступности (контраст WCAG).

Вставьте HEX-код (например #2563eb) в конвертер — он сразу покажет RGB-значение rgb(37, 99, 235). Вручную: каждая пара символов HEX — это канал в шестнадцатеричном виде, 25 → 37, 63 → 99, eb → 235.

Введите значение RGB (например rgb(37, 99, 235)) — конвертер выдаст HEX #2563eb. Каждый канал переводится в двузначное шестнадцатеричное число и склеивается после символа #.