Палитра цветов онлайн
Выберите цвет визуально и получите его коды HEX, RGB и HSL в одном месте.
Эта палитра цветов онлайн позволяет подобрать цвет на глаз — перемещаясь по полю насыщенности и ползунку оттенка — и сразу выдаёт его код во всех распространённых форматах: HEX для CSS, RGB для скриптов и работы с canvas, HSL — когда удобнее рассуждать в терминах светлоты и насыщенности.
Это самый быстрый путь от «примерно вот такого синего» к точному значению, которое можно использовать. Дизайнеры дошлифовывают здесь оттенок, прежде чем добавить его в палитру; разработчики берут акцентный цвет, не открывая графический редактор; а любой, кто верстает страницу или готовит презентацию, находит код без угадывания.
Палитра работает полностью в вашем браузере. Ничего не нужно устанавливать, аккаунт не требуется, а ваш выбор никуда не отправляется. Вставьте существующий HEX-код, чтобы загрузить цвет и настраивать его дальше, — это удобно для создания более светлых и тёмных вариантов фирменного цвета.
Как пользоваться палитрой цветов
- Перетащите ползунок оттенка, чтобы выбрать базовое семейство цвета.
- Кликните или потяните внутри поля оттенков, чтобы задать насыщенность и яркость.
- Для точного попадания правьте значения HEX, RGB или HSL напрямую.
- Скопируйте нужный формат его кнопкой копирования.
- В любой момент вставьте готовый hex-код в поле ввода, чтобы начать с известного цвета.
Что делает эта палитра цветов
Палитра позволяет подобрать цвет на глаз — перемещаясь по полю насыщенности и яркости и ползунку оттенка — и показывает этот точный цвет сразу во всех распространённых форматах: HEX, RGB и HSL. Вместо угадывания кодов вы визуально находите оттенок и копируете ту запись, которая нужна проекту.
Работает это в обе стороны. Вставьте существующий HEX-код — и палитра переходит к этому цвету, чтобы можно было настраивать от известной точки; это быстрый способ построить более светлый тон или тёмный оттенок фирменного цвета, не покидая страницу. Всё выполняется в вашем браузере, устанавливать ничего не нужно.
HEX, RGB или HSL: какой код копировать?
Все они описывают один и тот же цвет. HEX — компактный стандарт для таблиц стилей и дизайн-токенов. RGB ждут canvas API и многие библиотеки, а rgba() даёт простую прозрачность. HSL удобнее всего человеку для корректировок: зафиксируйте оттенок и меняйте светлоту, чтобы построить согласованную шкалу тонов.
Небольшая оговорка: на разных экранах цвета могут выглядеть чуть по-разному, потому что мониторы откалиброваны неодинаково. Код точен; стекло, на котором он отображается, — нет.
Как палитра соотносится с реальными значениями
Два элемента управления напрямую ложатся на модель HSL. Ползунок оттенка проходит цветовой круг от 0 до 360 градусов, а квадратное поле задаёт насыщенность по одной оси и яркость по другой. Именно поэтому HSL часто ощущается самым интуитивным для управления: интерфейс по сути и есть визуальный редактор HSL.
Под капотом каждая позиция соответствует точным значениям sRGB, поэтому выводимые HEX и RGB — это точный перевод той точки, куда вы поставили курсор. Сдвиньте одно число HSL — и HEX с RGB обновятся синхронно, ведь все три являются записями одного и того же цвета.
Повседневные задачи
Дизайнеры берут палитру, чтобы дошлифовать оттенок перед добавлением его в набор цветов или чтобы вывести тона и оттенки с общим цветовым тоном ради целостного интерфейса. Разработчики используют её, чтобы быстро взять акцентный цвет, не открывая полноценный графический редактор, а затем вставить HEX прямо в CSS.
Она столь же полезна и вне кода. Любой, кто собирает слайды, оформляет письмо, выбирает цвет для диаграммы или подбирает фон документа, найдёт здесь точное значение вместо приблизительного именованного цвета.
Построение палитр и вариантов
Надёжный способ создать цветовую шкалу — зафиксировать оттенок и насыщенность и менять в HSL только светлоту: один и тот же оттенок при светлоте 90%, 70%, 50% и 30% даёт согласованный набор тонов, которые выглядят как одна семья. Палитра упрощает это, ведь числа HSL можно читать и править напрямую.
Для акцентных или дополнительных цветов поворачивайте ползунок оттенка на фиксированную величину — 30 градусов для аналогичного цвета или 180 для дополнительного, — удерживая насыщенность и светлоту неизменными. Так семейство остаётся визуально сбалансированным, а не превращается в случайный набор цветов.
Выбор доступных цветов
Выбрать цвет — только половина дела; он ещё должен быть читаемым. Рекомендации по доступности требуют соотношения контрастности не менее 4.5:1 между обычным текстом и фоном и 3:1 для крупного текста. Светлота HSL здесь — удобный рычаг: затемнить или осветлить выбранный оттенок обычно достаточно, чтобы пройти порог, не отказываясь от цвета.
Поскольку палитра даёт точные значения RGB, их можно сразу подставить в чекер контраста и проверить пару. Если цвет пограничный, подвиньте светлоту в палитре и проверьте снова, вместо того чтобы хвататься за совершенно другой оттенок.
Связанные инструменты для цвета
Если у вас уже есть готовые коды для перевода, а не цвет для выбора, отдельные конвертеры HEX в RGB и RGB в HEX делают именно эту задачу с точной математикой без потерь и живым предпросмотром.
Когда цвета выбраны, генератор CSS-градиентов смешивает их в готовые к вставке линейные и радиальные фоны. Все эти инструменты работают локально в вашем браузере, так что ваш выбор цветов никогда не покидает компьютер.
Часто задаваемые вопросы
Эта палитра цветов бесплатная?
Да, полностью бесплатная, без регистрации и лимитов. Выбирайте и копируйте столько цветов, сколько нужно.
Можно ли взять цвет с картинки или экрана?
Этот инструмент выбирает цвет из палитры, а не из изображений. Чтобы считать пиксель с экрана, используйте пипетку в инструментах разработчика браузера или системную утилиту, а затем вставьте полученный код сюда, чтобы доработать его и перевести между форматами.
Чем HEX отличается от HSL?
HEX кодирует красный, зелёный и синий напрямую; HSL описывает оттенок, насыщенность и светлоту. HSL проще для человека: «тот же оттенок, на 10% светлее» — это изменение одного числа в HSL, но непрозрачное изменение в HEX.
Отслеживается или загружается ли то, что я выбираю?
Нет. Палитра — это обычный клиентский JavaScript. Выбранные вами цвета никогда не покидают браузер.
Работает ли на сенсорных экранах?
Да. Ползунок оттенка и поле выбора реагируют на касания, поэтому всё работает на iPhone, Android и планшетах так же, как с мышью.
Почему цвет выглядит чуть иначе на другом экране?
Код точен, но мониторы различаются по калибровке, яркости и цветовому профилю, поэтому одно и то же значение HEX может выглядеть немного по-разному на разных дисплеях. Для задач, где цвет критичен, проверяйте макет на нескольких экранах и, по возможности, на откалиброванном.