Веб-разработка

Color Converter

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

The same color can be written differently depending on context: HEX and RGB are convenient for code, HSL is intuitive for picking a hue and lightness, and CMYK is for print. This tool converts between all of them at once.

How to use it

Which format to use when

Things to keep in mind

CMYK on screen is only an approximation — the exact printed color depends on the printer, paper, and color profile used.

Conversion between color spaces isn't always exact for extreme, highly saturated colors, due to differences in gamut coverage between models.

Статья об этом инструменте: HEX, RGB, HSL: почему для цвета существует столько записей

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

Как конвертер обрабатывает альфа-канал (прозрачность)?

Альфа поддерживается в HEX (#RRGGBBAA), RGBA и HSLA — то, что вы вводите, переносится в другие форматы, поддерживающие прозрачность, тогда как форматы без альфа-канала, как обычный CMYK, просто игнорируют её.

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

CMYK — это модель, ориентированная на печать, без единой фиксированной формулы для конвертации в/из RGB, поэтому циклическая конвертация может сместить значения на погрешность округления в одну-две единицы; визуально цвет остаётся практически тем же.

Отправляются ли мои данные о цвете куда-либо?

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

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

OKLCH описывает цвет через яркость (L), хрому (C) и оттенок (H), но в отличие от HSL учитывает то, как человеческий глаз реально воспринимает яркость — изменение L в OKLCH не искажает воспринимаемую насыщенность цвета, поэтому переходы между оттенками выглядят более равномерными.

Что значит, что цвет «вне гаммы» (out of gamut)?

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

Статьи: Веб-разработка

Минификация CSS: что именно удаляется из файла и зачем

Почему минифицированный CSS работает точно так же в браузере, хотя и становится нечитаемым для человека.

Минификация JavaScript: разница между минификацией и обфускацией

Почему минифицированный код всё ещё можно прочитать при желании, а обфусцированный — нет.

Минификация HTML: почему пробелы в разметке вообще имеют значение

Почему удаление пробелов в <pre> или textarea может сломать вид страницы, в отличие от других мест.

CSS-градиенты: чем linear отличается от radial и conic

Почему conic-gradient подходит для круговых диаграмм, а radial — для эффекта светового пятна.

Алгоритм Луна: как номер карты проверяют на корректность

Почему валидный по алгоритму Луна номер карты не означает, что такая карта реально существует.

IBAN: как устроен международный номер банковского счёта

Почему первые две буквы в IBAN — это код страны, а не часть номера счёта.

QR-коды: как в квадрате из пикселей помещается ссылка

Почему QR-код с логотипом по центру всё ещё сканируется, хотя часть рисунка перекрыта.

Штрихкоды: чем Code 128 отличается от EAN-13

Почему на товарах в магазинах почти всегда EAN-13, а не Code 128.

Placeholder-изображения: зачем нужны картинки-заглушки в разработке

Почему верстальщики намеренно вставляют серые прямоугольники вместо реальных фотографий на этапе разработки.