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

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

Палитра цветов — это онлайн-инструмент, который позволяет выбрать любой цвет и сразу получить его код в десяти форматах: 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 она работает, в некоторых других браузерах кнопка скрывается, и цвет придётся снимать через загрузку изображения. Мы предпочитаем сказать об этом прямо, а не обещать «идеальную точность на любом устройстве», как это делают многие сервисы Рунета.

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

Что такое палитра цветов и зачем она нужна?

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

Инструмент бесплатный?

Да, палитра цветов ToolsPivot полностью бесплатна и не требует регистрации. Ограничений по числу конвертаций или сохранённых цветов нет.

Мои изображения загружаются на сервер?

Нет, обработка идёт целиком в браузере. Картинка читается через canvas на вашем устройстве и никуда не передаётся, поэтому вопросы 152-ФЗ о персональных данных здесь не возникают.

Чем OKLCH лучше HSL?

OKLCH даёт предсказуемую воспринимаемую светлоту: при смене тона цвет не становится внезапно темнее или ярче. В HSL параметр Lightness зависит от оттенка, из-за чего палитры получаются неровными по яркости.

Почему CMYK не совпадает с результатом типографии?

Расчёт идёт по стандартной формуле из sRGB и не учитывает ICC-профиль печати, тип бумаги и краски. Для точной подготовки макета запросите профиль у типографии и работайте в профессиональном редакторе.

Почему у меня не видно кнопку пипетки?

Кнопка скрывается, если браузер не поддерживает EyeDropper API. В этом случае загрузите скриншот в блок подбора с изображения — результат будет тот же. Скриншот страницы можно сделать через генератор скриншотов сайта.

Работает ли инструмент на телефоне?

Да, квадрат насыщенности и ползунки рассчитаны на касания. Пипетка на мобильных браузерах обычно недоступна, но подбор с загруженного изображения работает.

Что означает «nearest» рядом с названием цвета?

Это ближайшее ключевое слово из таблицы 148 CSS-названий, а не точное совпадение. Точных названий у произвольного оттенка обычно не существует, поэтому инструмент показывает самое близкое.

Сохранятся ли цвета после закрытия браузера?

Да, сохранённые цвета хранятся в localStorage вашего браузера. Они пропадут при очистке данных сайта или в режиме инкогнито.

Какой коэффициент контраста считать достаточным?

Ориентируйтесь на 4,5:1 для обычного текста — это уровень AA по WCAG и ГОСТ Р 52872-2019. Значение 7:1 (AAA) уместно для длинных текстов и сервисов, которыми пользуются люди со слабым зрением.

Чем этот инструмент отличается от палитры в Photoshop?

Палитра цветов ToolsPivot работает в браузере без установки и сразу отдаёт веб-форматы, включая OKLCH, которого в стандартной палитре Photoshop нет. Для сложной ретуши редактор остаётся необходим.

Можно ли собрать градиент и скопировать CSS?

Да, конструктор градиентов принимает второй цвет, угол и тип (линейный или радиальный) и отдаёт готовое CSS-правило. Полученный код удобно проверять вместе с калькулятором шестнадцатеричных чисел.

Почему цвет «уползает» в других конвертерах?

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

Подходит ли инструмент для дизайна баннеров под VK и Telegram?

Да, подбор оттенков и проверка читаемости текста здесь те же, что и для сайта. Для быстрой заготовки макета пригодится генератор заглушек для изображений.

Related Tools You Might Like

Повернуть изображение онлайн Удаление данных EXIF Текст в изображение Конвертер RGB в Hex Изображение в Base64 Base64 в изображение