Бесплатный подборщик цвета

Пипетка-пикер цвета онлайн: полное руководство

Пипетка-пикер цвета Volade — это универсальный веб-инструмент, совмещающий пипетку, продвинутый редактор цвета, генератор палитр, создатель градиентов, проверку доступности WCAG, симулятор дальтонизма, смешение цветов и экспорт для разработчиков — всё в одном интерфейсе, 100% локально, без регистрации.

В отличие от классических редакторов, ограниченных HEX/RGB/HSL, Volade поддерживает 16 цветовых пространств, включая LAB, LCH, OKLCH, OKLAB, CMYK, Display P3, XYZ и HWB. Каждый формат отображается в реальном времени с кнопкой мгновенного копирования, что делает его самым полным инструментом для дизайнеров, разработчиков и полиграфистов.

Пипетка: точность до пикселя

Пипетка использует API EyeDropper современных браузеров для захвата любого цвета, видимого на вашем экране. Нажмите в любом месте — на изображении, веб-сайте или документе — и цвет будет мгновенно захвачен. Увеличитель высокого разрешения позволяет наводить на нужный пиксель, а навигация клавиатурой (стрелки) обеспечивает абсолютную точность. Выборка области (1×1, 3×3, 5×5, 11×11) сглаживает артефакты сжатия JPEG и получает средний цвет области.

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

Редактор цвета без компромиссов

Редактор отображает одновременно 16 цветовых форматов: HEX, HEX8, RGB, RGBA, HSL, HSLA, HSV/HSB, HWB, CMYK, LAB, LCH, OKLAB, OKLCH, Display P3, XYZ и Linear RGB. Каждое значение редактируется напрямую: измените HSL, и все остальные форматы обновятся в реальном времени. Цветовое колесо обеспечивает интуитивный визуальный контроль, а числовые ползунки позволяют точно настраивать значения.

Альфа/прозрачность обрабатывается нативно: настройте непрозрачность от 0 до 100% с помощью выделенного ползунка и немедленно увидьте влияние на все форматы. История изменений записывает каждое действие с возможностью отмены и повтора в любой момент.

Smart Color Intelligence: за рамками простого выбора

Из одного цвета инструмент автоматически генерирует все классические гармонии: дополнительные, аналогичные, триада, тетрада, раздельно-дополнительные и монохроматические. Но он идёт дальше: варианты shades (более тёмные), tints (более светлые), tones (приглушённые), warm (тёплые) и cool (холодные) создаются автоматически.

Режим «Generate Palette» превращает любой цвет в полноценную дизайн-систему: primary, secondary, accent, background, surface, text, muted, border, success, warning, error, info — каждый со своими значениями RGB, OKLCH и HEX.

Изображение → Палитра: извлечение цветов из фотографии

Перетащите любое изображение (фото, иллюстрацию, скриншот) — инструмент проанализирует пиксели и извлечёт палитру. Доступно пять режимов извлечения: Доминантный (самые частые цвета), Яркий (самые насыщенные), Приглушённый (десатурированные), Сбалансированный (визуально гармоничные) и Брендовый (цвета, подходящие для фирменного стиля).

Извлечение возвращает от 5 до 15 цветов, каждый с указанием потенциальной роли (доминантный, акцентный, тёмный, светлый). Это значительный ускоритель для дизайнеров, которым нужно извлечь дизайн-систему из существующей фотографии.

Проверка доступности WCAG

Раздел доступности сравнивает два цвета (передний план и фон) и отображает точный коэффициент контрастности с бейджами WCAG AA и AAA для обычного текста, крупного текста и компонентов интерфейса. Если коэффициент недостаточен, кнопка Auto Fix автоматически предлагает ближайший цвет, соответствующий нормам.

Это незаменимый инструмент для разработчиков, которым необходимо соблюдать обязательные стандарты доступности (RGAA, EN 301 549, ADA, Section 508).

Симулятор дальтонизма: проектируйте для всех

Примерно 350 миллионов человек в мире страдают цветовой слепотой. Симулятор показывает ваши цвета так, как их видят все восемь типов дальтонизма: протанопия, дейтеранопия, тританопия, ахроматопсия и их умеренные варианты. Это единственный способ убедиться, что ваш интерфейс действительно доступен.

Генератор градиентов с продвинутой интерполяцией

Создавайте линейные, радиальные и конические градиенты с до 10 цветовыми точками. Интерполяция RGB создаёт классические градиенты; HSL обеспечивает более плавные переходы; LAB и OKLCH создают воспринимаемо равномерные градиенты без видимых полос. CSS-код генерируется автоматически и копируется одним кликом.

Смешение цветов

Смешивайте два цвета с настраиваемым соотношением (от 0/100 до 100/0) в четырёх режимах: RGB (аддитивное смешение), HSL (вращение оттенка), LAB (воспринимаемое пространство) и OKLCH (наиболее естественный). Идеальный инструмент для создания промежуточных цветов, теней и пользовательских оттенков.

ΔE-разница цветов: профессиональная точность

Для дизайнеров и полиграфистов расчёт разницы цветов (Delta E) необходим. Инструмент отображает ΔE76, ΔE94 и ΔE2000 с текстовой интерпретацией: неразличимо (ΔE < 1), различимо с усилием (1-2), разные (2-10), сильно разные (10-50) и контрастные (50+).

Песочница цветов: тестирование в реальных условиях

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

Экспорт для разработчиков: 10 форматов кода

Генерируйте код на вашем языке: CSS Variables, SCSS, Tailwind config, JSON design tokens, TypeScript, Swift (UIColor), Kotlin (Color), Flutter/Dart, React Native (StyleSheet) и Vue. Каждый экспорт включает варианты (50-950) и роли (primary, secondary, accent и др.).

Кому это будет полезно?

Дизайнерам UI/UX, создающим палитры и дизайн-системы; фронтенд-разработчикам, интегрирующим цвета в CSS, Tailwind или SCSS; графическим дизайнерам, извлекающим стили из фотографий; командам по доступности, проверяющим контраст WCAG; полиграфистам, рассчитывающим ΔE; и каждому творцу, кто хочет профессионально работать с цветами.