Снять цвет за клик
Выберите оттенок на градиент-поле или с фото. Пипетка покажет код цвета сразу — без Excel и без подбора «на глаз».
Kovcheg · Дизайн
Пипетка цвета: скопируй HEX, RGB или CSS-переменную
Сними оттенок с палитры или картинки — готовые HEX, RGB, HSL и CSS-токен без регистрации
Возможности
Что делает пипетка за один клик
Снять цвет, увидеть три формата и унести CSS-токен — без регистрации и без «угадай по глазу».
Три формата в одном экране
HEX, RGB и HSL синхронизируются live. Меняете один — остальные пересчитываются. Удобно и для вёрстки, и для ручной подстройки.
Сразу в CSS-переменную
Не только «скопировать #…». Получаете готовый фрагмент вроде --color-brand: #… и сниппет :root — можно вставить в сайт или передать в Cursor.
Пипетка → HEX / RGB / HSL → CSS-токен
Коротко
Пипетка цвета онлайн — что это
Инструмент в браузере
Бесплатная пипетка: снимаете оттенок с палитры или картинки, сразу видите код в HEX, RGB и HSL и копируете его как CSS-переменную (--brand) для сайта, баннера или письма. Регистрация не нужна, файлы на сервер не уходят.
Маркер: простыми словами. HEX — короткий код цвета с решёткой, например
#0077FF. Это компактная запись тех же красного, зелёного и синего каналов, что и в RGB.Пипетка в браузере
Выберите цвет — скопируйте код
Градиент-поле, цвет с картинки, пипетка экрана, HEX / RGB / HSL и готовый сниппет CSS-переменных. Данные остаются в браузере.
Пресеты:
Проверяем поддержку браузера…
Загрузите JPG, PNG, WebP или GIF — затем кликните по пикселю.
Кликните по пикселю, чтобы взять цвет (HEX / RGB / HSL синхронизируются).
Образец · #0077FF
Некорректный HEX. Пример: #0077FF или #07F.
Формат: rgb(0, 119, 255) или 0, 119, 255.
Формат: hsl(212, 100%, 50%). Не забывайте знак %.
CSS-переменные
Контраст (WCAG)
Обычный текст: AA ≥ 4.5:1, AAA ≥ 7:1. Крупный текст: AA ≥ 3:1, AAA ≥ 4.5:1.
Текст на белом
Текст на чёрном
Белый текст на цвете
Чёрный текст на цвете
Как пользоваться
Три шага: выбрал → скопировал → вставил
Откройте пипетку на странице. Кликните по градиент-полю, сдвиньте слайдер оттенка или загрузите картинку и ткните в нужный пиксель.
Скопируйте HEX для CSS/HTML, RGB при прозрачности или HSL для ручной подстройки яркости — либо блок CSS-переменных целиком.
Выберите цвет
Клик по полю, hue-слайдер или пиксель на картинке. При поддержке браузера — пипетка экрана.
Успех: swatch обновился, в полях HEX / RGB / HSL
Скопируйте формат
«Копировать» у нужного кода или «Скопировать всё» / блок CSS-переменных.
Успех: в буфере #0077FF или --color-brand
Вставьте в макет
CSS, Unisender, креатив Директа/VK или пресет кнопки Telegram/MAX. Смотрите contrast hint.
Успех: цвет совпал, текст кнопки читается
Типичные ошибки новичка
- Забыли
#или перепутали короткий#abcс полным#aabbcc— вставляйте полный HEX из поля инструмента. - В HSL забыли знаки
%у насыщенности и яркости — копируйте готовое значение с кнопки. - Взяли «красивый» цвет и положили мелкий серый текст на светлый фон — смотрите бейдж контраста AA/AAA до публикации.
Маркер: простыми словами. Контраст — насколько текст отличается от фона по яркости. Для обычного текста ориентир WCAG AA — не ниже 4.5:1, для крупного — от 3:1.
Форматы
HEX, RGB и HSL — какой формат копировать
Один цвет — три записи. Выбирайте формат под задачу: вставка в CSS, прозрачность или ручная подстройка оттенка.
Когда удобнее HEX
Дефолт для CSS/HTML и handoff из Figma. Вставляете #RRGGBB в background, color, Unisender или поле креатива. Для статичного бренд-цвета обычно достаточно HEX.
Когда RGB и прозрачность
RGB удобен для оверлея и полупрозрачной плашки: каналы 0–255 плюс альфа. RGB и HEX описывают одну модель цвета — разная только запись.
Когда HSL для оттенков
HSL помогает сделать кнопку «чуть темнее» на hover или приглушить акцент, не пересчитывая каждый канал RGB.
Маркер: простыми словами. HSL — это «оттенок / насыщенность / яркость». Оттенок — градус на цветовом круге (0–360), насыщенность и яркость — проценты.
Маркер: простыми словами. CSS-переменная — имя цвета в коде, например
--brand или --color-primary. Задали один раз в :root, а кнопки и заголовки берут цвет по имени.Токены
Из пипетки сразу в CSS-переменную
Семантические имена лучше «просто синий»: так проще менять тему сайта и передавать цвет в контент-завод.
Пример --brand / --accent
Выбрали цвет → копируете, например --color-brand: #0077FF; и --color-brand-rgb: 0 119 255;. Семантические имена (--color-primary, --color-on-primary) удобнее примитивов.
Палитра для кнопок и фона
Соберите минимум: фон, текст, primary-кнопка, danger, нейтраль. Один бренд-цвет + контрастная пара для текста — уже рабочий старт для лендинга и креативов.
Если нужно не только скопировать цвет, а выстроить цепочку «токены → сайт → публикации» через Make.com и агентов — разбор автоматизации и вайбкодинга есть в обучении по Make и контент-заводу.
Параметры
Что умеет панель
Градиент-поле, live-конвертер, CSS variables, contrast hint и RU-пресеты — в одной витрине.
Градиент-поле + hue
Классическая пипетка: насыщенность/яркость на плоскости, оттенок слайдером.
HEX / RGB / HSL live
Двусторонний ввод: правите любой формат — остальные синхронизируются.
Copy по формату
Отдельная кнопка на каждый код + «Скопировать всё».
CSS variables (RU)
Готовый --color-… и сниппет :root с русскими подписями.
Contrast hint
Текст на белом/чёрном и бейдж AA / AAA / fail.
RU-пресеты
Чипы VK Blue #0077FF, ориентиры кнопок Telegram-like, нейтрали для UI.
Пипетка экрана
Где поддерживается браузером; иначе — поле и фото на странице.
Privacy
Расчёт в браузере, без обязательной загрузки на сервер.
Читаемость текста
Превью контраста показывает, читается ли мелкий текст на фоне (порог AA ≈ 4.5:1).
Кейсы РФ
Где пригодится код цвета
Директ, VK, Telegram/MAX, Unisender и вёрстка — сценарии с готовым HEX из пипетки.
CTA, который читается
Подберите цвет плашки так, чтобы текст читался на фоне креатива. Жёсткого «разрешённого HEX» у площадки нет — важнее читаемость и чтобы баннер не мимикрировал под интерфейс площадки. Сверьте contrast hint до загрузки.
Акцент рядом с VK Blue
Сверьте свой акцент с фирменным VK Blue #0077FF. Скопируйте HEX в редактор объявления или обложку — один клик вместо подбора «похожего синего».
Кнопки и обложки
Для кнопок бота удобны semantic-пресеты primary / success / danger (ориентиры клиента). Для обложек канала и мини-приложений — фирменный HEX из пипетки. У MAX не обещаем 1:1 те же themeParams, что у Telegram Mini Apps.
Письмо = лендинг
В конструкторе писем фон, ссылки и кнопки задаются HEX. Снимите цвет с сайта или брендбука пипеткой и вставьте код в поля письма.
Дизайн-токены
Экспорт :root { --brand: …; --brand-rgb: …; } — быстрый handoff в CSS, WordPress-тему или агентный пайплайн контент-завода.
Приватность по умолчанию
Всё считается в браузере. Картинку и выбранный цвет не нужно загружать «в облако инструмента».
Ограничения
Что важно помнить
Расчёт в браузере
Privacy
Мы не просим аккаунт, чтобы пользоваться пипеткой. Цвет считается локально во вкладке.
Пипетка экрана зависит от браузера
Браузер
API EyeDropper есть не везде (часто Chromium/Edge). Fallback — поле и фото на странице; код цвета тот же.
Contrast — ориентир, не экспертиза
WCAG
Подсказка AA/AAA не заменяет аудит доступности всего сайта. Смотрите пороги до публикации креатива.
Пресеты — справочные ориентиры
Бренд
VK / Telegram-like чипы не заменяют актуальный брендбук площадки. Сверяйте с официальными гайдами.
Не типографский CMYK
Печать
Для экрана и веба достаточно HEX/RGB. CMYK из RGB без печатного профиля — приближение, не эталон типографии.
Фокус — web и маркетинг
Ниша
Инструмент не про подбор краски авто или «цвет волос». Цель — HTML/CSS и креативы Директ / VK / email.
FAQ
Частые вопросы про коды цвета
Чем HEX отличается от RGB?
Ничем по сути цвета: оба описывают одни и те же красный, зелёный и синий каналы. HEX — компактная запись #RRGGBB, RGB — числа 0–255. Для вставки в CSS чаще берут HEX; для прозрачности удобнее RGB/RGBA.
Как получить код цвета с картинки бесплатно?
Откройте эту пипетку, загрузите изображение, кликните по нужному пикселю — скопируйте HEX. Регистрация не нужна.
Что такое HSL и когда его копировать?
HSL — оттенок, насыщенность и яркость в процентах. Копируйте HSL, когда хотите вручную сделать цвет светлее/темнее или приглушить, не трогая каналы RGB по отдельности.
Можно ли сразу получить CSS custom property?
Да. В блоке переменных копируете --color-brand: #… или готовый фрагмент :root. Это и есть CSS custom property — имя цвета для всего UI.
Нужна ли регистрация для пипетки?
Нет. Инструмент работает в браузере без аккаунта.
Что значит контраст 4.5:1?
Это минимальный ориентир WCAG AA для обычного текста: отношение яркости текста к фону. Ниже — мелкий текст плохо читается, особенно в рекламе и письмах.
Почему пипетка экрана не открылась?
API EyeDropper есть не во всех браузерах (часто есть в Chromium/Edge). Используйте градиент-поле или загрузку картинки — результат тот же по коду цвета.
Нужен ли CMYK для баннера в Директе?
Для экрана и веба достаточно HEX/RGB. CMYK из RGB без печатного профиля — приближение, не эталон типографии.
Итог
Коротко: что унесёте со страницы
1. Пипетка
Снимает цвет с палитры или картинки.
2. Форматы
На выходе — HEX, RGB, HSL и CSS-переменная.
3. Контраст
Подсказывает, читается ли текст на фоне.
4. Кейсы РФ
Директ, VK, Telegram/MAX, Unisender.
5. Privacy
Без регистрации; работа в браузере.
6. Соседи
UTM, slug, регистр, Base64, QR.
Пипетка остаётся здесь — система в каналах
HEX, RGB, HSL и --brand копируете на странице. Практика по автоматизации и контент-заводу — в Telegram и MAX Maya Pro.
