Конвертер цветов: HEX, RGB, HSL, CMYK

Что такое Color Converter?

Color Converter — это бесплатный онлайн-инструмент, который мгновенно конвертирует любой цвет между пятью наиболее распространёнными цветовыми форматами: HEX, RGB, HSL, HSB (HSV) и CMYK. Вставьте или введите значение цвета в любом поддерживаемом формате — инструмент автоматически определит, что вы ввели, и в реальном времени покажет все остальные представления одновременно. Он устраняет ежедневное неудобство переключения между значением HEX из Figma и функцией CSS HSL или перевода значений RGB с экрана в проценты CMYK для печати — без копирования значений через калькулятор. Все конвертации выполняются локально в браузере без необходимости в сервере.

Основные возможности

• Конвертация между HEX, RGB, HSL, HSB и CMYK — все пять форматов отображаются одновременно, как только введён допустимый цвет. Исходный код использует хук useColorConversion, который поддерживает синхронизацию объектов состояния hex, rgb, hsl, hsb и cmyk.
• Автоматическое определение входного формата — текстовая область автоматически определяет HEX (значения, начинающиеся с # или соответствующие /^[0-9a-f]{3,8}$/i), RGB (префикс rgb) и HSL (префикс hsl), отображая значок «Detected: HEX» (или RGB/HSL/Auto).
• Конвертация в реальном времени при наборе — каждое нажатие клавиши, создающее анализируемое значение, немедленно запускает перерендеринг всех пяти форматов вывода. Нажимать кнопку не нужно.
• Копирование любого формата в буфер обмена — у каждой строки формата есть кнопка копирования, которая показывает зелёную галочку в течение 2 секунд после успешного копирования. Всплывающее уведомление подтверждает действие.
• Визуальный предпросмотр цвета — большой блок предпросмотра заполняется текущим цветом и отображает значение hex в тексте с автоматическим контрастом (чёрный или белый в зависимости от яркости).
• Числовые поля для RGB, HSL, HSB и CMYK — панели ручной настройки позволяют регулировать отдельные каналы: R, G, B (0–255), H (0–360), S (0–100), L (0–100) для HSL, H (0–360), S (0–100), B (0–100) для HSB и C, M, Y, K (0–100) для CMYK, каждый ограничен допустимыми диапазонами.
• Ссылка для обмена — инструмент использует хук useShareableState для кодирования текущего цвета в URL, что позволяет создавать прямые ссылки на конкретные конвертации цветов.
• Работает офлайн после загрузки — никаких сетевых запросов во время конвертации; полная библиотека конвертации включена в страницу.

Как использовать

Шаг 1: Введите цвет

Откройте Color Converter. Левая половина карточки ввода содержит текстовое поле. Вставьте одно из следующих:

• Значение hex: #3B82F6
• Функцию RGB: rgb(59, 130, 246)
• Функцию HSL: hsl(217, 91%, 60%)
• Чистую строку hex: 3b82f6 (без #)

Как только вы вводите или вставляете распознаваемое значение, в правом верхнем углу поля появляется небольшой значок — например, «Detected: HEX». Правая половина карточки показывает блок предпросмотра, который немедленно заполняется обнаруженным цветом.

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

Шаг 2: Просмотрите все форматы

Под карточкой ввода карточка «All Formats» перечисляет пять строк:

Каждая строка показывает метку формата, отформатированное значение моноширинным шрифтом и кнопку-иконку для копирования. Нажмите любую кнопку копирования, чтобы поместить это конкретное значение в буфер обмена.

Шаг 3: Точная настройка с помощью числовых полей

Под текстовым полем инструмент предоставляет прямые числовые поля для всех четырёх регулируемых цветовых моделей:

• RGB: Три числовых поля с метками R, G, B — каждое принимает значения от 0 до 255 и ограничено допустимыми диапазонами.
• HSL: Три числовых поля с метками H (0–360), S (0–100), L (0–100).
• HSB: Три числовых поля с метками H (0–360), S (0–100), B (0–100).
• CMYK: Четыре числовых поля с метками C, M, Y, K — каждое принимает значения от 0 до 100.

Изменение любого поля обновляет состояние hex, которое мгновенно распространяется на все пять форматов вывода. Это полезно, когда вы знаете целевой угол оттенка, процент насыщенности или значение CMYK и вам нужен эквивалентный hex для CSS.

Шаг 4: Скопируйте и используйте конвертированные значения

Нажмите кнопку копирования рядом с нужным форматом. Значок кнопки меняется с иконки буфера обмена на зелёную галочку на 2 секунды. В нижней части экрана появляется уведомление об успехе.

Инструмент также отслеживает историю конвертаций в HistoryPanel (Premium). При восстановлении записи из истории входное поле устанавливается на сохранённое значение hex и все конвертации выполняются повторно.

Шаг 5: Поделитесь конкретным цветом

URL обновляется автоматически при изменении цвета (через useShareableState). Скопируйте URL браузера, чтобы поделиться прямой ссылкой на любой конкретный цвет. Получатели, открывшие ссылку, увидят уведомление «Loaded from shared link» и заданный цвет, загруженный заранее во всех форматах.

Практические примеры

Перевести дизайн-токен Figma в CSS

Дизайнер предоставляет фирменный фиолетовый #8467C7. Разработчику нужно значение HSL для функции CSS color-mix(). Откройте Color Converter и введите #8467C7 — сразу в строке HSL появится hsl(261, 40%, 59%), готовое к вставке.

Конвертировать цвет печати в веб

Типография указывает корпоративный синий как cmyk(76%, 47%, 0%, 4%). Автоматическое определение текстового поля не распознаёт сырую запись CMYK, но вы можете ввести значения напрямую через числовые поля CMYK: установите C на 76, M на 47, Y на 0 и K на 4. Значения HEX, RGB и HSL обновляются в реальном времени, мгновенно предоставляя готовые для веба значения.

Создать палитру для тёмной темы

Разработчик создаёт тёмную тему и хочет изменить светлый цвет на более тёмный вариант. Он вводит #E2E8F0 (светлый серый), замечает, что HSL — hsl(214, 32%, 91%), затем вручную уменьшает значение канала L с 91 до 25, чтобы получить тёмный эквивалент. Значение HEX обновляется до #253443, которое он сразу копирует.

Советы и лучшие практики

Вводите без # для более быстрого ввода. Регулярное выражение автоопределения находит чистые строки hex вроде 3b82f6 как формат HEX. Вы можете вставлять напрямую из инструментов проектирования, которые убирают знак решётки.

Используйте поля RGB для точного управления каналами. Если вам нужен цвет с точным значением красного 200, введите прямо в поле R вместо того, чтобы искать правильный префикс hex. Ограничение мин/макс предотвращает случайный ввод значений вне допустимого диапазона.

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

Значок определения — это быстрая проверка валидности. Если значок не появляется после ввода, входные данные не распознаны как допустимый цвет. Проверьте опечатки — распространённые ошибки включают отсутствующий #, использование rgba с альфа-каналом (сейчас не анализируется) или ввод процентных значений RGB.

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

Распространённые проблемы и решения

После ввода в строках вывода ничего не появляется. Входной текст не распознан как допустимый цвет. Функция parseColorToHex обрабатывает hex с #, чистый hex, строки rgb() и hsl(). Если вы ввели другой формат (например, именованный цвет CSS cornflowerblue), автоопределение возвращает null и конвертация не запускается. Используйте вместо этого значение hex.

Поля RGB принимают значения выше 255. Код ограничивает значения до Math.min(255, Math.max(0, val)) при изменении, поэтому если вы введёте 300, оно снапнется до 255 сразу, как поле обработает ввод. Это ожидаемое поведение.

Поле оттенка HSL ограничивается на 360. Поле оттенка ограничено до Math.min(360, Math.max(0, val)). Ввод 361 устанавливает значение на 360; ввод -1 устанавливает на 0.

Кнопка копирования не реагирует. Если navigator.clipboard.writeText не работает (например, в небезопасном или ограниченном контексте), инструмент переключается на метод document.execCommand('copy') с использованием временного элемента textarea. Если оба способа не работают, проверьте, есть ли у браузера разрешение на доступ к буферу обмена для этого сайта.

Уведомление «Loaded from shared link» появляется неожиданно. Это уведомление отображается один раз, когда isFromUrl равно true, то есть цвет был закодирован в строке запроса URL. Если вы открыли сохранённый URL, это ожидаемо. Из-за защитника ссылки hasShownShareToast уведомление появляется только один раз за загрузку страницы.

Конфиденциальность и безопасность

Color Converter обрабатывает все конвертации локально с помощью математических операций JavaScript. Никакие значения цвета, входные тексты или результаты конвертации не передаются на какой-либо сервер. URL для обмена кодирует цвет только в URL браузера — он никуда не отправляется, если только вы не решите поделиться ссылкой. Для операций копирования инструмент использует Web Clipboard API, которые также полностью локальны. После первоначальной загрузки страницы полностью работает в офлайн-режиме.

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

Бесплатен ли Color Converter?

Да, полностью бесплатно без необходимости регистрации. Все пять форматов конвертации, визуальный выбор цвета, ручные поля RGB и HSL, копирование в буфер обмена и URL для обмена доступны всем пользователям без оплаты. Функции Supporter, такие как PresetsPanel и HistoryPanel, требуют активации Ko-fi за $5 для 30-дневного доступа.

Работает ли Color Converter офлайн?

Да. После загрузки страницы вся логика конвертации полностью выполняется в JavaScript без внешних запросов. Вы можете отключиться от сети и продолжать конвертировать цвета без перебоев.

Безопасны ли мои данные в Color Converter?

Да. Значения цвета обрабатываются только в памяти браузера. Ничего не отправляется на сервер. URL для обмена кодирует цвет на стороне клиента — серверы Glyph Widgets никогда не записывают конкретные цвета, с которыми вы работаете.

Какие форматы поддерживает Color Converter?

Инструмент поддерживает пять форматов: HEX (3- или 6-значные строки hex с # или без), RGB (запись rgb(R, G, B)), HSL (запись hsl(H, S%, L%)), HSB/HSV и CMYK. Все пять форматов имеют выделенные числовые поля для прямой регулировки значений.

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

Оба используют оттенок (0–360 градусов) и насыщенность (0–100%), но третий канал различается. HSL использует светлоту, где 50% — полностью насыщенный цвет, а 100% всегда белый. HSB (также называемый HSV) использует яркость/значение, где 100% — наиболее чистая версия оттенка, а 0% всегда чёрный. Figma и большинство инструментов проектирования отображают HSB; CSS использует HSL.

Можно ли конвертировать CMYK в HEX?

Автоопределение в текстовом поле не анализирует сырую запись CMYK, но вы можете использовать панель числовых полей CMYK для прямого ввода значений C, M, Y и K. Изменение любого значения CMYK обновляет все остальные форматы в реальном времени, включая HEX.

Почему конвертация CMYK немного отличается от моих значений печати?

Конвертация «экран — печать» зависит от цветового профиля. Инструмент использует стандартную математическую формулу sRGB в CMYK без коррекции профиля ICC. Для производственной печати используйте инструмент управления цветом, который применяет правильные профили ICC для вашего принтера и бумаги.

Можно ли вводить 3-значные сокращённые значения hex, например #F0F?

Да. Функция parseColorToHex находит строки hex, соответствующие /^[0-9a-f]{3,8}$/i, что включает 3-значные сокращения. #F0F обрабатывается как эквивалент #FF00FF.

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

Измените цвет в инструменте и скопируйте URL браузера. Текущее значение hex закодировано в строке запроса URL через useShareableState. Когда ваш коллега откроет ссылку, он увидит цвет, предзагруженный во всех форматах, с уведомлением «Loaded from shared link».

Поддерживает ли Color Converter альфа-канал (RGBA / HSLA)?

Не в текущей версии. Анализатор ввода обрабатывает rgb() и hsl(), но не rgba() или hsla(). Значения альфа-канала не сохраняются в конвейере конвертации. Для полной поддержки альфа-канала извлеките значения RGB или HSL вручную и обрабатывайте альфа-канал отдельно.

Связанные инструменты

• Color Picker — берите образцы цветов прямо из загруженного изображения или экрана и отправляйте результат в конвертер.
• Contrast Checker — проверяйте, соответствуют ли два конвертированных цвета требованиям контрастности WCAG AA или AAA.
• Скоро: Palette Generator — создавайте гармоничные цветовые палитры из базового цвета и конвертируйте каждый образец в предпочтительный формат.

Попробуйте Color Converter прямо сейчас: Glyph Widgets Color Converter