Инструмент выбора цвета

О программе Инструмент выбора цвета

Палитра цветов — это онлайн-инструмент, который позволяет выбрать любой цвет и сразу получить его код в десяти форматах: HEX, HEX8, RGB, RGBA, HSL, HSLA, HSV, CMYK, OKLCH и ближайшее CSS-название. Дизайнеры и верстальщики обычно держат открытыми три-четыре вкладки: одну для подбора, вторую для конвертации, третью для проверки контраста. Палитра цветов от ToolsPivot закрывает все эти задачи на одной странице, работает целиком в браузере и не требует регистрации.

Обзор палитры цветов от ToolsPivot

Основная функциональность

Инструмент хранит выбранный цвет как одно значение HSV с плавающей точкой и выводит из него все остальные форматы. Это принципиальный момент: большинство конвертеров пересчитывают цвет по цепочке HEX → HSL → HEX и на каждом шаге округляют значения, из-за чего оттенок «уползает» при перетаскивании ползунков. Здесь округление происходит только на выводе, поэтому вернуться к исходному цвету можно в любой момент. Цвет задаётся тремя способами: мышью или пальцем на квадрате насыщенности и яркости, вводом кода вручную или пипеткой.

Целевые пользователи и сценарии использования

Основная аудитория — веб-дизайнеры, фронтенд-разработчики, SMM-специалисты и владельцы небольших интернет-магазинов. Дизайнер снимает цвет с макета в Figma, верстальщик копирует значение прямо в CSS, а продавец на Wildberries или Ozon подбирает оттенок фона для карточки товара под фирменный стиль. Отдельная группа — специалисты по доступности, которым нужен коэффициент контраста без установки расширений.

Проблема и решение

Главная проблема при работе с цветом — разрозненность инструментов. Чтобы снять оттенок с баннера, перевести его в CMYK для типографии и убедиться, что белый текст на нём читается, приходится открывать три разных сервиса и вручную переносить коды между ними. Палитра цветов объединяет подбор, конвертацию, генерацию гармоний и проверку контраста в одном окне, сокращая рутину с нескольких минут до нескольких секунд.

Основные преимущества палитры цветов

• Десять форматов сразу: Один клик по цвету даёт полный набор кодов, включая CMYK и OKLCH. Копировать можно каждый формат отдельно.
• Нет дрейфа оттенка: Внутреннее значение высокой точности исключает классическую ошибку округления при обратной конвертации HEX и HSL.
• Пипетка по всему экрану: Нативный EyeDropper снимает цвет с любого окна: макета, фотографии, чужого сайта, презентации.
• Проверка контраста встроена: Коэффициент и вердикт по уровням AA, AA-Large и AAA считаются здесь же, без перехода на сторонний сервис.
• Полная приватность: Ни один пиксель не уходит на сервер. Загруженное изображение обрабатывается через кодирование изображений в Base64 и canvas прямо в браузере.
• Работа без интернета после загрузки: Весь движок — один файл на чистом JavaScript, без внешних библиотек и CDN.
• Сохранённые цвета: Отобранные оттенки остаются в localStorage и доступны при следующем визите.
• Бесплатно и без лимитов: Нет счётчика конвертаций, платных тарифов и обязательного аккаунта.

Ключевые функции палитры цветов

• Квадрат насыщенности и яркости: Точный выбор оттенка мышью или касанием, с отдельными ползунками тона и прозрачности.
• Экранная пипетка: Использует нативный API браузера. Кнопка автоматически скрывается там, где API не поддерживается.
• Прямой ввод кода: Принимает HEX, запись rgb() и CSS-названия вроде steelblue или crimson.
• Поддержка OKLCH: Вывод в перцептивно равномерном пространстве через преобразование OKLab — формат, который в Рунете активно обсуждают, но почти нигде не отдают.
• CMYK по формуле sRGB: Приближение для печати, помогающее заранее оценить, как оттенок поведёт себя в типографии.
• 148 CSS-названий: Инструмент подбирает ближайшее ключевое слово из полной таблицы CSS-цветов и помечает его как приблизительное.
• Шесть цветовых гармоний: Комплементарная, аналоговая, триада, тетрада, разделённо-комплементарная и монохромная схемы строятся поворотом тона.
• Полосы оттенков, теней и тонов: Три ряда вариаций получаются шагами по светлоте и насыщенности — готовая основа для дизайн-системы.
• Проверка контраста WCAG: Два цвета дают коэффициент от 1:1 до 21:1 и отметку прохождения уровней AA и AAA. Пригодится вместе с проверкой читабельности текста.
• Подбор цвета с изображения: Загрузите картинку, кликните по любому пикселю и получите автоматическую палитру доминирующих оттенков.
• Конструктор градиентов: Второй цвет, угол и тип (линейный или радиальный) превращаются в готовый CSS. Результат удобно вставлять через онлайн-редактор HTML.
• Превью читаемости: Образцы чёрного и белого текста поверх выбранного цвета показывают результат до вёрстки. Выбранный оттенок легко перенести в генератор фавиконов.

Как работает палитра цветов ToolsPivot

1. Выберите цвет. Перетащите точку по квадрату насыщенности и яркости, настройте тон ползунком либо нажмите пипетку и снимите оттенок с экрана.
2. Проверьте форматы. Сетка из десяти кодов обновляется мгновенно; нажмите на нужный, чтобы скопировать его в буфер обмена.
3. Постройте производные. Откройте гармонии, полосы оттенков или конструктор градиентов, если нужен не один цвет, а схема.
4. Оцените контраст. Задайте вторую пару и посмотрите коэффициент с вердиктом по WCAG.
5. Сохраните результат. Добавьте цвет в сохранённые — он останется доступен при следующем открытии страницы.

Когда использовать палитру цветов

Палитра цветов нужна каждый раз, когда цвет из макета должен превратиться в код. Это происходит при вёрстке лендинга, оформлении карточки товара, настройке темы в CMS, подготовке баннера для VK или Telegram. Инструмент одинаково полезен и тем, кто строит палитру с нуля, и тем, кто вытаскивает готовые оттенки из чужого дизайна.

• Вёрстка по макету: Снимите цвет пипеткой с открытого макета и вставьте HEX в стили без промежуточных экспортов.
• Подготовка к печати: Посмотрите CMYK-приближение, прежде чем отправлять визитку или флаер в типографию.
• Аудит доступности: Проверьте пары «текст — фон» на соответствие уровню AA перед сдачей проекта заказчику.
• Разработка дизайн-системы: Соберите шкалу оттенков через полосы тинтов и шейдов, чтобы токены выглядели последовательно.
• Ребрендинг без брендбука: Восстановите фирменные цвета по старому логотипу или скриншоту сайта.
• Оформление карточек на маркетплейсах: Подберите фон инфографики под требования Wildberries, Ozon или Авито.
• Работа с градиентами: Соберите CSS-градиент и сразу скопируйте правило, не подбирая значения вручную.
• Миграция на OKLCH: Получите современный CSS-формат для проектов, где уже используют oklch() в токенах.

Есть и пограничные случаи. Для точного соответствия по Pantone или ICC-профилю типографии одной браузерной палитры недостаточно — понадобится калиброванный монитор и профессиональный софт.

Примеры использования

Карточка товара для маркетплейса

Контекст: Продавец готовит инфографику для Wildberries и хочет фон в тон упаковки.

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

Результат: Единый визуальный ряд карточек без ручного подбора оттенка на глаз.

Вёрстка лендинга по макету Figma

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

Процесс: Снимает пипеткой цвета кнопок и заголовков прямо с экрана. Копирует HEX и OKLCH для CSS-переменных. Собирает шкалу состояний кнопки через полосу теней. Финальные стили прогоняет через минификацию CSS.

Результат: Палитра проекта собрана за несколько минут вместо часа переписывания значений вручную.

Доступность корпоративного сайта

Контекст: Компания приводит сайт в соответствие с ГОСТ Р 52872-2019 перед участием в тендере.

Процесс: Разработчик вводит пары «текст — фон» из брендбука и получает коэффициенты. Для проблемных пар подбирает более тёмный оттенок по полосе шейдов, сохраняя тон. Фиксирует итоговые значения в токенах. Общее состояние страницы дополнительно смотрит через проверку скорости сайта.

Результат: Все пары проходят уровень AA без потери фирменной айдентики.

Фирменный стиль для ИП

Контекст: Индивидуальный предприниматель запускает сайт услуг и не заказывал брендбук.

Процесс: Выбирает базовый цвет, строит триаду через гармонии, собирает акцентные оттенки. Проверяет контраст текста на каждом из них. Иконку сайта делает в том же оттенке.

Результат: Согласованная палитра из четырёх цветов и понятные правила их применения.

Десять форматов: какой выбрать и когда

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

• HEX и HEX8: База для CSS и большинства инструментов; вторая форма добавляет альфа-канал.
• CMYK: Ориентир для печати, но именно ориентир — точность зависит от профиля типографии.
• OKLCH: Даёт предсказуемую светлоту при смене тона, из-за чего палитры выглядят ровно.
• Названия CSS: Быстрый способ понять, к какому семейству относится оттенок. Проверить итоговые значения помогает конвертер RGB в HEX.

Контраст, доступность и ГОСТ Р 52872-2019

Проверка контраста в инструменте считает коэффициент по стандартной формуле относительной яркости WCAG: отношение (L1 + 0,05) к (L2 + 0,05), где L1 — яркость более светлого цвета. Уровень AA требует 4,5:1 для обычного текста и 3:1 для крупного (от 18 pt либо от 14 pt полужирным), уровень AAA — 7:1 и 4,5:1 соответственно. В России действует ГОСТ Р 52872-2019 «Интернет-ресурсы и другая информация, представленная в электронно-цифровой форме», построенный на базе WCAG.

Что стоит учитывать:

• Статус стандарта: ГОСТ Р 52872-2019 носит рекомендательный характер, но его требования регулярно попадают в тендерную документацию.
• Госсектор строже: Для сайтов, связанных с Госуслугами и социальными сервисами, доступность проверяют внимательнее.
• Мобильные экраны: На улице при ярком солнце запас по контрасту важнее, чем в идеальных условиях; заодно проверьте вёрстку через тест мобильной адаптивности.

Честные ограничения инструмента

Палитра цветов решает задачи экрана, а не полиграфии. CMYK здесь рассчитывается по стандартной формуле из sRGB без учёта ICC-профиля, бумаги и красок конкретной типографии, поэтому значения стоит воспринимать как предварительную оценку, а не как готовое задание на печать. Веера Pantone инструмент не заменяет.

Второе ограничение касается OKLCH. Пространство шире sRGB, и часть значений физически не отображается на обычных мониторах — цвет будет обрезан до ближайшего доступного. Кроме того, экранная пипетка опирается на нативный API браузера: в Chrome и Edge она работает, в некоторых других браузерах кнопка скрывается, и цвет придётся снимать через загрузку изображения. Мы предпочитаем сказать об этом прямо, а не обещать «идеальную точность на любом устройстве», как это делают многие сервисы Рунета.

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