Как пользоваться
- Введите или вставьте цвет, например #1e90ff, rgb(30 144 255) или oklch(65% 0.18 250). Также можно выбрать цвет с помощью палитры.
- Проверьте образец цвета, чтобы убедиться, что он выглядит как нужно.
- Скопируйте нужный формат из списка. Альфа-канал сохраняется в значениях с прозрачностью.
Как это работает
Поддерживаемые форматы: HEX из 3, 4, 6 или 8 цифр (4-я и 8-я цифры задают альфа-канал), rgb() и rgba() с числами или процентами, hsl() и hsla(), hwb(), oklch() и cmyk() с процентами или числами от 0 до 100. Поддерживаются как классический синтаксис с запятыми, так и современный синтаксис с пробелами и «/ alpha». Для оттенка можно использовать deg, turn, rad и grad. Именованные цвета, например «tomato», не распознаются — выберите цвет с помощью палитры или введите код.
Все преобразования выполняются через sRGB. HSL и HWB — это простое преобразование значений RGB, поэтому они конвертируются точно. OKLCH — перцептивная цветовая модель: одинаковые изменения светлоты визуально воспринимаются примерно одинаково, поэтому она удобна для создания палитр. Расчёт выполняется по опубликованным матрицам OKLab. Некоторые цвета OKLCH выходят за пределы цветового охвата sRGB. Инструмент отмечает это и показывает ближайший цвет, доступный для отображения.
CMYK рассчитывается по распространённой упрощённой формуле (K = 1 − наибольший канал RGB). Реальный результат печати зависит от бумаги, чернил и ICC-профиля, поэтому используйте эти значения как отправную точку, а не как спецификацию для печати.
Примеры
От HEX-кода бренда к CSS
В брендбуке указан код #0b5d1e. Вставьте его, чтобы получить rgb(11, 93, 30) для старых версий CSS, hsl(133.9, 78.8%, 20.4%) для ручной настройки светлоты и значение oklch() для современных CSS-функций работы с цветом.
Как читать цвет с прозрачностью
rgba(0, 0, 0, 0.5) преобразуется в #00000080. Последние две цифры HEX-кода (80) задают альфа-канал: 128 из 255, то есть примерно 50 %.
Проверка значения OKLCH из файла дизайна
oklch(70% 0.4 150) — это очень насыщенный зелёный цвет, который не могут отобразить экраны sRGB. Инструмент отмечает это и показывает ближайший цвет sRGB, чтобы вы знали, что на большинстве экранов дизайн будет выглядеть иначе.
Часто задаваемые вопросы
Почему при преобразовании в HSL и обратно HEX иногда отличается на единицу?
В HEX для каждого канала используются целые числа от 0 до 255. Значения в других форматах округляются при отображении (HSL — до одного знака после запятой), поэтому при обратном преобразовании округлённого значения результат может отличаться на единицу. Если нужно сохранить исходное значение точно, скопируйте HEX.
Подходит ли значение CMYK для печати?
Нет, сам по себе этот результат не гарантирует точность для печати. Он рассчитан по простой формуле без цветового профиля. В принтерах используются профили, например FOGRA или GRACoL, которые дают другие значения. Уточните настройки у типографии или выполните преобразование в приложении с управлением цветом.
Что такое OKLCH и можно ли использовать его в CSS?
OKLCH описывает цвет через воспринимаемую светлоту, chroma (насыщенность) и оттенок. В текущих версиях основных браузеров поддерживается oklch() в CSS. Если нужно поддерживать старые браузеры, добавьте запасной вариант в HEX или rgb().
Что означает 8-значный HEX-код?
#RRGGBBAA: последние две цифры задают непрозрачность — от 00 (полная прозрачность) до ff (полная непрозрачность). В 4-значном формате #RGBA действует тот же принцип, но для каждого канала используется одна цифра.
Конфиденциальность
Цвета преобразуются в вашем браузере. Введённые данные никуда не отправляются и не сохраняются.