RGB конвертер онлайн

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

Конвертер RGB онлайн

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

Результат по каждому формату – готовая строка для копирования. Для CSS сразу показывается синтаксис rgb(), hsl() и #hex.

Расчёты выполняются по стандартным математическим формулам. Небольшое расхождение в CMYK возможно из-за разницы в цветовых профилях – для точной полиграфии используйте ICC-профили в профессиональных программах.

Что означают числа в RGB

RGB расшифровывается как Red, Green, Blue – красный, зелёный, синий. Это аддитивная модель: цвет получается смешением световых лучей трёх основных цветов.

Каждый канал принимает значение от 0 до 255 (8 бит). Ноль означает полное отсутствие этого цвета, 255 – максимальную интенсивность. Комбинаций – ровно 16 777 216.

Когда все три канала одинаковы, цвет всегда будет нейтральным серым. Разница между каналами создаёт оттенок.

Как работает перевод RGB в HEX

HEX – тот же RGB, просто записанный в шестнадцатеричной системе счисления. Каждый из трёх каналов превращается в двузначное шестнадцатеричное число.

Алгоритм:

1. Возьмите значение канала (0–255).
2. Разделите на 16 – получите первую цифру HEX.
3. Остаток от деления – вторая цифра.
4. Запишите три пары рядом с символом #.

Пример: rgb(255, 87, 51)

• 255 ÷ 16 = 15 остаток 15 → FF
• 87 ÷ 16 = 5 остаток 7 → 57
• 51 ÷ 16 = 3 остаток 3 → 33

Результат: #FF5733

Если оба HEX-знака канала одинаковы (например, #AABBCC), запись сокращается до трёх символов: #ABC. Это только косметическое сокращение – цвет тот же.

Перевод RGB в HSL: тон, насыщенность, яркость

HSL (Hue, Saturation, Lightness) удобен, когда нужно настраивать цвет интуитивно – изменять тон, не трогая яркость.

Формула:

1. Нормализуйте каналы: r = R/255, g = G/255, b = B/255.
2. Найдите max и min из трёх значений.
3. Яркость (L): (max + min) / 2
4. Насыщенность (S): если max = min, то S = 0; иначе (max − min) / (1 − |2L − 1|)
5. Тон (H): зависит от того, какой канал является максимальным:
   • max = r: H = (g − b) / (max − min) × 60
   • max = g: H = (2 + (b − r) / (max − min)) × 60
   • max = b: H = (4 + (r − g) / (max − min)) × 60

Если H получился отрицательным, прибавьте 360.

Пример: rgb(255, 87, 51) → hsl(14°, 100%, 60%)

В CSS это пишется как hsl(14, 100%, 60%). Изменив 14 на 200, получите тот же цвет, но в голубых тонах – насыщенность и яркость сохранятся.

Перевод RGB в CMYK для печати

CMYK (Cyan, Magenta, Yellow, Key/Black) – субтрактивная модель. Используется в полиграфии, где цвет получается вычитанием красок из белой бумаги.

Формула:

1. Нормализуйте: r = R/255, g = G/255, b = B/255.
2. K = 1 − max(r, g, b)
3. C = (1 − r − K) / (1 − K)
4. M = (1 − g − K) / (1 − K)
5. Y = (1 − b − K) / (1 − K)

Умножьте C, M, Y, K на 100 для процентной записи.

Пример: rgb(255, 87, 51) → cmyk(0%, 66%, 80%, 0%)

Важная оговорка: математический перевод RGB → CMYK не учитывает характеристики конкретной бумаги и красок. Для точного цвета в типографии всегда согласовывайте файл с цветовым профилем ICC (обычно ISO Coated v2 или Fogra39).

HSV против HSL: в чём разница

Оба формата описывают цвет через тон (Hue), но по-разному задают яркость.

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

Для CSS используйте HSL. Для работы в Adobe – HSB/HSV.

Практические сценарии конвертации

Из Figma в код. Figma по умолчанию показывает HEX. Если нужен HSL для CSS-переменных с темами – вставьте HEX в конвертер, скопируйте HSL.

Из Photoshop в веб. Photoshop работает в HSB и CMYK. Для публикации в интернете переведите финальный цвет в RGB или HEX через конвертер – LAB и CMYK браузеры не поддерживают.

Подбор вариаций цвета. Переведите цвет в HSL и изменяйте только тон (H) с шагом 30° – получите гармоничную палитру с одинаковой насыщенностью и яркостью.

Адаптация для слабовидящих. Переведите цвет в HSL и проверьте L (яркость). Разница по яркости между фоном и текстом должна быть не менее 50–60 процентных пунктов для достаточного контраста.

Для единичных задач быстрее всего – конвертер выше. Для потока задач в разработке удобно подключить библиотеку: chroma (Go), tinycolor2 (JavaScript), colorsys (Python) – все работают по тем же формулам и дают идентичные результаты.