Бесплатный онлайн-конвертер цветов — HEX, RGB, HSL, CMYK

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

Что такое конвертер цветов?

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

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

Как использовать этот конвертер цветов

1. Введите цвет — Введите значение HEX или введите числа RGB, HSL или CMYK.
2. Увидьте все форматы — Все остальные форматы обновляются мгновенно.
3. Скопируйте нужное — Нажмите кнопку копирования рядом с любым форматом.
4. Используйте превью — Цветовой образец показывает точный цвет с меткой контраста.

Основные функции

Функция	Преимущество
Поддержка 4 форматов	HEX, RGB, HSL, CMYK — все сразу
Двусторонняя конверсия	Редактируйте любой формат, остальные обновляются
Прямое превью	Видите точный цвет с его HEX-меткой
Кнопки копирования по форматам	Один клик для копирования каждого формата
CMYK для печати	Получайте точные значения CMYK для печати

Понимание форматов цветов

HEX

Шестнадцатеричное обозначение цвета использует шесть символов (0-9, A-F) для представления значений красного, зеленого и синего:

• #FF0000 = красный на полной интенсивности
• #3B82F6 = синий Tailwind CSS blue-500

Часто используется в CSS, HTML и инструментах дизайна. Всегда начинается с #.

RGB (Красный, Зеленый, Синий)

Аддитивная модель цвета, где каждый канал варьируется от 0 до 255:

• rgb(255, 0, 0) = чисто красный
• rgb(59, 130, 246) = синий Tailwind blue-500

Используется в CSS (rgb() функция) и большинстве программных контекстов.

HSL (Оттенок, Насыщенность, Яркость)

Более интуитивная модель для настройки цветов:

• Оттенок (0-360): позиция на цветовом колесе (0=красный, 120=зеленый, 240=синий)
• Насыщенность (0-100%): интенсивность цвета (0% = серый, 100% = полный цвет)
• Яркость (0-100%): яркость (0% = черный, 50% = нормальный, 100% = белый)

Используется в CSS (hsl() функция) и предпочитается дизайнерами для создания цветовых палитр.

CMYK (Циан, Магента, Желтый, Черный)

Субтрактивная модель цвета, используемая в печати:

• Каждое значение варьируется от 0% до 100%
• Представляет покрытие чернил на бумаге
• Не может быть напрямую использовано в CSS (браузеры используют RGB внутренне)

Важен для подготовки дизайнов к профессиональной печати.

Сравнение форматов цветов

Формат	Сценарий использования	Пример	Диапазон
HEX	Веб-CSS, HTML	#3B82F6	00-FF на канал
RGB	Веб-CSS, программирование	rgb(59, 130, 246)	0-255 на канал
HSL	Дизайн, CSS	hsl(217, 91%, 60%)	H: 0-360, S/L: 0-100%
CMYK	Печатная промышленность	cmyk(76%, 47%, 0%, 4%)	0-100% на канал

Реальные случаи использования

Веб-разработка

Копируйте значения HEX или rgb() напрямую в свой CSS. HSL отлично подходит для создания цветовых шкал (например, изменение яркости для состояний наведения).

Системы дизайна

Конвертируйте брендовые цвета между форматами. Дизайнер дает вам HSL из Figma — вам нужен HEX для CSS. Выполняется за один клик.

Печатная промышленность

Конвертируйте цвета экрана в CMYK перед отправкой на печать. Обратите внимание, что некоторые яркие цвета RGB не могут быть точно воспроизведены в CMYK (гамма меньше).

Доступность

Используйте значение яркости HSL, чтобы проверить, соответствует ли цвет требованиям контраста WCAG. Цвета с яркостью около 50% обычно имеют наибольший воспринимаемый контраст.

Советы по работе с цветами

Совет	Объяснение
Используйте HSL для палитр	Зафиксируйте оттенок, изменяйте насыщенность и яркость для создания гармоничных цветовых шкал.
Короткие HEX работают	#3BF — сокращение для #33BBFF. Этот конвертер принимает оба варианта.
Следите за гаммой CMYK	Яркие синие и зеленые часто смещаются при конвертации в CMYK. Всегда делайте пробную печать цветов.
CSS поддерживает все форматы	Современный CSS принимает HEX, rgb(), hsl() и даже hwb(). Используйте то, что наиболее читабельно.
Прозрачность	Для прозрачности используйте rgba() или 8-значный HEX (#3B82F680).

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

Почему мой цвет CMYK выглядит иначе на экране?

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

Что такое гамма?

Гамма — это диапазон цветов, которые могут отображаться устройством. Устройства с более широкой гаммой могут отображать больше цветов, чем устройства с узкой гаммой.

Как проверить, поддерживает ли мой браузер HSL?

Все современные браузеры поддерживают HSL. Вы можете проверить это, введя hsl(0, 100%, 50%) в адресную строку браузера. Если вы увидите красный цвет, ваш браузер поддерживает HSL.