Палитра цветов — коды HEX, RGB и HSL | Morph

Выберите цвет — получите код

Палитра цветов Morph позволяет выбрать любой цвет визуально и сразу увидеть его код в форматах, которые вы используете: HEX (`#3A7BD5`), RGB (`rgb(58, 123, 213)`) и HSL (`hsl(214, 64%, 53%)`). Перетаскивайте курсор по цветовому полю, точно настраивайте оттенок ползунком и копируйте значение прямо в CSS, файл дизайна или куда вам нужно.

Три формата, один источник истины

Все три кода описывают один и тот же цвет — просто разными способами, и у каждого своя задача:

HEX — компактная форма, которую вы вставите в большинство CSS-файлов и инструментов дизайна.
RGB расписывает каналы красного, зелёного и синего (от 0 до 255 каждый) — удобно, когда нужно скорректировать один канал или работать с кодом, ожидающим отдельные значения.
HSL описывает тон, насыщенность и светлоту — самый интуитивный формат, когда нужно сделать цвет чуть светлее, приглушённее или сдвинуть к соседнему оттенку без подбора вслепую.

Меняйте цвет как угодно — все три кода остаются синхронизированы, так что вы всегда можете взять тот, что нужен вашему проекту.

Создано для реальной работы

Дизайнеры используют её, чтобы закрепить палитру и скопировать точные значения в файл макета или гайдлайн. Фронтенд-разработчики берут HEX для кнопки или переводят RGB дизайнера в HSL, чтобы сделать hover-состояние. Любой, кто настраивает тему, цвет графика или шаблон письма, может подобрать точный оттенок и скопировать его в один клик. Поскольку HSL находится рядом с HEX, строить более светлые и тёмные варианты базового цвета намного проще, чем подбирать hex-цифры на глаз.

Работает в браузере, приватно

Палитра цветов — это чистый браузерный код: и вычисление цвета, и интерфейс работают на вашем устройстве. Ничего не загружается, аккаунт не нужен, ничего не отправляется на сервер. Она быстро загружается и продолжает работать офлайн после открытия страницы, потому что выбор цвета и вычисление его кодов никогда не требуют сети.

Несколько практических советов

Скопированное значение HEX готово к вставке в CSS как есть. Если нужен цвет с прозрачностью, переведите его в RGB и добавьте альфа-канал (`rgba(...)`) в коде. Чтобы собрать цельную палитру, возьмите один базовый цвет и используйте значение светлоты HSL для создания оттенков светлее и темнее, двигая светлоту вверх или вниз при неизменных тоне и насыщенности — так набор цветов будет смотреться семьёй, а не случайным набором.

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

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

Часто задаваемые вопросы

Какие форматы цвета она даёт?

Она показывает HEX, RGB и HSL для каждого выбранного цвета, все синхронизированы между собой, так что можно скопировать тот формат, который нужен вашему проекту.

Зачем использовать HSL вместо HEX?

HSL позволяет интуитивно настраивать цвет: повысить светлоту для тона посветлее, понизить для оттенка потемнее или сдвинуть тон — без подбора hex-цифр вслепую.

Можно получить цвет с прозрачностью?

Выберите цвет, скопируйте значения RGB и добавьте альфа-канал в коде в виде rgba(...), чтобы задать нужный уровень прозрачности.

Отправляет ли она мои данные куда-либо?

Нет. Палитра полностью работает в браузере. Ничего не загружается и не отправляется на сервер — после загрузки страницы она даже работает офлайн.

Как собрать сочетающуюся палитру?

Выберите базовый цвет и используйте его значение HSL, затем двигайте светлоту вверх или вниз, сохраняя тон и насыщенность неизменными, чтобы создать оттенки, которые смотрятся единым набором.