Инструмент «Пипетка»

Палитра цветов от ToolsPivot — бесплатный браузерный инструмент для подбора цвета в форматах HEX, RGB и HSL. Выбирайте оттенок на спектре, настраивайте насыщенность и яркость ползунками, копируйте готовый код одним кликом. В отличие от Coolors и Adobe Color, здесь не нужен аккаунт: сохраняйте цвета в палитру, регулируйте прозрачность и сравнивайте оттенки — без регистрации и без ограничений.

Возможности Палитры Цветов от ToolsPivot

Инструмент совмещает визуальный выбор цвета со спектра и точный числовой ввод. Вот что доступно при открытии страницы:

• Спектр с градиентом насыщенности и яркости: Полноразмерная область отображает все комбинации насыщенности (по горизонтали) и светлоты (по вертикали) для выбранного тона. Кликните в любую точку — цвет зафиксируется мгновенно.

• Полоса оттенка (Hue bar): Радужная градиентная полоса от 0° (красный) через 120° (зелёный) до 240° (синий) и обратно. Перетаскивайте ползунок — спектр перестроится под новый базовый тон.

• Ползунки HSL: Отдельные контроллеры для тона (H), насыщенности (S, 0–100 %) и светлоты (L, 0–100 %). Можно выставить точные значения вместо того, чтобы попадать в нужную точку на глаз.

• Регулировка прозрачности (Alpha): Ползунок задаёт непрозрачность от 100 % до полностью прозрачного. При снижении альфа-канала инструмент автоматически выдаёт 8-значный HEXA-код.

• Поля ввода RGB: Три числовых поля (0–255 на каждый канал) для красного, зелёного и синего. Пригодится, когда значения уже есть в брендбуке или CSS-файле.

• Отображение HEX-кода: Стандартный 6-символьный формат #RRGGBB. Нажмите на иконку копирования — код попадёт в буфер обмена.

• Координаты HSL: Градусы тона, процент насыщенности и процент светлоты отображаются рядом. HSL удобен, когда нужно получить более тёмную или светлую версию одного цвета — просто меняете параметр L.

• Сетка палитры: Область для сохранения выбранных цветов. Добавляете оттенки по мере работы и собираете готовую схему из 5–8 цветов перед переносом в проект.

• Зона сравнения: Размещайте два и более оттенка рядом. Проверяйте контраст, оценивайте сочетания — и принимайте решение до того, как пропишете цвет в коде.

• Переключатель HSV/HSL: HSV (Hue, Saturation, Value) и HSL (Hue, Saturation, Lightness) рассчитывают яркость по-разному. Выбирайте ту модель, которая ближе к вашему рабочему процессу.

Как пользоваться Палитрой Цветов от ToolsPivot

1. Выберите оттенок. Перетащите ползунок на радужной полосе внизу инструмента — он задаёт базовый тон из диапазона 0–360°.

2. Кликните на спектре. Нажмите в любую точку градиентной области. Движение влево-вправо меняет насыщенность, вверх-вниз — светлоту.

3. Подстройте ползунками. Уточните значения H, S и L. Если нужен точный цвет из брендбука, введите числа в поля RGB.

4. Настройте прозрачность. Сдвиньте ползунок альфа-канала, если проекту нужны полупрозрачные цвета. ToolsPivot автоматически выдаст HEXA-код.

5. Скопируйте код. Нажмите иконку копирования рядом с HEX, RGB или HSL — значение окажется в буфере обмена, готовое для вставки в CSS, Figma или любой редактор.

6. Сохраните в палитру. Добавьте цвет в сетку палитры. Соберите схему из нескольких оттенков за одну сессию — и перенесите все коды в проект разом.

Зачем использовать Палитру Цветов от ToolsPivot

Бесплатных инструментов для выбора цвета много. Но у большинства есть ограничения: сохранение палитры за paywall, отсутствие поддержки прозрачности, обязательная регистрация. ToolsPivot обходит эти барьеры.

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

• Три формата одновременно. Каждый выбранный цвет сразу отображается в HEX, RGB и HSL. Не нужен отдельный конвертер RGB в HEX и ручной пересчёт.

• Прозрачность из коробки. Ползунок альфа-канала выдаёт RGBA и HEXA. Если вы делаете полупрозрачные элементы интерфейса или glass-эффекты — это экономит время и лишний инструмент.

• Работает в браузере. Ничего скачивать и устанавливать не нужно. Chrome, Firefox, Safari, Edge — на десктопе и на телефоне. Идеально подходит для фрилансеров, которые работают с разных устройств без установки софта на каждое.

• Палитра встроена. Сохраняйте цвета в сетку прямо во время работы. Соберите схему из 5–8 оттенков за одну сессию, не переключаясь между приложениями и не копируя коды в таблицу.

• Точный и визуальный режимы. Спектр и числовой ввод RGB работают параллельно. Для нового проекта — исследуйте палитру визуально. Для брендбука с готовыми значениями — вбивайте числа напрямую.

• Стыкуется с другими инструментами ToolsPivot. Скопировали HEX — вставьте в HTML-редактор, используйте вместе с генератором фавиконок или задайте цвет для Open Graph-тегов. Бренд-цвета остаются одинаковыми на всех площадках.

Когда какой формат цвета выбрать: HEX, RGB или HSL

Три формата описывают один и тот же цвет, но пригождаются в разных ситуациях. Понимание разницы экономит минуты на каждой задаче.

HEX — стандарт для веба. CSS-файлы, HTML-атрибуты, большинство CMS (WordPress, Tilda, 1С-Битрикс) принимают 6-символьный формат #RRGGBB. Всего 16 777 216 возможных комбинаций. Если вы верстаете страницу — почти наверняка вставите именно HEX.

RGB напрямую отражает, как экран выдаёт цвет: три канала (красный, зелёный, синий) по 0–255. JavaScript-функция rgba(), библиотеки анимаций, Figma и Photoshop работают с RGB. Для JavaScript-проектов этот формат — основной.

А HSL — самая понятная модель для человека. Тон (0–360°), насыщенность (0–100 %), светлота (0–100 %). Нужна более тёмная версия фирменного синего? Уменьшите светлоту на 15 %. Приглушённый вариант? Снизьте насыщенность. CSS поддерживает hsl(), и формат набирает популярность у разработчиков, которые строят дизайн-токены и тёмные темы.

Короткое правило: HEX — для статического CSS, RGB — для JavaScript и графических редакторов, HSL — для создания вариаций цвета и тёмной/светлой темы.

Формат	Пример	Где применять	Прозрачность
HEX	#2563EB	CSS, HTML, темы WordPress и Tilda	Да (8-значный HEXA)
RGB	rgb(37, 99, 235)	JavaScript, Figma, Photoshop, анимации	Да (rgba)
HSL	hsl(217, 83%, 53%)	Дизайн-токены, тёмная тема, палитры	Да (hsla)
HSV	hsv(217, 84%, 92%)	Теория цвета, Adobe-софт	Нет

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

Большинству сайтов и приложений хватает 5–8 цветов: основной бренд-цвет, один-два вторичных, акцент и 2–3 нейтральных оттенка. Сетка палитры в инструменте ToolsPivot рассчитана на такой подход.

Начните с основного цвета. Он задаёт эмоцию бренда. Сохраните его в палитру. Затем сдвиньте ползунок тона на 30–60° в любую сторону, сохраняя насыщенность и светлоту близкими к оригиналу. Получится аналогичный цвет — родственный, но не одинаковый.

Для акцента прыгните на 180° от основного тона. Комплементарные цвета создают визуальное напряжение, привлекая внимание. Используйте их точечно: на кнопках, ссылках, призывах к действию.

Нейтральные оттенки — это серые. Снизьте насыщенность до 5–10 % и варьируйте светлоту от 20 % до 90 %. Они составят фон текста, рамки и подложки. Проверьте контраст между основным и нейтральным в зоне сравнения инструмента. WCAG 2.1 рекомендует коэффициент контраста минимум 4,5:1 для обычного текста. Если светло-серый фон с белым текстом выглядит размытым — опустите светлоту серого на пару пунктов. Потом можно проверить читаемость готовой страницы через проверку читаемости.

Особенно полезен этот подход для владельцев интернет-магазинов на Ozon, Wildberries или собственного сайта на Tilda. Единая цветовая схема на карточках товаров, баннерах и кнопках повышает узнаваемость бренда и доверие покупателей.

Где палитра цветов экономит время: три сценария

Веб-разработчик собирает цветовую систему для клиента

Фронтенд-разработчик получает бриф: «современный синий, чистый стиль». Вместо угадывания hex-кодов он открывает палитру ToolsPivot, исследует диапазон синего (тон 200–240°) и фиксирует основной цвет на #2563EB с насыщенностью 84 % и светлотой 53 %. За 5 минут создаёт 4 варианта светлоты — для ховер-состояний, заблокированных элементов и фонов. Экспортированные HEX-коды уходят прямо в CSS-переменные. Пара минут — и проверка скорости страницы подтверждает, что новые стили не замедлили загрузку.

Владелец магазина на маркетплейсе обновляет фирменные цвета

ИП продаёт товары ручной работы на Ozon и ведёт страницу ВКонтакте. Нужно сделать карточки товаров, обложку для группы и баннер для акции в едином стиле. Предприниматель подбирает 6 цветов в палитре, копирует HEX-коды для графического редактора и RGB для шаблонов Canva. Один сеанс — все площадки в единой гамме.

Дизайнер создаёт тёмную тему

Продуктовый дизайнер в SaaS-компании переводит 12 цветов интерфейса в тёмный режим. Вводит каждый HEX-код в инструмент, затем уменьшает светлоту на 40–50 % и слегка поднимает насыщенность — на тёмном фоне цвета выглядят тусклее. Модель HSL делает процесс систематичным: никакого подбора вслепую. За 15 минут готов полный набор токенов для тёмной темы.

Популярные вопросы о палитре цветов

Что такое палитра цветов (color picker)?

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

Палитра цветов ToolsPivot — бесплатная?

Да, полностью бесплатная и без ограничений. Выбирайте любое количество цветов, собирайте палитры, копируйте коды в любом формате и настраивайте прозрачность — без регистрации и без подписки. Инструмент работает в браузере, данные не отправляются на сервер.

Чем HEX отличается от RGB?

Оба формата описывают один и тот же цвет, но в разной записи. HEX использует 6-символьную шестнадцатеричную строку (#FF5733), а RGB — три десятичных числа от 0 до 255 (rgb(255, 87, 51)). HEX — стандарт для CSS, RGB чаще встречается в JavaScript, Figma и Photoshop. ToolsPivot показывает оба значения одновременно.

Работает ли палитра цветов на телефоне?

Да. Инструмент адаптирован под мобильные браузеры Chrome и Safari на iOS и Android. Спектр и ползунки поддерживают касания, так что подобрать цвет и скопировать код можно без мыши. Это удобно, когда нужен HEX-код на ходу.

Как узнать точный цвет из брендбука?

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

Для чего нужен ползунок прозрачности (Alpha)?

Ползунок Alpha управляет непрозрачностью цвета: от 100 % (полностью видимый) до 0 % (полностью прозрачный). При снижении значения инструмент выдаёт 8-значный HEXA-код или RGBA-значение. Прозрачные цвета используются в оверлеях, glass-эффектах и многослойных UI-компонентах.

Сколько цветов можно сохранить в палитру?

Жёсткого ограничения нет. Добавляйте оттенки по мере выбора и собирайте палитру любого размера за одну сессию. Для большинства веб-проектов хватает 5–8 цветов. В дизайн-системах крупных продуктов может быть 12–16, включая статусные цвета (success, error, warning).

HSL лучше, чем HEX, для веб-дизайна?

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

Подходит ли инструмент для WordPress и Tilda?

Да. Скопируйте HEX или RGB-код из палитры и вставьте в настройщик темы WordPress, редактор Tilda, конструктор Elementor или 1С-Битрикс. Это стандартные CSS-значения, которые принимает любая платформа с полем ввода цвета. Подходит для блогеров, владельцев интернет-магазинов и всех, кому нужен точный цвет без Photoshop.

Насколько точны коды цветов?

Инструмент пересчитывает позицию клика на спектре в точные математические координаты из 16 777 216 возможных цветов пространства RGB. Что вы скопировали — то браузер и отобразит в CSS. Для работы с изображениями или сжатием картинок те же HEX-коды применимы напрямую.

В чём разница между HSV и HSL?

HSV (Hue, Saturation, Value) и HSL (Hue, Saturation, Lightness) — цилиндрические цветовые модели, но они по-разному рассчитывают яркость. В HSV параметр Value показывает, насколько цвет близок к белому свету. В HSL параметр Lightness задаёт среднюю точку: 50 % — чистый цвет, 100 % — белый. Палитра ToolsPivot позволяет переключаться между моделями.

Можно ли сравнить два цвета перед выбором?

Да. Зона сравнения в инструменте позволяет разместить выбранные оттенки рядом. Это полезно для проверки контраста между фоном и текстом или оценки сочетания двух бренд-цветов. Для полной проверки авторитетности сайта и юзабилити можно дополнительно проанализировать готовую страницу.