Об этих форматах цвета
HEX и RGB - стандартные форматы для экранов и CSS: HEX компактен (#3B82F6), RGB явно указывает каждый канал (0-255). HSL (тон, насыщенность, светлота) и HSV (тон, насыщенность, значение/яркость) описывают цвет ближе к тому, как его воспринимают люди - проще выбирать оттенок или вариацию одного тона. CMYK (голубой, пурпурный, жёлтый, чёрный) предназначен для печати, где цвет создаётся смешиванием краски, а не излучением света.
Что делает этот инструмент
Конвертер цветов показывает один цвет сразу в пяти записях: HEX, RGB, HSL, HSV и CMYK. Введите hex-код, задайте значения RGB, передвиньте ползунки или выберите один из 148 именованных цветов CSS — все форматы обновятся мгновенно.
У каждой строки есть своя кнопка копирования, и записана она в готовом для CSS синтаксисе, например rgb(59, 130, 246) или hsl(217, 91%, 60%). Конвертация целиком выполняется в вашем браузере.
Когда использовать
- Перенос фирменного цвета из макета в HEX в код CSS, Android или iOS, где ожидается RGB или HSL.
- Получение более светлого или тёмного оттенка того же тона изменением только светлоты в HSL.
- Проверка того, что текст на цветном фоне остаётся читаемым, с помощью Проверка Контраста Цвета.
- Составление палитры для дизайн-системы и документирование каждого цвета во всех записях, которые могут понадобиться разработчикам.
Пример
#3B82F6
rgb(59, 130, 246) · hsl(217, 91%, 60%) · hsv(217, 76%, 96%) · cmyk(76%, 47%, 0%, 4%)
#FF6347 (tomato)
rgb(255, 99, 71) · hsl(9, 100%, 64%) · hsv(9, 72%, 100%) · cmyk(0%, 61%, 72%, 0%)
Вопросы об этом инструменте
Почему CMYK лишь приближённо передаёт печатные цвета?
Экраны смешивают свет, а принтеры — краску, и каждый принтер и вид бумаги ведут себя по-своему. Значения CMYK — это математическое преобразование, поэтому, когда важен точный цвет, попросите в типографии значение на основе цветового профиля.
Чем HSL отличается от HSV?
Оба начинаются с тона и насыщенности. HSL использует светлоту, где 100% — всегда белый, а HSV — значение (яркость), где 100% — самый насыщенный вариант цвета. Графические редакторы часто используют HSV, а CSS — HSL.
Поддерживается ли прозрачность?
Непрозрачность здесь не входит в эти пять форматов. В CSS добавьте её четвёртым значением, например rgb(59 130 246 / 50%), или двумя дополнительными hex-цифрами: #3B82F680.
Этот инструмент бесплатный?
Да, он бесплатный. Без регистрации и электронной почты. Результат на этой странице.
Как получить результат?
Используйте инструмент на этой странице. Результат появится здесь, без отправки по электронной почте.