Конвертер Цветовых Кодов (Все Форматы)

Добро пожаловать в Конвертер цветовых кодов (все форматы) — бесплатный онлайн-инструмент, который преобразует любое значение цвета во все распространенные форматы одновременно. Вставьте код HEX, триплет RGB, определение HSL или HSV, квартет CMYK или даже именованный цвет CSS — и мгновенно получите эквивалентные значения, увидите живой предпросмотр, проверьте контрастность по WCAG и изучите сгенерированную палитру дизайнера, включающую дополнительные, триадные, аналогичные цвета, а также светлые и темные оттенки.

Зачем использовать универсальный конвертер цветов?

Большинство онлайн-конвертеров работают только в одном направлении (HEX в RGB или RGB в CMYK), заставляя вас использовать несколько инструментов для получения полной картины. Этот конвертер принимает все популярные форматы в одном поле, автоматически определяет тип ввода и возвращает все пять форматов сразу с предпросмотром, экономя ваше время при переключении между веб-разработкой, мобильными приложениями, печатью и инструментами дизайна.

Поддерживаемые форматы ввода

В чем разница между цветовыми моделями HSL и HSV?

И HSL, и HSV описывают цвет через три интуитивно понятных канала — оттенок (Hue), насыщенность (Saturation) и третье значение, связанное со светлотой, — но они различаются в этом третьем канале.

• HSL — Hue, Saturation, Lightness: светлота варьируется от 0% (чистый черный) через 50% (самый яркий вариант оттенка) до 100% (чистый белый). HSL предпочтителен в CSS, так как он делает осветление или затемнение цвета симметричным и предсказуемым.
• HSV / HSB — Hue, Saturation, Value (Brightness): яркость варьируется от 0% (чистый черный) до 100% (самый полный, насыщенный вариант оттенка). HSV — это модель, лежащая в основе выбора цвета в Photoshop, Figma и большинстве десктопных инструментов дизайна.

Например, полностью насыщенный красный — это hsl(0, 100%, 50%) в HSL, но hsv(0, 100%, 100%) в HSV. Тот же цвет в двух разных ментальных моделях — обе полезны в зависимости от того, думаете ли вы как разработчик CSS или как художник.

Почему мои значения CMYK немного отличаются от программ для печати?

RGB — это аддитивная модель, используемая экранами, тогда как CMYK — субтрактивная модель для принтеров. Математическое преобразование, которое выполняет этот инструмент, является быстрым приближением, не учитывающим профили ICC, лимиты подачи чернил или особенности бумаги. Для профессиональной допечатной подготовки всегда используйте управляемые цветом профили CMYK в вашем ПО (такие как US Web Coated SWOP v2 или Coated FOGRA39). Используйте этот конвертер как быстрый справочник, когда вам нужен квартет CMYK, «достаточно близкий» для ранних стадий обсуждения дизайна.

Как работает проверка контрастности WCAG?

Руководство по обеспечению доступности веб-контента (WCAG) определяет коэффициент контрастности между двумя цветами на основе их относительной яркости — перцептивной модели, в которой зеленый цвет весит больше, чем красный, а красный — больше, чем синий. Коэффициент варьируется от 1:1 (отсутствие контраста) до 21:1 (черный текст на белом фоне).

• AAA — коэффициент ≥ 7:1, соответствует самому строгому уровню доступности для основного текста
• AA — коэффициент ≥ 4.5:1, минимум для основного текста в большинстве стандартов
• AA Large — коэффициент ≥ 3:1, достаточно для крупного текста (18pt+ или 14pt жирный) и графических элементов интерфейса
• Fail — коэффициент < 3:1, не используйте это сочетание для текста

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

Генерирует ли конвертер цветовую палитру?

Да. После каждой конвертации инструмент создает палитру на основе выбранного оттенка, включая:

• Дополнительный — цвет прямо напротив на круге (поворот на 180°), полезен для высококонтрастных акцентов
• Триадный — два цвета, равномерно расположенные под углом 120°, сбалансированные и яркие
• Аналогичный — соседние оттенки под углом ±30°, полезны для гармоничных градиентов и фонов
• Светлые оттенки (Tints) — три более светлых варианта (тот же оттенок, выше светлота)
• Темные тона (Shades) — три более темных варианта (тот же оттенок, ниже светлота)

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

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

1. Введите или выберите цвет — введите любое значение (HEX, RGB, HSL, HSV, CMYK или название CSS) в поле ввода или нажмите на маленький квадрат, чтобы открыть системную палитру.
2. Конвертируйте — нажмите кнопку «Конвертировать». Инструмент сам определит формат и рассчитает все остальные значения.
3. Скопируйте нужное — нажмите на кнопку копирования рядом со значением. На кнопке ненадолго появится галочка, подтверждая сохранение в буфер обмена.
4. Проверьте доступность — изучите коэффициенты WCAG для белого и черного фонов.
5. Изучите палитру — кликайте по образцам в разделе палитры, чтобы мгновенно переключаться между ними.

Практические сценарии использования

Для веб-разработчиков

• Конвертация HEX из макета Figma в hsl() для использования с переменными CSS и современными системами тем
• Генерация значений rgba() для полупрозрачных слоев напрямую из фирменного HEX цвета
• Проверка соответствия цвета бренда стандарту WCAG AA на белом фоне перед запуском проекта

Для графических дизайнеров

• Перевод цвета CSS с сайта в CMYK для подготовки печатных макетов
• Создание тональной шкалы из одного базового оттенка
• Поиск дополнительных или триадных акцентов, не покидая браузер

Для UI и продуктовых дизайнеров

• Синхронизация между HSV (палитра Figma) и HSL (CSS) при документировании дизайн-токенов
• Автоматическое определение лучшего цвета текста (черный или белый) для любого фона
• Быстрое сохранение или отправка цвета через URL страницы результата

Советы для лучших результатов

• Гибкость разделителей — парсер принимает запятые, пробелы или слэши внутри скобок, поэтому rgb(79 70 229) работает так же хорошо, как и rgb(79, 70, 229).
• Используйте проценты — запись rgb(31%, 27%, 90%) допустима; инструмент сам переведет их в диапазон 0–255.
• Попробуйте имена цветов CSS — поддерживается более 140 имен, включая современные, такие как rebeccapurple.
• Следите за полосками каналов — визуальное разделение RGB и CMYK позволяет наглядно увидеть, какие компоненты доминируют в печатной версии цвета.
• Относитесь к CMYK как к ориентиру — для получения финального точного значения откройте результат в профессиональном ПО с настроенным управлением цветом.

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

Нужно ли ставить символ # перед HEX кодом?

Нет. Принимаются и #4f46e5, и 4f46e5. Префикс # необязателен.

Поддерживаются ли 4-значные и 8-значные коды HEX (с альфа-каналом)?

Парсер примет их, но альфа-канал будет отброшен при конвертации, так как классические модели RGB, HSL, HSV и CMYK его не содержат. Инструмент фокусируется только на цветовой составляющей.

Могу ли я поделиться результатом?

Да. Форма работает через метод GET, поэтому все данные есть в URL. Просто скопируйте адрес страницы из браузера.

Почему некоторые HEX значения пишутся заглавными буквами?

Инструмент приводит HEX к каноническому виду (напр. #4F46E5), что принято во многих гайдлайнах по дизайну. Вы можете вводить их строчными буквами — результат будет идентичным.

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

Да. Интерфейс полностью адаптивен: форма, палитра и карточки контрастности перестраиваются в одну колонку на маленьких экранах для удобного управления касаниями.

Дополнительные ресурсы

• HSL и HSV — Википедия
• Цветовая модель CMYK — Википедия
• Требования WCAG 2.1 к контрасту (Minimum)