Как преобразовать цвет HEX в RGB и HSL?

Введите или вставьте цвет в «Ввод цвета», например #14b8a6, или воспользуйтесь палитрой. Инструмент показывает значения HEX, rgb(), hsl(), hsv() и cmyk(), а также oklch(), lab() и lch(), у каждого есть кнопка «Копировать».

Какие цветовые форматы можно вводить?

HEX с 3, 4, 6 или 8 цифрами, rgb() или rgba(), hsl() или hsla() с запятыми или пробелами, а также просто тройки чисел. Если ввод не распознан, инструмент показывает ошибку разбора.

Можно ли конвертировать цвета с прозрачностью?

Да. Используйте регулятор «Непрозрачность» или введите значение альфа в поле ввода. Тогда в результатах появляется альфа-канал, например 8-значный HEX, rgba() или альфа после косой черты в современном синтаксисе.

Точны ли значения CMYK для печати?

Нет, это стандартное приближение sRGB к CMYK, показанное в разделе «Для печати». Для точных цветов печати используйте цветовой профиль принтера или закажите пробный оттиск, так как яркие цвета экрана часто печатаются тусклее.

Как проверить, достаточно ли контраста у моего цвета для текста?

Смотрите раздел «Контраст WCAG». Он показывает коэффициент контрастности вашего цвета на белом и на чёрном с оценкой AAA, AA, AA Large или Fail. «Шкала светлоты» предлагает более светлые или тёмные оттенки для проверки.

Это правда бесплатно?

Да. Все инструменты бесплатны, без учётной записи и банковской карты. Работа выполняется на вашем устройстве, а не на наших серверах, что и позволяет оставаться бесплатными.

Работает на мобильных устройствах?

Да. Работает в современных мобильных браузерах на iOS и Android, ничего устанавливать не нужно.

🎨

Конвертер цветов — бесплатно

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

Работает в браузереБез регистрации и всплывающих оконРегистрация не требуетсяБесплатно навсегда

Работает офлайн после загрузки

Конвертируйте цвет между HEX, RGB, HSL, HSV и CMYK — с живой предпросмотром и копированием в один клик. Все работает прямо в браузере.

Ввод цвета

Принимает: HEX (#fff или #ffffff), RGB (255, 255, 255) или HSL (360, 100%, 50%)

Прозрачность100%

Пресеты:

HEX#14B8A6

rgb() · устаревшийrgb(20, 184, 166)

rgb() · современныйrgb(20 184 166)

hsl() · устаревшийhsl(173, 80%, 40%)

hsl() · современныйhsl(173 80% 40%)

oklch()oklch(70.4% 0.123 182.5)

lab()lab(67.1% -42.9 -2.3)

lch()lch(67.1% 43.0 183.1)

hsv()hsv(173, 89%, 72%)

cmyk()cmyk(89%, 0%, 10%, 28%)

RGB значения20, 184, 166

Контрастность WCAG

На белом фоне

2,49:1

Не прошла

На чёрном фоне

8,44:1

AAA

🖨️ Для печати: Эти значения CMYK (89%, 0%, 10%, 28%) — стандартное приближение sRGB→CMYK для справки. Для точного цвета печати используйте ICC-профиль вашего принтера или цветопробу — экран CMYK не может совпадать со всеми красками и бумагой.

Шкала яркости

Нажмите на образец, чтобы переключиться на этот оттенок

Частые применения

Преобразование цветов для веб-дизайнаПолучайте значения HEX, RGB и HSL для любого цвета — готовые к вставке в CSS или Tailwind.
Преобразование цветов для печати (CMYK)Преобразуйте цвета экрана (HEX/RGB) в значения CMYK для использования в дизайне печати и профессиональной печати.
Построение цветовых палитр для систем дизайнаПреобразуйте цвета бренда по всем форматам и создавайте согласованные шкалы светлоты для полной системы дизайна.
Проверка контрастности цвета для доступностиПреобразуйте цвета для получения значений RGB для использования в инструментах коэффициента контрастности — соответствие WCAG для доступного дизайна.
Преобразование цветов для FigmaПолучите точные значения HEX и RGB для вставки в средства выбора цвета Figma и системы токенов дизайна.

Как это работает

Вся логика конвертации — написанный вручную JavaScript, работающий полностью в вашем браузере — без библиотеки, без обращения к серверу. Инструмент разбирает ваш ввод, направляет его через цепочку чистых математических функций и одновременно производит одиннадцать форматов вывода, включая современные пространства CSS Color 4 oklch() и lab().

1
Гибкий разбор ввода
Пользовательский парсер принимает hex (3, 4, 6 или 8 цифр), rgb()/rgba(), hsl()/hsla() как в устаревшем синтаксисе с запятыми, так и в современном синтаксисе с пробелами, а также простые числовые тройки. Значения альфа как десятичные дроби или проценты нормализуются в диапазон 0–1 перед началом любой конвертации.
2
RGB как узел конвертации
Каждый принятый формат сначала приводится к каноничной тройке RGB. Из этого единого представления инструмент разветвляется: HSL и HSV используют стандартные формулы min/max/цветности; CMYK выводится путём нахождения ключевого канала; и линеаризация sRGB (кусочная гамма-кривая, определённая в IEC 61966-2-1) применяется перед расчётами перцептивного пространства.
3
Перцептивные цветовые пространства, вычисленные с нуля
oklch() вычисляется с использованием эталонных матриц 3×3 Бьёрна Оттоссона (пространство кубического корня LMS). lab() и lch() используют хроматическую адаптацию Бредфорда для преобразования от белой точки D65 к D50, что соответствует тому, как CSS Color 4 определяет lab(). Это те же формулы, что используются в движках рендеринга браузеров — реализованные здесь без каких-либо внешних зависимостей.
4
Контраст WCAG и шкала светлоты
Относительная яркость рассчитывается по формуле WCAG 2.1 (линеаризованные R, G, B, взвешенные 0,2126/0,7152/0,0722), а коэффициент контраста с белым и чёрным оценивается как AA-крупный, AA, AAA или Не пройдено. Девятишаговая полоса светлоты генерируется шагом канала светлоты HSL от 10% до 90%, позволяя щёлкнуть по любому образцу для конвертации этого оттенка.

Конвертер цветов — бесплатно

Частые применения

Как это работает

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

Выбор цвета и генератор палитр

Генератор случайных цветов

Генератор цветовых палитр

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