Конвертер цветов онлайн — HEX, RGB, HSL, CMYK

Как пользоваться конвертером цветов

1. Выберите цвет — кликните на палитру, введите HEX-код в формате #RRGGBB или укажите RGB-значения.
2. Или возьмите готовый — один из 15 популярных цветов либо кнопку «Случайный цвет».
3. Скопируйте нужный формат — нажмите на значение HEX, RGB, HSL или CMYK, чтобы скопировать.
4. Скачайте сводку кнопкой «Скачать». «Пример» подставит образец, «Очистить» — сбросит к белому.

Дополнительно инструмент показывает название цвета (на русском и английском), яркость, насыщенность, светлоту, оттенок, рекомендуемый контрастный цвет для текста и полную палитру оттенков от светлого к тёмному.

Что такое HEX, RGB, HSL и CMYK

Цвет можно описать разными способами — каждый формат удобен для своих задач: веб-разработки, дизайна, печати, графики.

• HEX (шестнадцатеричный). Самый популярный формат в вебе. Записывается как #RRGGBB или сокращённо #RGB. Например, #FF5733 — оттенок оранжевого. Каждая пара символов задаёт яркость красного, зелёного и синего канала от 00 до FF (255).
• RGB (Red Green Blue). Три числа от 0 до 255 — интенсивность красного, зелёного и синего. Модель аддитивная: цвета складываются из света, как на экране.
• HSL (Hue Saturation Lightness). Тон, насыщенность и светлота. Удобна, когда нужно затемнить или осветлить цвет, не меняя сам оттенок.
• CMYK (Cyan Magenta Yellow Key). Модель для печати: голубой, пурпурный, жёлтый и чёрный. Субтрактивная — краски поглощают свет.

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

• HEX и RGB — для сайтов и экранов: CSS, дизайн интерфейсов, графика.
• HSL — когда нужно подобрать оттенки одного цвета или построить гармоничную палитру.
• CMYK — для типографии и печати; на экране цвета CMYK всегда лишь приблизительны.

Как переводятся форматы

В основе всех веб-форматов лежит RGB. HEX — это та же тройка RGB, записанная в шестнадцатеричной системе: 255 → FF. HSL получается пересчётом RGB в координаты тона, насыщенности и светлоты. CMYK вычисляется из RGB по доле каждой краски. Инструмент делает все переводы мгновенно и показывает результат во всех форматах сразу.

Название цвета и контрастный текст

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

Палитра оттенков

Для выбранного цвета строится ряд оттенков от светлого к тёмному — удобно для состояний кнопок (обычная, наведение, нажатие), фонов и градиентов. Каждый оттенок можно скопировать одним кликом.

Где применяется конвертер

• Веб-разработка. Перевод цветов из макета в CSS — HEX или RGB.
• Дизайн. Подбор палитры, оттенков и контраста.
• Печать. Перевод экранных цветов в CMYK перед типографией.
• Графика. Согласование цвета между разными редакторами и форматами.

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

Доступность и контраст

Чтобы текст читался, важен достаточный контраст между ним и фоном. Слишком близкие по яркости цвета сливаются, особенно для людей со слабым зрением. Подсказка контрастного цвета помогает выбрать читаемое сочетание; для строгой проверки по стандартам доступности учитывают коэффициент контрастности.

Частые вопросы

• Чем HEX отличается от RGB? Это одно и то же значение в разной записи: HEX — шестнадцатеричная, RGB — десятичная.
• Почему CMYK на экране неточный? Экран светится (RGB), а печать отражает свет (CMYK); точный цвет зависит от бумаги и печати.
• Как осветлить или затемнить цвет? Удобнее в HSL — меняйте светлоту (L), не трогая тон.
• Можно ли скопировать сразу все форматы? Да, кнопка «Скачать» сохранит сводку со всеми форматами и характеристиками.
• Сохраняются ли данные? Нет, всё считается в браузере.