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

Как пользоваться конвертером цветов

1. 1. Введите цвет. Вставьте или наберите его в любой записи, которую принимает поле: #336699, rgb(51 102 153), hsl(210 50% 40%), hwb(210 20% 40%), cmyk(67%, 33%, 0%, 40%) или название CSS, например rebeccapurple. Числа 51 102 153 без обозначения читаются как RGB.
2. 2. Или выберите в палитре. Пипетка задаёт цвет и сохраняет прозрачность, которую вы уже ввели.
3. 3. Скопируйте нужное. У каждой записи своя кнопка копирования, а Копировать CSS даёт значения HEX, RGB, HSL и OKLCH как пользовательские свойства для таблицы стилей.
4. 4. Проверьте название. Инструмент показывает ключевое слово CSS, если ваш цвет точно совпадает с ним (rebeccapurple — это #663399), и ближайшее ключевое слово, если не совпадает.

Как работают преобразования

Всё переводится через sRGB — цветовое пространство, в котором браузер рисует. HEX — это просто RGB в шестнадцатеричной записи: #336699 — это красный 0x33 = 51, зелёный 0x66 = 102, синий 0x99 = 153. Остальные записи перераспределяют те же три числа.

• HSL описывает цвет через оттенок (угол на цветовом круге, 0–360°), насыщенность и светлоту. Если наибольший канал — max, а наименьший — min (каждый делится на 255), светлота равна (max + min) ÷ 2, а насыщенность — (max − min) ÷ (1 − |2L − 1|). Оттенок определяется тем, какой канал наибольший.
• HSV (также HSB) сохраняет тот же оттенок, но яркость измеряет как max, а насыщенность как (max − min) ÷ max. Это модель, которую рисуют большинство палитр выбора цвета.
• HWB — это белизна (min) и чернота (1 − max) поверх чистого оттенка; с ней проще работать, чем с HSL, когда нужен тон или оттенок тени. Если белизна и чернота вместе дают 100%, результат — серый.
• CMYK показан как простое устройственное преобразование: K = 1 − max, затем каждое из C, M и Y равно (1 − канал − K) ÷ (1 − K). Здесь нет ни красок, ни бумаги, ни профиля.
• OKLCH — это светлота, хрома (насыщенность) и оттенок в пространстве OKLab Бьёрна Оттоссона, которое CSS Color 4 поддерживает как oklch(). Равные шаги по L выглядят гораздо ближе к равным шагам яркости, чем в RGB или HSL.

Почему CMYK здесь — не цвет печати

Экраны складывают свет в красном, зелёном и синем; принтеры наносят голубую, пурпурную, жёлтую и чёрную краски на бумагу. Гаммы двух систем различаются, а то, какие краски окажутся на странице, зависит от бумаги, печатной машины и описывающего их профиля ICC. Формула, которая работает только по RGB, ничего из этого знать не может, поэтому CMYK выше — это запись, а не прогноз: чистый экранный синий #0000ff становится 100% голубого и 100% пурпурного, что печатается как более тусклый фиолетовый. Для плаката или печатного рисунка передайте типографии макет в RGB и попросите их профиль или конвертируйте с этим профилем в графическом редакторе.

Округление, ограничение и прозрачность

• Округление. HEX и rgb() хранят целые числа от 0 до 255, поэтому цвет, введённый как hsl(210 50% 41%), округляется до ближайшего 8-битного значения. Обратное преобразование даёт немного другой HSL — сетка из 8 бит грубее, чем у HSL.
• Каналы вне диапазона. Значения вне диапазона ограничиваются, как это делают браузеры: rgb(300 0 0) — это #ff0000, а отрицательный канал становится 0.
• Единицы оттенка. Принимаются deg, grad, rad и turn, а оттенок циклический: −150° — то же, что 210°.
• Прозрачность. Работают #rrggbbaa, #rgba и / 50%. Прозрачность хранится в 8 битах в 8-значном HEX, поэтому 50% становится 80 и при обратном чтении даёт 50,2%.

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

Как перевести HEX в RGB?

Разбейте шесть цифр на три пары и прочитайте каждую пару как число в шестнадцатеричной системе: #336699 — это 33, 66 и 99, то есть 51, 102 и 153. Вставьте HEX-код в поле — и сразу появятся RGB, а также HSL, HWB, HSV, CMYK и OKLCH.

В чём разница между HSL и HSV?

Оба используют один и тот же угол оттенка. HSL делает белый цвет полностью светлым при любой насыщенности, поэтому его середина — чистый цвет; HSV ставит чистый цвет при полной яркости и насыщенности, а белый — при нулевой насыщенности. HSL — то, что CSS поддерживает как hsl(), а HSV (или HSB) показывают большинство палитр выбора цвета.

Правильно ли значение CMYK для печати?

Нет. Это наивное преобразование из RGB без красок, бумаги и профиля ICC, поэтому оно описывает те же числа иначе, а не предсказывает, что напечатает станок. Цвета вне гаммы принтера, например яркие экранные синие и зелёные, будут печататься тусклее. Для всего важного используйте профиль вашей типографии.

Что означает ближайшее название CSS?

CSS определяет 148 ключевых слов цвета. Если ваш цвет точно совпадает с одним из них, инструмент показывает его без оговорок. Иначе он показывает ключевое слово, ближайшее в OKLab — пространстве, устроенном так, что расстояние соответствует воспринимаемому различию. Это полезно, чтобы назвать цвет в комментарии, но не заменяет код.

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

HEX и RGB хранят каждый канал как одно из 256 значений, а HSL не отображается на эту сетку один к одному. Цвет, введённый в HSL, округляется до ближайшего значения RGB, а показанный HSL вычисляется уже из округлённого значения. Если начинать с HEX-кода, каждое преобразование точно до показанной точности.

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

Нет. Преобразование — обычная арифметика в вашем браузере; ничего из введённого не загружается и не сохраняется.