Конвертер цвета: HEX, RGB, HSL, OKLCH, LAB и CMYK

Здесь шкала идёт приложением к цвету. Если нужна сама шкала — с разбором каждой ступени, её контрастом и выбором формата, — этим занят отдельный генератор цветовой шкалы.

• Протанопия — нет красных колбочек. Около 1 % мужчин. Красное темнеет и сходится с зелёным.
• Дейтеранопия — нет зелёных колбочек. Самый частый случай, около 1 % мужчин. Красное и зелёное становятся одним цветом при почти той же светлоте.
• Тританопия — нет синих колбочек. Редкость, примерно 1 на 10 000. Синее уходит в зелёное, жёлтое — в розовое.

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

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

1. Вставьте цвет как есть: #3366CC, 3366CC без решётки, rgb(51 102 204), rgba(51,102,204,.5), hsl(220 60% 50%), hwb(220 20% 20%), lab(45 8 -55), lch(45 56 278), oklch(53.25% 0.1679 262.29), color(display-p3 .2 .4 .8) или английское имя вроде steelblue.

2. Щёлкните по любому значению справа — оно окажется в буфере целиком и в том виде, в каком вставляется в код. Кнопка «Скопировать все форматы» кладёт весь список сразу.

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

4. Строка охвата говорит, где цвет живёт: в sRGB, только в P3 или только в Rec2020. Если он шире sRGB, рядом печатается запасное значение — тот же тон и та же светлота, но с насыщенностью до предела sRGB.

5. В блоке контраста впишите настоящий фон вашей страницы вместо белого. Кроме коэффициента WCAG там считается APCA Lc: он честнее к тёмным темам и к тонкому шрифту.

6. Ссылка на результат живёт в адресной строке: цвет попадает в неё сам, кнопка «Скопировать ссылку» отдаёт адрес целиком. Последние двенадцать цветов остаются полосой под полем — они хранятся в браузере и никуда не уходят.

Формула и что в неё входит

• HEX → RGB — каждая пара шестнадцатеричных знаков — один канал: 00 это 0, FF это 255
• RGB → HSL — тон, насыщенность и светлота выводятся из самого яркого и самого тусклого канала
• HWB — тот же тон, но вместо насыщенности и светлоты — доля подмешанного белого и доля чёрного
• HSV — он же HSB: тон, насыщенность и значение, где значение — просто самый яркий канал
• Линейный sRGB — канал делится на 255 и освобождается от гамма-кривой — то же преобразование, что в формуле контраста WCAG
• XYZ — три числа, не привязанные ни к какому экрану; через них идёт дорога в LAB и обратно в P3 и Rec2020
• LAB и LCH — CIE Lab 1976 при осветителе D50 — так их определяет CSS Color 4. LCH — та же точка в полярных координатах
• LMS — три числа, приближающие отклик трёх типов колбочек глаза; из каждого берётся кубический корень
• OKLab — L — светлота, a — ось от зелёного к красному, b — ось от синего к жёлтому
• OKLCH — та же точка в полярных координатах: C — расстояние от серой оси, H — угол в градусах
• CMYK — простой перевод без цветового профиля: K = 1 − max(R, G, B), остальное — доли от остатка

Разбор примера: #3366CC

Исходные данные — те же, что стоят в полях по умолчанию: их можно пересчитать в уме и убедиться, что инструмент не врёт.

• Цвет #3366CC

1. Разбираем по два знака: 33 = 51, 66 = 102, CC = 204. Получилось rgb(51, 102, 204).

2. Самый яркий канал 204, самый тусклый 51. Светлота HSL — их среднее: (204 + 51) ÷ 2 = 127,5, а это ровно половина от 255.

3. Насыщенность: размах 204 − 51 = 153, делим на 255 — выходит 60 %.

4. Максимум приходится на синий, поэтому тон отсчитывается от 240°: 240 + 60 × (51 − 102) ÷ 153 = 240 − 20 = 220°.

5. HWB берёт те же крайние каналы иначе: белого в цвете 51 ÷ 255 = 20 %, чёрного 1 − 204 ÷ 255 = 20 %. Тон тот же, 220°.

HSL: hsl(220, 60%, 50%). HWB: hwb(220 20% 20%). Тот же цвет в OKLCH — oklch(53.25% 0.1679 262.29). Дорога туда идёт через XYZ и OKLab и в уме не считается, зато светлота 53 % там означает настоящую середину по восприятию, чего про 50 % в HSL сказать нельзя. Ближайшее имя CSS — royalblue, расхождение по OKLab заметное: имена стоят редко и точного совпадения обычно нет.

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

• Почему у одного цвета в HSL светлота 50 %, а в OKLCH 53 %?

  Потому что это разные величины. В HSL светлота — среднее между самым ярким и самым тусклым каналом, чистая арифметика над числами. В OKLCH светлота построена так, чтобы совпадать с тем, что видит глаз. У синих цветов эти два числа расходятся сильнее всего.

• Что значит «только в P3» и «только в Rec2020»?

  Что цвет ярче или насыщеннее, чем умеет показать обычный экран sRGB. Display P3 — охват современных экранов Apple и части ноутбуков, Rec2020 — охват, до которого серийные экраны ещё не доросли. Такой цвет можно записать в CSS через color(display-p3 …) или oklch(), и на подходящем экране он покажется как есть, а на обычном браузер сам сведёт его в sRGB. Инструмент печатает готовое запасное значение, чтобы можно было положить его рядом в @supports или просто взять вместо исходного.

• Почему CMYK помечен как приблизительный?

  Потому что честный перевод в CMYK требует профиля печати: одна и та же четвёрка чисел на офсете, на цифре и на газетной бумаге даёт разные цвета. Здесь считается простая формула без профиля — она годится, чтобы прикинуть, и не годится, чтобы отдавать в типографию. Для печати цвет берут из справочника краски, а не из конвертера.

• Что происходит, если введённый OKLCH не помещается в sRGB?

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

• Чем APCA отличается от коэффициента WCAG?

  WCAG 2 считает отношение яркостей и отвечает «проходит или нет». Он одинаково строг к светлому тексту на тёмном и к тёмному на светлом, хотя глаз эти два случая читает по-разному, и почти не замечает толщину шрифта. APCA считает контраст по восприятию, различает прямую и обратную полярность и даёт число Lc от −108 до 106. Ориентир: Lc 90 — мелкий текст, Lc 60 — обычный, Lc 45 — крупный, Lc 30 — граница различимости для нетекстовых элементов. APCA пока черновик WCAG 3, поэтому формальную проверку доступности всё равно проходят по WCAG 2 — обе цифры показаны рядом именно поэтому.

• Насколько точна имитация дальтонизма?

  Это модель, а не диагноз. Матрицы Бреттеля — Виено — Мольона описывают полное отсутствие одного типа колбочек, то есть тяжёлый случай. Куда чаще встречается ослабленное восприятие, при котором цвета не сливаются полностью, а различаются хуже. Смотреть на образцы стоит так: если при какой-то из трёх моделей два ваших цвета стали одинаковыми, значит на них нельзя вешать смысл без второго признака.

• Как посчитано «ближайшее имя CSS»?

  Все 148 ключевых слов один раз при загрузке разбираются самим браузером через canvas, переводятся в OKLab, и берётся то, до которого евклидово расстояние меньше всего. Расхождение ΔE — это расстояние в OKLab, умноженное на сто, чтобы читалось цифрой. Меньше единицы — цвета глазом не различить, около двух-трёх — разница заметна на большой заливке, больше пяти — это просто соседний цвет, а не тот же.

• Куда уходит введённый цвет?

  Никуда. Все преобразования выполняются в браузере, страница не делает ни одного сетевого запроса после загрузки. Цвет попадает только в адресную строку — чтобы ссылку можно было переслать — и в память самого браузера, где хранятся последние двенадцать цветов. Очистить их можно кнопкой в конце этой полосы.