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

Три способа записать один и тот же цвет

Экран смешивает любой цвет из красного, зелёного и синего света, а HEX, RGB и HSL — просто три записи одних и тех же 16,7 миллиона комбинаций в цветовом пространстве sRGB. Какая нужна, зависит от того, куда пойдёт значение.

• HEX, например #2563eb: три пары шестнадцатеричных цифр для красного, зелёного и синего, каждая от 00 до ff (от 0 до 255). Компактная и удобная для копирования запись — стандарт в инструментах дизайна, брендбуках и большей части CSS.
• RGB, например rgb(37, 99, 235): те же три канала в десятичном виде. Удобно, когда код работает непосредственно с числами — при рисовании на canvas, обработке изображений, в цветовых ресурсах Android или в Pillow на Python.
• HSL, например hsl(221, 83%, 53%): тон, насыщенность и светлота. Единственная из трёх записей, которую человек может подстраивать осмысленно, поэтому её так любят при создании палитр и тем оформления.

Короткая форма HEX #36f — это сокращение для #3366ff, где каждая цифра удваивается. Она работает только тогда, когда обе цифры в каждой паре одинаковы.

Как читать значения HSL

HSL описывает цвет так, как о нём говорят люди:

• Тон — положение на цветовом круге в градусах: 0 — красный, 60 — жёлтый, 120 — зелёный, 180 — голубой, 240 — синий, 300 — пурпурный, а 360 снова возвращает к красному.
• Насыщенность — от 0%, нейтрального серого, до 100%, самого яркого варианта этого тона.
• Светлота — от 0%, всегда чёрного, через 50%, чистый цвет, до 100%, всегда белого.

Именно это делает HSL практичным для дизайн-систем. Зафиксируйте тон и насыщенность, меняйте светлоту шагами от 95% до 15% — и получится шкала от светлых оттенков к тёмным для кнопок, фонов и рамок. Поверните тон на 180 градусов, чтобы получить комплементарный акцент, или на 30 градусов в любую сторону — для аналоговых цветов.

Одно ограничение: светлота в HSL — это математическое среднее, а не то, насколько ярким цвет кажется глазу. Жёлтый со светлотой 50% выглядит гораздо ярче синего с теми же 50%, поэтому цвета с одинаковым L могут давать совершенно разный контраст с белым текстом. Всегда проверяйте контраст на реальной паре цветов.

Что принимает конвертер

Вставьте или введите значение в поле либо выберите цвет в палитре — строки HEX, RGB и HSL обновятся одновременно вместе с крупным превью. Принимаются:

• #rgb, #rgba, #rrggbb и #rrggbbaa, с # или без.
• 148 именованных цветов CSS, например tomato или rebeccapurple.
• rgb(37, 99, 235) и rgba(37, 99, 235, 0.5) или современный синтаксис через пробелы rgb(37 99 235 / 50%). Каналы могут быть десятичными числами или процентами.
• hsl(221, 83%, 53%), hsla(…) и hsl(221.5 83% 53%). У тона может быть единица deg, turn, rad или grad; знаки процента необязательны.
• Три числа без обёртки: 37, 99, 235 или 37 99 235.

Значения вне диапазона обрезаются по границе: rgb(300, 0, 0) превращается в красный 255. Тон от 360 и выше или отрицательный тон заворачивается по кругу. Дробные значения каналов округляются до целых.

Альфа — в 4- или 8-значном HEX, в rgba(), hsla() или после / — считывается, но игнорируется, поэтому результаты всегда полностью непрозрачные.

Ползунки R, G и B под результатами меняют по одному каналу. С их помощью удобно чуть-чуть сдвинуть цвет в тёплую или холодную сторону, наблюдая, как обновляются превью и все три записи.

Почему при обратной конвертации значения сдвигаются на единицу

Преобразования между HSL и RGB дают дроби, а каждый результат здесь округляется до целых, как обычно пишут в CSS. В HSL меньше целочисленных комбинаций, чем в RGB, — примерно 3,6 миллиона против 16,7 миллиона, поэтому несколько цветов RGB делят одно округлённое значение HSL.

Например, #2563eb переводится в hsl(221, 83%, 53%), но если ввести это значение HSL обратно, получится #2463eb: красный равен 36, а не 37. Глазу разница незаметна, но она важна, если брендбук задаёт точное значение HEX. Считайте источником истины HEX или RGB, а HSL используйте для поиска вариаций, а не для хранения официальных цветов.

Как использовать результат

• В CSS все три строки можно вставлять как есть. Самый аккуратный способ переиспользовать их — пользовательские свойства вроде --brand: #2563eb;.
• Для иконки сайта сначала определитесь с фирменным цветом здесь, примените его к логотипу в графическом редакторе, а затем превратите логотип в полный набор иконок с помощью генератора favicon.
• Для фирменного QR-кода сохраняйте сильный контраст: тёмный передний план со светлотой около 20–30% на белом надёжно сканируется, а светлые или малонасыщенные цвета часто не считываются. Проверить это можно в генераторе QR-кодов.
• С печатью всё иначе. Экраны работают в RGB, принтеры — в CMYK, и яркий экранный синий может оказаться невоспроизводимым краской. Если точный цвет важен, попросите в типографии цветопробу.

Все преобразования выполняются в вашем браузере.