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

Конвертер цветов переводит между форматами HEX, RGB, HSL, HSV и CMYK. Выберите цвет или введите значение — результат сразу отобразится во всех форматах с визуальным предпросмотром.

Выбирайте по визуальному кругу или вводите значение в любое из пяти связанных полей — HEX, RGB, HSL, HSV, CMYK — и остальные обновляются в реальном времени. HSV (иногда пишется HSB) идёт вместе с HSL — это удобно, когда работаешь со значениями из Photoshop или Sketch, которых нет в чисто CSS-инструментах.

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

1. Шаг 1 — Выберите цвет визуально с помощью интерактивной палитры или введите значение в любое поле формата.
2. Шаг 2 — Все поля форматов обновляются разом, и вы всегда видите соответствующее значение в каждом формате.
3. Шаг 3 — Скопируйте значение любого формата или используйте палитру для точной настройки. Все поля обновляются в реальном времени.

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

• Подобрать цвет через пипетку и скопировать соответствующий CMYK в файл Illustrator.
• Подкрутить HSV из палитры Photoshop и прочитать HSL для CSS.
• Собирать палитру с нуля, перетаскивая выбор и фиксируя HEX на каждом шаге.

Результат

Дизайнер-полиграфист получает веб-цвет rgb(0, 128, 255) и ему нужны значения CMYK. Инструмент преобразует его в cmyk(100%, 50%, 0%, 0%) для точного воспроизведения в печати.

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

Зачем сразу и HSL, и HSV, если они похожи?

HSL живёт в CSS и большинстве веб-инструментов, а HSV (он же HSB) стандартен в Photoshop, Sketch и системных пипетках macOS и Windows. Дизайнеры постоянно переключаются между этими мирами, и инструмент выдаёт оба сразу, чтобы убрать лишнее звено перевода.

Можно ли править любое поле или только пипетку?

Редактируются все поля. Введите HEX или поменяйте числа в RGB / HSL / HSV / CMYK — пипетка и остальные поля подстроятся. Цвет остаётся синхронизированным, какое поле бы вы ни изменили.

Почему у серого в HSL и тон, и насыщенность равны нулю?

У чистого серого нет тона, насыщенность — ноль. По соглашению, когда насыщенность нулевая, HSL фиксирует тон тоже как 0: серый не имеет определённого места на цветовом круге. Математически верно, но легко спутать с «нет данных».

Что значит канал K в CMYK?

K — от Key, на практике это чёрный. Добавление K вместо смешивания C+M+Y для получения почти чёрного экономит дорогие цветные чернила и избавляет от грязно-коричневого, который часто получается у чистой CMY. Значение K инструмент считает сам.

Работает ли пипетка со стилусом или сенсорным экраном?

Работает. Пипетка — это стандартный браузерный input, поэтому реагирует на мышь, палец, стилус и тачпад одинаково. На сенсорных устройствах по тапу открывается системный пикер, на десктопе по клику разворачивается круг. Для точных значений удобнее числовые поля.

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