Перейти к содержимому
← Все гайды

Конвертер цветов

Один цвет, шесть записей, каждая под свою задачу. Конвертер держит их синхронно при правке любой из них: рассуждайте в удобном пространстве и копируйте то, которое ждёт ваш инструментарий.

Открыть конвертер цветов

В каком пространстве думать

HEX и RGB обращаются к экрану. HSL и HSV — для ручной правки: подвинуть светлоту, сохранить оттенок. OKLCH перцептивный, и поэтому он верное пространство для построения шкал. CMYK — для печати, и только в самом конце.

Что без потерь, а что нет

HEX, RGB, HSL и HSV — разные описания одного значения sRGB, поэтому переводы между ними обратимы точно. OKLCH умеет описывать цвета, которых sRGB не покажет, а CMYK охватывает меньше экрана — обе эти конвертации приблизительны, и инструмент показывает ближайший достижимый результат.

Ничего не уходит из браузера

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

По шагам

  1. Введите или вставьте значение в любое поле — остальные обновятся сразу.
  2. Используйте HSL или HSV, чтобы вручную сделать вариант светлее или темнее.
  3. Переходите в OKLCH, когда нужна шкала, где меняется светлота, а оттенок не уплывает.
  4. Скопируйте ту запись, которую ждёт ваш фреймворк или дизайн-инструмент.

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

Почему после обратного перевода числа иногда отличаются на единицу?

Проценты HSL и HSV округляются до целых для читаемости. Округление 60,4% до 60% и перевод обратно могут уехать на шаг в RGB. На экране это незаметно, но объясняет расхождение.

Насколько точен подбор Pantone?

Это ближайший цвет из справочного набора, вычисленный численно. Считайте его отправной точкой для разговора с типографией, а не спецификацией: краску на бумаге при реальном освещении экран гарантировать не может.

Стоит ли хранить цвета в OKLCH в продакшене?

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

✓ Скопировано