Конвертер и палитра цвета
Введите любую запись цвета — получите остальные форматы и шкалу оттенков, с которой уже можно работать в макете.
- Бесплатно
- Без регистрации
- Работает в вашем браузере — ничего не отправляется
// шкала оттенков — клик копирует
Зачем один цвет в трёх записях
HEX, RGB и HSL описывают один и тот же цвет, просто разными координатами. HEX удобен в макете и коде, RGB — когда цвет считают программно или добавляют прозрачность, HSL — когда из цвета нужно сделать семью: оставить тон и двигать насыщенность со светлотой. Перевод между ними точный, здесь ничего не теряется.
Практическая польза HSL видна на кнопках. Состояния наведения и нажатия не подбирают на глаз — берут базовый цвет и сдвигают светлоту на несколько процентов. Так состояния остаются роднёй, а не тремя случайными цветами, которые просто оказались рядом.
Читать дальше
Сразу предупреждение о светлоте в HSL. Это геометрическая величина, а не воспринимаемая яркость: жёлтый и синий с одинаковым значением L человеческий глаз видит совершенно по-разному. Поэтому шкалу оттенков, сделанную равными шагами, всё равно проверяют на контраст, а не принимают на веру.
Чего инструмент не делает. Он не управляет цветовыми профилями и не обещает, что оттенок в печати совпадёт с экраном, — для печати есть CMYK и цветопроба, а не конвертер на сайте. И ещё: он не считает контраст, для этого есть отдельная проверка контрастности по WCAG.
Частые вопросы
Чем HSL лучше HEX в работе?
Тем, что из него легко сделать шкалу. Зафиксируйте тон и насыщенность, поменяйте светлоту — получите согласованную линейку оттенков вместо набора случайных цветов.
Как записать прозрачность?
Через RGBA или восьмизначный HEX, где последние два знака задают альфа-канал. Оба варианта понимают все современные браузеры.
Почему цвет на телефоне выглядит иначе, чем на мониторе?
Из-за разных матриц и цветовых профилей. Значение цвета одинаковое, показ разный — поэтому важные решения проверяют на живом устройстве, а не только в макете.
Подойдёт ли эта палитра для печати?
Нет. Для печати цвет считают в CMYK и утверждают по цветопробе — экранный оттенок там лишь ориентир.
Ещё инструменты
Инструмент показал проблему, а чинить некому?
Мы делаем сайты, магазины и поддержку — от адреса домена до почты, которая не попадает в спам.
Нажимая кнопку, вы соглашаетесь с политикой конфиденциальности
Харьков · Киев
