Конвертер цветовых форматов
Преобразуйте цвет между HEX, RGB, HSL и CMYK с живым предпросмотром (живой предпросмотр на desktop)
HEX
#
RGB
R
G
B
HSL
H
S
L
CMYK
C
M
Y
K
Подсказка: перетаскивайте буквы каналов влево/вправо для тонкой настройки
Предпросмотр
🚀 Быстрый старт
- Выбор/ввод: введите поддерживаемый формат (#1E90FF, rgb(30,144,255), hsl(210,100%,56%)) или используйте пипетку
- Автоконвертация: ввод в одном формате мгновенно обновляет остальные
- Копирование: кнопка рядом с каждым форматом — для получения нормализованной строки
📌 Типичные сценарии
- Дизайн‑handoff: перевести HEX из макетов в CSS‑RGB/HSL
- Стайлгайд: унифицировать форматы и запись в библиотеке компонентов
- Печать: перевести экранный цвет в CMYK как первую оценку (нужна проба)
- Доступность: использовать превью для быстрой оценки контраста (точные коэффициенты — в отдельном инструменте)
🎛️ Параметры конверсии и отображения
- Правила ввода: HEX только 6 символов (без альфа); RGB 0–255; H 0–360; S/L 0–100; CMYK 0–100. Регистр не важен
- Предпросмотр: на desktop справа показывается live‑превью; на мобильных предпросмотр не отображается
- Палитра: кнопка‑палитра в правом верхнем углу каждой карточки
- Политика заглавных для HEX: вывод нормализован в верхний регистр (например, #1E90FF); ввод регистронезависимый; тумблера нет
- Точная настройка: перетаскивайте буквы каналов влево/вправо (Shift×10, Alt÷0.1)
- Копирование: кнопка выдает стандартизированные строки (HEX в верхнем регистре)
🧭 Рекомендации по использованию
- Точность: цветоуправление устройств различается; значения пипетки могут немного расходиться
- Альфа: текущие форматы без альфы; используйте rgba()/hsla() или отдельный канал
- Цветовое пространство: в вебе — sRGB; в P3/Display‑P3 проверяйте особо тщательно
- Единообразие: согласуйте канонический формат в CSS (например, HSL)
⚠️ Ограничения и риски
- Различия устройств: мониторы/браузеры/ОС по‑разному управляют цветом; вид может отличаться
- CMYK приблизителен: значения ориентировочные; для реальной печати требуются профили ICC и специализированный рабочий процесс
- Без альфы: прозрачность не обрабатывается
🔒 Конфиденциальность и безопасность
- Вся обработка выполняется в вашем браузере; данные не покидают ваше устройство
- Без сохранения: ввод/история очищаются при закрытии страницы, если не сохранить явно
❓ Вопросы и ответы
Поддерживается ли сокращение #RGB?
Пока нет; используйте 6‑значный HEX (#RRGGBB).
Диапазоны RGB и HSL?
RGB: 0–255 (целые); H: 0–360, S/L: 0–100%
Почему CMYK не совпадает с отпечатком?
CMYK зависит от бумаги, чернил, устройства и профилей ICC; здесь приблизительные значения — требуется проба
Поддерживается альфа‑канал (rgba()/hsla())?
Пока нет; используйте rgba()/hsla() либо храните альфа отдельно.
Почему превью или значения отличаются от редакторов/браузеров?
Разная цветовая менеджмент, рендеринг и калибровка экрана. Инструмент считает в sRGB; результат ориентировочный.
Широкий охват (P3/Display‑P3) поддерживается?
Пока основано на sRGB; для P3 проверяйте на целевом устройстве и с ICC‑профилями.
Можно ли конвертировать CMYK обратно в HEX/RGB?
Можно, но CMYK→экран — приблизительно; для печати нужны ICC‑профили и прогоны.