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

Переводим цвет между десятью записями, от HEX до oklch и Display-P3, и честно говорим, когда точного перевода не существует: часть цветов в sRGB не помещается.

Понимаем HEX, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color(display-p3 …), cmyk() и имена CSS — в старой записи с запятыми и в новой через пробел.

Перевести список цветов Свернуть список

Строки вида --brand: #4f46e5; тоже годятся: имя переменной сохраним, переведём только цвет.

Ближайший цвет мы подбираем так, как велит стандарт: снижаем насыщенность в oklch при том же тоне и той же светлоте, пока цвет не поместится. Обрезание каналов по 255 короче, но оно уводит тон: слишком яркий зелёный после обрезания становится другим зелёным, а не ближайшим.

На входе понимаем HEX от трёх до восьми знаков, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color(display-p3 …), cmyk(), имена CSS и голую тройку чисел через запятую — так цвет вставляют из макетов. Работают обе записи: старая с запятыми и новая через пробел с прозрачностью после дроби. На выходе те же десять форматов, каждый копируется щелчком.

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

Список до ста цветов разом

Вставьте список — по цвету в строке — и выберите целевую запись. Строки вида --brand: #4f46e5; разбираются целиком: имя переменной сохраняется, переводится только цвет. Готовый столбец копируется одной кнопкой, а в сводке видно, сколько строк переведено и сколько получили замену из-за охвата.

Что дальше

Подобрать оттенки, гармонии и проверить контраст пары поможет код цвета HTML, снять цвета с картинки — палитра из изображения, а собрать переход между цветами — генератор градиентов.

Другие инструменты