🎨

Конвертер цветов

Перевод цветов между HEX, RGB, HSL, HSV и CMYK с гармониями и проверкой контрастности

Открывали 124 раза

#3B82F6

Ближайшее CSS-имя: royalblue

Прозрачность (Alpha): 100%

HEX

RGB

HSL

CMYK

HSV

217°, 76%, 96%

Дальше по цвету

Конвертер HEX → RGBБыстрый перевод одного формата Конвертер RGB → HEXОбратное преобразование Проверка контраста WCAGДоступность текста на фоне Генератор палитрыГотовые цветовые схемы CSS-градиентыПлавные переходы для вёрстки Случайный цветИдея для нового оттенка

Инструмент справился с вашей задачей?

Одно нажатие, без регистрации. По ответам мы решаем, какие инструменты дорабатывать первыми.

Ваш ответ здесь будет первым.

Этот инструмент ещё ждёт первого комментария

Нашли приём, остался вопрос или чего-то не хватило — напишите, пригодится следующим. Без почты и пароля · публикуем после проверки, обычно за 1–2 дня

Конвертер цветов — онлайн

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

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

Цветовые форматы

HEX (#RRGGBB) — шестнадцатеричная запись для веба. RGB (red, green, blue) — аддитивная модель для экранов. CMYK (cyan, magenta, yellow, key) — субтрактивная модель для печати. HSL (hue, saturation, lightness) — перцептивная модель.

HSV похож на HSL, но использует value вместо lightness. Каждая модель подходит для своей задачи. HSL часто удобнее для создания палитр, HEX — для вставки в код, CMYK — для печатных материалов.

Применение

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

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

💡

Пример: подготовка макета к печати

Дизайнер создал макет в RGB для веб-превью

Нужно подготовить версию для печати в CMYK

Использует конвертер для перевода основных цветов

Проверяет, что яркие цвета не искажаются сильно

Отправляет корректный макет в типографию

🧠

Знаете ли вы?

🎨

HEX = шестнадцатеричная запись цвета

🖥️

RGB — для экранов, CMYK — для печати

📊

HSL удобнее для перцептивных изменений цвета

💡

RGB имеет больший цветовой охват, чем CMYK

🖨️

Не все цвета RGB можно напечатать в CMYK

🎯

Калиброванные мониторы — ключ к точной работе с цветом

Сравнение цветовых моделей: HEX, RGB, HSL, HSV и CMYK

Формат	Диапазон	Применение	Пример
HEX	#000000 — #FFFFFF	HTML, CSS, веб-дизайн	#3B82F6
RGB	0-255 на канал	CSS, JavaScript, мониторы	rgb(59, 130, 246)
HSL	H: 0-360°, S/L: 0-100%	CSS3, подбор оттенков	hsl(217, 91%, 60%)
HSV/HSB	H: 0-360°, S/V: 0-100%	Photoshop, Illustrator	hsv(217, 76%, 96%)
CMYK	0-100% на канал	Полиграфия, печать	cmyk(76%, 47%, 0%, 4%)

💡

Важно знать

Перед отправкой макета в печать всегда переводите цвета в CMYK и проверяйте результат. Яркие RGB-цвета могут стать тусклыми при печати — это ограничение технологии, а не ошибка.

Как пользоваться конвертером цветовых кодов — пошаговая инструкция

Введите цвет в любом формате

На вкладке "Конвертер" введите цветовой код в одно из полей: HEX (например, #3B82F6), RGB (59, 130, 246), HSL (217, 91%, 60%) или CMYK (76, 47, 0, 4). Все остальные значения обновятся автоматически.

Используйте визуальные инструменты для точной настройки

Кликните по области превью для вызова нативного пикера цвета. На вкладке "Слайдеры" тонко настройте каждый канал RGB или HSL с помощью ползунков с градиентной визуализацией.

Скопируйте нужный формат

Нажмите иконку копирования рядом с нужным форматом — HEX, RGB, HSL, CMYK или HSV. Значение будет скопировано в буфер обмена и готово для вставки в ваш CSS, код или графический редактор.

Подберите палитру и проверьте доступность

Перейдите на вкладку "Гармонии" для автоматической генерации сочетающихся цветов. На вкладке "Контраст" проверьте читаемость текста по стандартам WCAG 2.1. Сохраняйте понравившиеся цвета в палитру кнопкой "В палитру".

Примеры использования конвертера цветовых кодов

🎨 Создание дизайн-системы для сайта

Дизайнер подбирает основной брендовый цвет, генерирует ряд оттенков через вкладку гармоний и экспортирует все варианты в HEX для CSS-переменных. Встроенная палитра позволяет сохранить до 20 цветов и скопировать их все разом.

💻 Вёрстка макета из Figma

Верстальщик получает цвета из макета в формате HSB (Figma по умолчанию показывает именно его). Через конвертер он мгновенно получает HEX-код для CSS и RGB-значения для JavaScript-анимаций без ручных вычислений.

📋 Подготовка макета к печати

Дизайнер полиграфической продукции переводит экранные RGB-цвета в CMYK-значения перед отправкой макета в типографию. Конвертер показывает точное процентное соотношение четырёх красителей: голубого, пурпурного, жёлтого и чёрного.

♿ Аудит доступности сайта

QA-инженер или дизайнер проверяет все текстовые элементы на соответствие WCAG 2.1 по коэффициенту контраста. Вкладка контрастности показывает результат по трём уровням — AA для крупного текста, AA для обычного и AAA.

Частые вопросы о конвертере цветов

Что такое HEX-код цвета и как он работает?

HEX-код (шестнадцатеричный код цвета) — это способ записи цвета в виде шести символов после знака решётки (#). Первые два символа определяют красный канал (Red), следующие два — зелёный (Green), последние два — синий (Blue). Каждая пара может принимать значения от 00 до FF (0-255 в десятичной системе). Например, #FF0000 — чистый красный, #00FF00 — зелёный, #0000FF — синий. HEX — основной формат задания цвета в HTML и CSS.

В чём разница между HSL и HSV (HSB)?

Обе модели описывают цвет через оттенок (Hue) и насыщенность (Saturation), но различаются третьим параметром. HSL использует Lightness (светлоту), где 0% — чёрный, 50% — чистый цвет, 100% — белый. HSV использует Value (яркость), где 0% — чёрный, 100% — максимально яркий цвет. HSL более интуитивен для веб-разработки и CSS, а HSV (HSB) — стандарт в Adobe Photoshop, Illustrator и Figma.

Как задать прозрачность цвета — форматы RGBA и HSLA?

Прозрачность задаётся каналом alpha от 0 (полностью прозрачный) до 100% (непрозрачный). Сдвиньте ползунок «Прозрачность (Alpha)» — и конвертер дополнительно покажет строки RGBA и HSLA, готовые для CSS, например rgba(59, 130, 246, 0.50) или hsla(217, 91%, 60%, 0.50). В CSS значение alpha записывается долей от 0 до 1 (0.5 = 50%). HEX-пикер прозрачность не передаёт, поэтому для полупрозрачных цветов используйте именно RGBA или HSLA.

Можно ли точно перевести RGB в CMYK для печати?

Конвертер выполняет математически точный перевод RGB в CMYK, однако цветовой охват (gamut) экрана и печати различается. Некоторые яркие цвета экрана невозможно точно воспроизвести на бумаге. Для профессиональной полиграфии рекомендуется использовать ICC-профили и калиброванные мониторы. Наш конвертер даёт отличное приближение для предварительной оценки и работы с большинством печатных проектов.

Что такое проверка контрастности WCAG и зачем она нужна?

WCAG (Web Content Accessibility Guidelines) — международный стандарт доступности веб-контента. Проверка контрастности определяет, насколько легко читается текст на заданном фоне. Минимальный коэффициент контраста для обычного текста — 4.5:1 (уровень AA), для крупного текста (18pt+) — 3:1, для повышенной доступности (AAA) — 7:1. Это важно для пользователей с нарушениями зрения, а также является юридическим требованием во многих странах.

Безопасно ли использовать онлайн-конвертер цветов?

Наш конвертер работает полностью в вашем браузере — введённые цвета не отправляются на сервер сайта. Все вычисления выполняются локально на вашем устройстве с помощью JavaScript. Инструмент не требует регистрации, а палитру сохранённых цветов держит только в открытой вкладке — после её закрытия или перезагрузки палитра пропадает.

Как использовать цветовые гармонии в дизайне?

Цветовые гармонии помогают собирать визуально сбалансированные палитры. На вкладке «Гармонии» конвертер строит сразу шесть схем от вашего цвета: комплементарную (два противоположных оттенка — максимальный контраст), аналогичную (соседние оттенки ±30° — мягкие спокойные сочетания), триадную (три цвета через 120° — яркий баланс), расщеплённо-комплементарную (мягче классической комплементарной), тетрадную (четыре цвета — две пары контрастов) и ряд оттенков по светлоте. Кликните по любому образцу, чтобы загрузить его в конвертер и сразу получить все коды.

Работает ли конвертер цветов на смартфоне?

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

Полезная информация

Используйте HSL для создания оттенков: меняйте только параметр Lightness, чтобы получить светлые и тёмные варианты одного цвета

Проверяйте контрастность текста не только на белом, но и на цветных фонах — особенно на мобильных устройствах при ярком освещении

Сохраняйте основные цвета бренда в палитру и используйте их как отправную точку для генерации гармоний

При переводе в CMYK для печати учитывайте, что насыщенные синие и зелёные тона теряют яркость сильнее всего

Задавайте цвета в CSS через custom properties (переменные): --color-primary: #3B82F6 для удобного управления палитрой

Для тёмных тем используйте HSL и увеличивайте Lightness вместо смешивания с белым — результат будет чище

Под превью конвертер подсказывает ближайшее CSS-имя цвета (например, royalblue) — удобно, когда нужно не точное значение, а читаемое имя для прототипа или быстрого CSS.

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

Если у вас есть идеи по улучшению конвертера цветов или вы нашли неточность в расчётах, пожалуйста, напишите в комментариях внизу страницы или нам напрямую: почта и Telegram есть на странице «Контакты».

Руслан АвдеевОт автора проекта
Все инструменты на ToolFox бесплатны, и я их дорабатываю сам. Напишите, если инструмент считает неверно, чего-то не хватает или что-то стоит поправить, — по таким комментариям я и решаю, чем заняться дальше.

Комментарии — мнения посетителей, прошедшие проверку по правилам сайта.