🎨

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

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

#3B82F6

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

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

HEX

RGB

HSL

CMYK

HSV

217°, 76%, 96%

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

Онлайн-конвертер цветов помогает переводить значения между разными цветовыми форматами: 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.

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

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

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

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

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

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

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

Цветовые гармонии помогают создавать визуально сбалансированные палитры. Комплементарная схема (два противоположных цвета) создаёт контраст и подходит для выделения элементов. Аналогичная (соседние оттенки) — для мягких, спокойных дизайнов. Триадная — универсальная схема для ярких и сбалансированных проектов. Выберите основной цвет, перейдите на вкладку "Гармонии" и кликните на любой предложенный цвет для его загрузки в конвертер.

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

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

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

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

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

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

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

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

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

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

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

Комментарии (1)

Был ли полезен этот инструмент?

Руслан Авдеев (автор проекта)• 1 янв. 2024 г., 00:00

Проверьте контрастность цветов по стандарту WCAG 2.1 для доступности сайта

Перейти к инструменту →