Конвертер цветов онлайн — RGB, HEX, CMYK, HSL и RAL
Введите цвет в любом формате — RGB, HEX, CMYK, HSL, HSB, LAB или OKLCH — остальные поля пересчитаются сразу. Инструмент подберёт ближайший RAL Classic, покажет, насколько заметна разница, и проверит контраст текста по WCAG. Цвет можно взять пипеткой прямо с экрана.
Каждое поле можно редактировать: введите RGB и получите HEX, или наоборот. CMYK посчитан без профиля печати.
Введённый цвет шире охвата sRGB и приведён к ближайшему цвету, который показывает экран.
Тёмные и светлые варианты с тем же тоном. Щелчок по оттенку делает его текущим цветом.
Контраст посчитан для непрозрачного цвета: прозрачность зависит от того, что под ним.
Важно: CMYK и RAL — приближение: цвет на экране зависит от монитора, а для печати нужен профиль типографии. Перед заказом краски сверяйтесь с физическим каталогом.
Как перевести RGB в HEX и обратно
HEX, RGB, HSL и HSB описывают один и тот же цвет экрана разными способами. Перевод между ними точный: это пересчёт чисел без потерь.
Каждый канал — две цифры в шестнадцатеричной системе
Красный, зелёный и синий принимают значения от 0 до 255. Каждое число переводится в две шестнадцатеричные цифры: 43 = 2 × 16 + 11, то есть 2B. Поэтому rgb(43, 108, 176) записывается как #2B6CB0. Короткая запись из трёх знаков удваивает каждую цифру: #ABC — это #AABBCC.
Обратный перевод и ввод в любом виде
Пары цифр HEX переводятся обратно в числа 0–255. В конвертере не нужно выбирать направление: введите HEX в поле HEX или просто три числа в поле RGB, и остальные форматы обновятся. В общее поле сверху можно вставить цвет как угодно: 29 130 196, rgb(29 130 196), hsl(), cmyk(), код RAL или название CSS вроде steelblue.
Прозрачность в CSS, HEX и Android
Четвёртое число — непрозрачность от 0 до 1: rgba(43, 108, 176, 0.5) — цвет наполовину прозрачен. В HEX её пишут двумя цифрами в конце: #2B6CB080, где 80 = 128 из 255, это 50%. В Android-формате ARGB прозрачность, наоборот, стоит первой: 0x802B6CB0.
Тон, насыщенность и светлота
Обе модели задают цвет тоном на круге от 0° до 360° и насыщенностью, но третий параметр считают по-разному. В HSL чистый цвет получается при светлоте 50%, а 100% — всегда белый. В HSB (он же HSV) чистый цвет — это яркость 100% при полной насыщенности, а белый — яркость 100% при нулевой насыщенности. HSL используют в CSS, HSB — в палитрах Photoshop и Figma.
RGB в CMYK, RAL в RGB и HEX: что можно перевести точно, а что нет
Экранный цвет состоит из света, печатный и лакокрасочный — из пигментов. Поэтому точность перевода зависит от системы.
Формула даёт ориентир, точные значения — профиль печати
Конвертер считает CMYK по стандартной формуле без цветового профиля, как это делают браузеры. Для макета этого хватает, чтобы понять пропорции красок. Точные значения для конкретной бумаги и машины даёт ICC-профиль типографии, например Coated FOGRA39 для офсета. Поэтому Photoshop с профилем покажет другие цифры, и это нормально.
Ближайший цвет каталога RAL Classic
RAL — каталог красок для металла, фасадов, профнастила и порошковой покраски. Инструмент сравнивает ваш цвет со 194 основными цветами RAL Classic по формуле CIEDE2000 и показывает разницу ΔE. До 2 разница почти незаметна, выше 5 это уже другой оттенок. Перламутровые и светящиеся тона экран не передаёт, поэтому они не участвуют в подборе.
Цифровые значения RAL приблизительные. Перед заказом краски сверьте цвет с физическим веером RAL.
Закрытые системы — только через официальные справочники
Pantone и NCS — лицензируемые системы, их точные цифровые библиотеки распространяются по подписке. Поэтому перевод HEX или CMYK в Pantone и NCS мы не делаем: приблизительная таблица из интернета может ошибиться на заметный оттенок. Для этих систем используйте официальные сервисы Pantone Connect и NCS Navigator или физический каталог.
Форматы, близкие к восприятию глаза
LAB не привязан к устройству: одинаковое расстояние между цветами в нём примерно равно одинаковой видимой разнице. На нём построен подбор RAL. OKLCH — современный формат CSS: при одинаковой светлоте цвета выглядят одинаково яркими, поэтому в нём удобно строить палитры. Функции lab() и oklch() поддерживают Chrome и Edge с версии 111, Firefox с 113 и Safari с 15.
Как конвертировать цвет онлайн
Порядок одинаковый для любого формата.
Задайте цвет
Вставьте значение в общее поле или в поле нужного формата, выберите цвет на палитре или возьмите пипеткой с экрана.
Получите все форматы
HEX, RGB, HSL, HSB, CMYK, LAB, OKLCH и Android ARGB пересчитываются сразу. Рядом видно ближайший цвет RAL и разницу с ним.
Скопируйте нужное значение
Кнопка справа от поля копирует значение. Во вкладках ниже есть оттенки, цветовые гармонии, проверка контраста и готовый код для CSS, Swift, Android и Flutter.
Частые вопросы о конвертации цветов
О форматах, печати, RAL и контрасте.
Введите три числа в поле RGB, например 43 108 176, и заберите результат из поля HEX: #2B6CB0. Вручную каждый канал от 0 до 255 переводится в две шестнадцатеричные цифры, и цифры записываются подряд после знака #.
Photoshop переводит цвет через ICC-профиль печати, который учитывает бумагу, краски и растискивание. Конвертер использует стандартную формулу без профиля. Для макета в типографию берите значения, полученные с профилем, который назовёт типография.
Введите цвет в любом формате. Под палитрой появится ближайший цвет RAL Classic с названием и разницей ΔE: до 2 оттенки почти не отличить. Обратный перевод тоже работает: введите в общее поле, например, RAL 7016, и получите HEX и RGB. Перед покраской сверьте цвет с физическим веером RAL.
В этом инструменте нет. Точные цифровые библиотеки Pantone и NCS лицензируются, а приблизительные таблицы из интернета могут ошибаться на заметный оттенок. Надёжный путь — официальные сервисы Pantone Connect и NCS Navigator или физический каталог.
Тоном и насыщенностью они похожи, но третий параметр разный. В HSL светлота 50% даёт чистый цвет, а 100% — белый. В HSB яркость 100% при полной насыщенности даёт чистый цвет, а при нулевой — белый. HSL пишут в CSS, HSB показывают палитры графических редакторов.
Это уровни стандарта доступности WCAG. Для обычного текста AA требует контраст не ниже 4.5:1, AAA — не ниже 7:1. Для крупного текста, от 18 pt или 14 pt жирным, достаточно 3:1 для AA и 4.5:1 для AAA.
Нет. Все расчёты, включая подбор RAL, выполняются в вашем браузере. Инструмент не загружает внешних библиотек и работает даже при открытии страницы из папки на компьютере.