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

Что делает конвертер цветов

Конвертер цветов преобразует один цвет между тремя форматами, на которые опирается фронтенд-работа: HEX (#3b82f6), RGB или RGBA (rgb(59, 130, 246)) и HSL или HSLA (hsl(217, 91%, 60%)). Введите значение в любом из них или воспользуйтесь встроенным средством выбора цвета, и он покажет эквиваленты в других форматах рядом с живым образцом, чтобы вы точно видели, с чем работаете. Это инструмент для того, чтобы перенести цвет из дизайн-макета в CSS, согласовать фирменный оттенок между форматами, подкорректировать оттенок в HSL, где правки ощущаются интуитивно, или добавить прозрачность через альфа-канал.

Как форматы соответствуют друг другу

Каждая модель описывает один и тот же цвет по-разному. HEX упаковывает каналы красного, зелёного и синего в пары шестнадцатеричных цифр; RGB перечисляет те же каналы как значения 0–255; HSL вместо этого использует оттенок (угол от 0 до 360° вокруг цветового круга), насыщенность и светлоту в процентах, и именно поэтому в HSL гораздо проще «сделать это чуть светлее» или «сдвинуть к зелёному». Конвертер читает все распространённые сокращения и разворачивает их для вас:

• 3-значный HEX, такой как #f00, разворачивается удвоением каждой цифры до #ff0000.
• 4- и 8-значный HEX и формы rgba() и hsla() несут альфа-канал (непрозрачность), который сохраняется при преобразовании.
• Ввод в процентах принимается там, где формат это допускает, и каждый результат округляется до разумной, готовой к копированию точности.

Внутри инструмент преобразует всё, что вы вводите, в RGB как общую основу, а затем выводит HSL по стандартной математике оттенка, цветности и светлоты, сохраняя по пути любое значение альфа. Обратите внимание, что он работает с этими числовыми форматами, а не с ключевыми словами цветов CSS, поэтому вставляйте #ff69b4, а не слово «hotpink», и все значения интерпретируются в стандартном пространстве sRGB, которое используют ваш браузер и мониторы.

Зачем вообще переключаться между форматами

Разные задачи требуют разных моделей. HEX — это компактная форма, которую вы вставляете прямо в таблицу стилей. RGB — то, что нужно, когда вы делаете композитинг, работаете с холстом или проверяете коэффициент контрастности для доступности, поскольку расчёты WCAG начинаются с каналов красного, зелёного и синего. HSL — любимец дизайнеров для построения темы: зафиксируйте оттенок, а затем шагайте светлотой вверх и вниз, чтобы сгенерировать последовательный набор более светлых и тёмных оттенков, или вращайте оттенок, чтобы вывести дополнительные акценты. Возможность мгновенно конвертировать означает, что вы можете думать в той модели, которая подходит для задачи, и всё равно выдавать тот формат, которого ожидает ваш код.

Примеры, подводные камни и приватность

Практические применения: преобразуйте дизайнерский #3b82f6 в hsl(217, 91%, 60%), чтобы сгенерировать более светлое состояние наведения, или оберните наложение rgba(0,0,0,0.5) в 8-значный hex для более лаконичной таблицы стилей. Стоит отметить два подводных камня. Поскольку HSL хранит оттенок как целый градус, а насыщенность и светлоту — как целые проценты, преобразование RGB → HSL → RGB может сдвинуть канал на одну единицу из-за округления; видимая разница незаметна, но строгая проверка на равенство может её заметить. А встроенное в браузер средство выбора цвета понимает только 6-значный hex, поэтому оно не может представить значение альфа — задавайте непрозрачность в текстовом поле вместо этого. Всё вычисляется локально в вашем браузере: цвета, которые вы вставляете, в том числе ещё не выпущенные фирменные палитры, никогда не покидают ваше устройство и никогда не загружаются и не логируются. Исследуйте остальные наши бесплатные браузерные сетевые инструменты и инструменты для разработчиков, когда вам понадобится вспомогательная утилита.