Конвертер цветов
Переводим цвет между десятью записями, от HEX до oklch и Display-P3, и честно говорим, когда точного перевода не существует: часть цветов в sRGB не помещается.
Понимаем HEX, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color(display-p3 …), cmyk() и имена CSS — в старой записи с запятыми и в новой через пробел.
Не разобрали эту запись.
Примеры годных: #f60, rgb(255 102 0),
oklch(0.7 0.2 40), orange.
Щелчок по значению копирует его.
Что стоит знать про этот цвет
Перевести список цветов Свернуть список
Строки вида --brand: #4f46e5; тоже годятся:
имя переменной сохраним, переведём только цвет.
| Было | Стало |
|---|
Готовый столбец
Ближайший цвет мы подбираем так, как велит стандарт: снижаем насыщенность в oklch при том же тоне и той же светлоте, пока цвет не поместится. Обрезание каналов по 255 короче, но оно уводит тон: слишком яркий зелёный после обрезания становится другим зелёным, а не ближайшим.
На входе понимаем HEX от трёх до восьми знаков, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color(display-p3 …), cmyk(), имена CSS и голую тройку чисел через запятую — так цвет вставляют из макетов. Работают обе записи: старая с запятыми и новая через пробел с прозрачностью после дроби. На выходе те же десять форматов, каждый копируется щелчком.
Перевод в CMYK по формуле ориентировочный: настоящий зависит от профиля печати, бумаги и краски. Для макета в типографию цвет задают в её профиле. Мы показываем формульное значение и прямо пишем, что оно прикидочное, — у других конвертеров эта оговорка не встречается.
Список до ста цветов разом
Вставьте список — по цвету в строке — и выберите целевую запись. Строки
вида --brand: #4f46e5; разбираются целиком: имя переменной
сохраняется, переводится только цвет. Готовый столбец копируется одной
кнопкой, а в сводке видно, сколько строк переведено и сколько получили
замену из-за охвата.
Что дальше
Подобрать оттенки, гармонии и проверить контраст пары поможет код цвета HTML, снять цвета с картинки — палитра из изображения, а собрать переход между цветами — генератор градиентов.
Другие инструменты
Просмотр исходного кода страницы
Исходный HTML страницы глазами робота Яндекса или Google
Визуальный HTML-редактор
Пишете как в текстовом редакторе — получаете готовый HTML
Код цвета HTML
Код цвета в HEX, RGB, HSL и HSB, с проверкой контраста
Эффект стекла в CSS
Стекло с проверкой читаемости надписи и запасным вариантом
Конвертер CSS в SCSS и обратно
CSS в SCSS со вложенностью и обратно, со сверкой результата
Конструктор сеток CSS Grid
Сетка под три экрана с готовым HTML и проверкой порядка блоков