CodeKitHubЧто это за инструмент?
Цвета в Интернете записываются в нескольких равнозначных форматах. HEX (#4f46e5) — это компактный формат, повсеместно используемый в CSS и при передаче дизайнерских материалов. RGB (rgb(79, 70, 229)) напрямую указывает компоненты красного, зелёного и синего цветов, что часто требуется при программировании. HSL (hsl(243, 75%, 59%)) описывает оттенок, насыщенность и яркость — это наиболее интуитивный формат для настройки цвета, например, для его затемнения или уменьшения насыщенности.
Все они обозначают один и тот же цвет; этот инструмент точно конвертирует их между собой и показывает предварительный просмотр, чтобы вы могли убедиться, что это именно тот цвет, который вы имели в виду.
Зачем его использовать?
- Принимает данные в любом формате — HEX (3 или 6 цифр), RGB или HSL — и выводит результаты во всех этих форматах.
- Образец с динамическим предварительным просмотром, чтобы вы могли увидеть цвет, а не просто цифры.
- Визуальный инструмент выбора цвета — когда вы предпочитаете выбирать на глаз.
- Копирование одним щелчком мыши в нужном формате, готовое для использования в CSS или коде.
- Бесплатно, мгновенно, без загрузки.
Как использовать
- Введите или вставьте код цвета: #4f46e5, rgb(79, 70, 229) или hsl(243, 75%, 59%) — все варианты подходят.
- Или нажмите на палитру цветов и выберите нужный цвет визуально.
- Ознакомьтесь со всеми тремя форматами в результатах и проверьте образец предварительного просмотра.
- Нажмите «Копировать» рядом с нужным форматом.
Пример
Ввод
#4f46e5Результат
HEX: #4f46e5
RGB: rgb(79, 70, 229)
HSL: hsl(243, 75%, 59%)Три обозначения, один и тот же цвет.
Какой формат лучше выбрать?
Все три термина точно описывают один и тот же цвет — выбор зависит от того, какой из них удобнее использовать для решения конкретной задачи, а не от точности.
| Формат | Лучше всего подходит для | Почему |
|---|---|---|
| Шестнадцатеричный (#4f46e5) | CSS, передача дизайнерских материалов, быстрое копирование и вставка | Самый удобный для ввода и вставки; универсальный формат в инструментах для дизайна, таких как Figma. |
| Красный, зеленый, синий (79, 70, 229) | Код, напрямую взаимодействующий с каналами, работа с холстом/изображениями | Соответствует тому, как графические API и данные о пикселях изображения фактически хранят информацию о цвете. |
| HSL (hsl(243,75%,59%)) | Регулировка цвета — сделать светлее, темнее, более/менее насыщенным | Яркость и насыщенность — это отдельные параметры, которые можно настраивать напрямую, в отличие от форматов HEX/RGB, где при изменении одного параметра изменяются все каналы. |
Типичные сценарии использования
- Визуальный выбор цвета в инструменте для дизайна, а затем преобразование его в точное значение в формате HEX или RGB, необходимое для использования в CSS или коде.
- Формирование набора связанных оттенков (более светлых/более тёмных вариантов) путём преобразования в пространство HSL, регулировки яркости и обратного преобразования.
- Обеспечение единообразия фирменного цвета в различных инструментах, каждый из которых требует своего формата: файл логотипа в формате RGB, руководство по стилю в формате HEX, а также переменная CSS, для которой требуется формат HSL при настройке темы.
- Проверка соответствия цвета, извлеченного из скриншота или файла дизайна (часто указанного в формате RGB), значению HEX в таблице стилей.
Часто задаваемые вопросы
Когда следует использовать HSL вместо HEX или RGB?
Когда нужно проанализировать цвет. Чтобы сделать цвет на 10 % темнее в HSL, достаточно уменьшить яркость на 10 пунктов; в HEX или RGB пришлось бы пересчитывать все каналы. Именно по этой причине в системах дизайна палитры часто определяются в HSL.
Поддерживает ли этот инструмент 3-значные шестнадцатеричные коды, например #fff?
Да. #fff — это сокращённая запись для #ffffff: каждая цифра удваивается. Обе формы допускаются, а в результате выводится полная 6-значная запись.
А как насчёт альфа-коэффициента (прозрачности)?
Этот инструмент преобразует непрозрачные цвета (значения RGB/HSL). Если вам нужна прозрачность, добавьте альфа-канал самостоятельно: rgba(79, 70, 229, 0.5) или #4f46e580 — цвет останется прежним.
Почему мои значения HSL отличаются на 1 от показателей другого инструмента?
Округление. При преобразовании HSL↔RGB получаются дробные значения, а различные инструменты округляют их по-разному. Разница в оттенке или процентах в пределах ±1 незаметна и является нормальным явлением.
Поддерживаются ли такие названия цветов, как «красный»?
Не в фазе 1 — инструмент ориентирован на три числовых формата, которые разработчики конвертируют чаще всего. Введите значение цвета в формате HEX/RGB/HSL или выберите его визуально с помощью палитры.