Конвертировать цвета между HEX, RGB, HSL, CMYK и HSV

Зачем конвертировать цвета между форматами

Представьте: вы создаёте дизайн-макет в Figma, где работали с насыщенным синим цветом. При вёрстке сайта этот цвет нужно указать в CSS. Перенести значение вручную? Можно, но зачем, если есть быстрые способы конвертировать цвета между HEX, RGB, HSL и другими форматами.

Цветовые форматы – это языки, на которых говорят разные инструменты и устройства. Браузеры читают HEX и RGB, принтеры понимают CMYK, а графические редакторы удобнее настраивать через HSL или HSV. Умение быстро переводить значения между этими системами экономит время и исключает ошибки вроде «поехавших» цветов на сайте.

Калькулятор ниже позволяет мгновенно конвертировать цвета между всеми популярными форматами.

Основные цветовые форматы: что нужно знать

RGB – красный, зелёный, синий

Формат RGB описывает цвет через интенсивность трёх базовых каналов: красного (Red), зелёного (Green) и синего (Blue). Каждый канал принимает значение от 0 до 255.

Пример: rgb(255, 127, 0) – это оранжевый цвет (максимум красного, половина зелёного, ноль синего).

Формат используется в веб-дизайне, мониторах, экранах телефонов и телевизоров. Именно эти три цвета в разных комбинациях формируют изображение на экране.

HEX – шестнадцатеричный код цвета

HEX – это компактная запись RGB в шестнадцатеричной системе. Значение каждого канала кодируется двумя символами от 00 до FF.

Пример: оранжевому rgb(255, 127, 0) соответствует #FF7F00.

Формат популярен в веб-разработке. Короче, чем RGB, и удобно читается: первые две цифры – красный, следующие – зелёный, последние – синий.

HSL – оттенок, насыщенность, светлота

HSL расшифровывается как Hue (оттенок), Saturation (насыщенность), Lightness (светлота). Этот формат ближе к тому, как люди воспринимают цвета.

• Hue – угол на цветовом круге от 0° до 360°. 0° – красный, 120° – зелёный, 240° – синий.
• Saturation – насыщенность от 0% (серый) до 100% (чистый цвет).
• Lightness – светлота от 0% (чёрный) до 100% (белый).

Пример: hsl(25, 100%, 50%) – яркий оранжевый.

HSL удобен, когда нужно плавно изменить оттенок или создать палитру related colors.

HSV/HSB – альтернативная модель

HSV (Hue, Saturation, Value) или HSB (Hue, Saturation, Brightness) похож на HSL, но вместо светлоты использует значение яркости. Это делает формат популярным в графических редакторах типа Photoshop.

В HSV белый цвет – это hsv(0, 0%, 100%), а не hsv(0, 0%, 50%) как в HSL.

CMYK – голубой, пурпурный, жёлтый, чёрный

CMYK используется в полиграфии. Четыре канала: Cyan (голубой), Magenta (пурпурный), Yellow (жёлтый), Key/Black (чёрный). Значения выражаются в процентах от 0% до 100%.

Пример: cmyk(0%, 50%, 100%, 0%) – чистый жёлтый.

Этот формат принципиально отличается от экранных моделей: CMYK описывает, сколько краски нужно нанести на бумагу, а не как смешивать свет.

Как конвертировать цвета: формулы и алгоритмы

HEX в RGB

Разбейте шестизначный HEX на три пары и переведите каждую из шестнадцатеричной системы в десятичную.

Формула: для символа X: (digit1 × 16) + digit2, где digit1 и digit2 – значения символов (0-9 = 0-9, A-F = 10-15).

Пример: #A3F2C4

• A3 = (10 × 16) + 3 = 163
• F2 = (15 × 16) + 2 = 242
• C4 = (12 × 16) + 4 = 196

Результат: rgb(163, 242, 196).

RGB в HEX

Каждый канал переведите из десятичной системы в шестнадцатеричную.

Формула: разделите число на 16, получите первую цифру и остаток. Остаток снова разделите на 16.

Пример: rgb(58, 174, 239)

• 58 / 16 = 3 остаток 10 → 3A
• 174 / 16 = 10 остаток 14 → AE
• 239 / 16 = 14 остаток 15 → EF

Результат: #3AEEF.

RGB в HSL

1. Нормализуйте RGB-значения: R’ = R/255, G’ = G/255, B’ = B/255.
2. Найдите максимум и минимум из R’, G’, B'.
3. Вычислите Lightness: L = (max + min) / 2.
4. Вычислите Saturation: S = (max − min) / (1 − |2L − 1|), или 0 если max = min.
5. Вычислите Hue: если max = R’, H = 60° × ((G’ − B’) / (max − min) mod 6); если max = G’, добавить 120°; если max = B’, добавить 240°.

Пример: rgb(255, 127, 0)

• R’=1, G’=0.5, B’=0
• max=1, min=0
• L = 0.5
• S = (1 − 0) / (1 − 0) = 1 = 100%
• H = 60° × ((0.5 − 0) / 1 mod 6) = 30°

Результат: hsl(30, 100%, 50%).

HSL в RGB

1. Если S = 0, то R = G = B = L (серый).
2. Иначе вычислите временные значения:
   • C = (1 − |2L − 1|) × S
   • X = C × (1 − |(H / 60°) mod 2 − 1|)
   • m = L − C/2
3. По секторам Hue определите базовые значения (R, G, B):
   • 0°-60°: (C, X, 0)
   • 60°-120°: (X, C, 0)
   • 120°-180°: (0, C, X)
   • 180°-240°: (0, X, C)
   • 240°-300°: (X, 0, C)
   • 300°-360°: (C, 0, X)
4. Добавьте m к каждому каналу и умножьте на 255.

RGB в CMYK

Конвертация требует перехода через промежуточную модель, потому что RGB и CMYK описывают разные цветовые гаммы.

1. Нормализуйте RGB: R’ = R/255, G’ = G/255, B’ = B/255.
2. K = 1 − max(R’, G’, B’).
3. C = (1 − R’ − K) / (1 − K), или 0 если K = 1.
4. M = (1 − G’ − K) / (1 − K), или 0 если K = 1.
5. Y = (1 − B’ − K) / (1 − K), или 0 если K = 1.
6. Переведите в проценты: C% = C × 100, M% = M × 100, Y% = Y × 100, K% = K × 100.

Пример: rgb(0, 255, 255)

• R’=0, G’=1, B’=1
• K = 1 − 1 = 0
• C = (1 − 0 − 0) / (1 − 0) = 1 = 100%
• M = (1 − 1 − 0) / (1 − 0) = 0 = 0%
• Y = (1 − 1 − 0) / (1 − 0) = 0 = 0%

Результат: cmyk(100%, 0%, 0%, 0%) – чистый голубой.

HSL в HSV

Формулы перехода между этими моделями учитывают разницу в определении третьего параметра:

• SV (Saturation в HSV) = S × (1 − |2L − 1|) / max(2L, 2 − 2L)
• V = L + S × (1 − |2L − 1|) / 2

Обратный переход:

• L = V − (V × SV) / 2
• S = 2 × (V − L) / V

Таблица соответствия популярных цветов

Практические советы по работе с цветовыми форматами

Когда использовать каждый формат

HEX – лучший выбор для CSS, когда цвет статичный и не требует динамических изменений. Код короче, браузеры обрабатывают быстро.

RGB/RGBA – используйте, когда нужна прозрачность (альфа-канал) или предстоят CSS-анимации с плавным изменением цвета. Формат rgba(255, 0, 0, 0.5) проще анимировать, чем hex с прозрачностью.

HSL – идеален для создания цветовых палитр и тем. Задав базовый оттенок, можно легко получить variations: более светлые, тёмные, насыщенные варианты. Тёмная тема? Уменьшите Lightness. Насыщенная версия? Увеличьте Saturation.

CMYK – только для печатных материалов. Всегда проверяйте результат через цветопробу, так как экранное изображение будет отличаться от напечатанного.

Типичные ошибки при конвертации

Ошибка 1: слепое преобразование RGB в CMYK. Цвета, выходящие за гамму CMYK (яркие неоновые, насыщенные зелёные), потеряют насыщенность. Готовьте отдельные версии макетов для экрана и печати.

Ошибка 2: неправильный порядок каналов в HEX. HEX – это всегда RRGGBB. Перепутав местами, вы получите совершенно другой цвет. #FF5733 и #3357FF – это разные цвета.

Ошибка 3: игнорирование цветового профиля. Мониторы откалиброваны по-разному. Один и тот же HEX может выглядеть по-разному на разных экранах. Для точной работы используйте ICC-профили.

Автоматизация в рабочем процессе

Современные инструменты упрощают конвертацию. В VS Code расширение Color Highlight подсвечивает HEX-коды прямо в коде. Figma автоматически показывает цвет во всех форматах в панели свойств. Конвертер калькулятора в начале статьи позволяет быстро получить нужное значение без переключения между приложениями.

Для автоматизации в продакшене используйте CSS-функции: color-mix(), hsl() и современные color spaces (oklch, oklab), которые дают более предсказуемые результаты, чем классические модели.

Заключение

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

Используйте калькулятор выше для быстрых преобразований, а формулы из статьи – когда нужно понять логику или автоматизировать процесс в коде.

Информация в статье актуальна на 2026 год. Для точной работы с цветами в профессиональных проектах рекомендуется использовать калиброванные мониторы и ICC-профили.