Что такое Конвертер цветовых кодов?

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

Введите или вставьте значение в любом формате (#FF5733, rgb(255,87,51), hsl(11,100%,60%), cmyk(0%,66%,80%,0%), hsv(11,80%,100%)) или имя CSS-цвета, например tomato или cornflowerblue. Инструмент сам определит формат и заполнит остальные четыре. Образец цвета рядом подтверждает, что значение распознано верно, а клик по нему открывает встроенный пикер устройства, чтобы выбрать любой оттенок визуально. Удобно, когда дизайн-файл отдаёт один формат, а CSS, дизайн-программа или типография ждут другой.

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

1. Шаг 1 - Введите цветовое значение в любом поддерживаемом формате или имя CSS-цвета, например tomato (например, #FF5733, rgb(255,87,51), hsl(11,100%,60%)).
2. Шаг 2 — Инструмент автоматически определяет формат ввода и преобразует его во все остальные форматы в реальном времени.
3. Шаг 3 - Скопируйте любое преобразованное значение одним кликом или кликните по предпросмотру цвета, чтобы открыть визуальный пикер и выбрать новый оттенок.

Когда использовать

• Перевод HEX фирменного цвета в CMYK перед отправкой в типографию.
• Чтение RGB со скриншота и обратное преобразование в HEX для CSS.
• Сверка HSL-оттенка от дизайнера с эталонным HEX в брендбуке.

Результат

У веб-разработчика есть фирменный цвет #2196F3 из дизайн-макета, и ему нужно значение RGB для CSS-анимации — инструмент мгновенно показывает rgb(33, 150, 243), а также эквиваленты в HSL и CMYK.

Частые вопросы

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

Экран использует аддитивный RGB, печать — субтрактивный CMYK. Инструмент применяет стандартную формулу, но коммерческие профили (Coated FOGRA39, GRACoL) подстраивают проценты под реальные чернила и бумагу. Считайте выводимый CMYK близкой отправной точкой.

Что произойдёт, если я введу некорректный цвет вроде #ZZZ?

Остальные поля останутся пустыми, образец цвета не отобразится. Результаты обновляются только когда вход соответствует валидному шаблону HEX, RGB, HSL или CMYK, поэтому неполное и сбивающее с толку преобразование не появится.

Сокращённые HEX вроде #F53 работают?

Да. Трёхсимвольный HEX — короткая форма шестизначного: #F53 эквивалентен #FF5533, конвертер принимает оба варианта. Вывод всегда даётся в полной шестизначной форме, чтобы при копировании в другое место не возникло двусмысленности.

Чем HSL отличается от HSV?

Оба формата начинаются с оттенка, но HSL описывает светлоту от чёрного к белому, а HSV (он же HSB) описывает яркость относительно чистого цвета. Конвертер теперь показывает HSL и HSV рядом, потому что CSS использует HSL, а Photoshop — HSV, и дизайнерам часто приходится переводить значения из одного в другой.

Поддерживает ли инструмент прозрачность или альфа-канал?

В этом конвертере — нет. HEX, RGB, HSL и CMYK здесь всегда непрозрачные. Для прозрачной заливки используют восьмизначный HEX (#RRGGBBAA) или rgba(), они выходят за рамки четырёх форматов, между которыми работает этот инструмент.

Похожие инструменты