Пипетка цвета и экстрактор палитры — выбирайте цвета с изображения

Загрузите любой JPG, PNG, WebP или GIF и кликните в любом месте показанного изображения — точный пиксель под курсором считывается и отображается в форматах HEX, RGB и HSL с копированием каждого в один клик. Идеально для подбора фирменного цвета, взятия образца с фотографии или захвата акцентных оттенков с дизайн-макета.

Кликните по любому пикселю, и этот инструмент выбора цвета покажет его HEX-код (например, #FF6B35) вместе с RGB и HSL — те же HTML/CSS-коды цвета, которые вы вставляете прямо в таблицу стилей, дизайн-токен или HTML-атрибут. Нажмите «Копировать», чтобы получить hex-код в один клик.

Изображение уменьшается до 320 пикселей по длинной стороне, затем каждый пиксель распределяется по группам по старшим 4 битам каждого канала. Наиболее заполненные группы усредняются обратно до полного 8-битного цвета, сортируются по частоте и возвращаются в виде вашей палитры. Результат — обычно от 5 до 24 доминирующих цветов, визуально передающих суть изображения.

Да. Кнопки скачивания создают два формата: блок CSS-переменных, готовый к вставке в селектор :root (--color-1, --color-2…), и файл JSON с hex, компонентами RGB и процентной долей для каждого цвета. Оба формата без проблем встраиваются в дизайн-токены, конфиги Tailwind и библиотеки палитр.

Нет — выбор цвета и извлечение палитры происходят полностью в вашем браузере с помощью HTML canvas API. Изображение остаётся на вашем устройстве, что делает инструмент безопасным для невыпущенных фото товаров, черновых макетов и брендовых материалов под NDA.

Для работы над фирменным стилем оптимальны 5–8 цветов — этого достаточно, чтобы передать основную тему, не размывая акцентные оттенки. Для визуализации данных мы рекомендуем 10–16 цветов, чтобы хватало категориальных оттенков. Ползунок позволяет выбрать значение от 5 до 24.

Пиксели с альфа-каналом ниже 128 игнорируются, поэтому прозрачные фоны не засоряют палитру «фоновыми» цветами. Это делает пипетку цвета особенно удобной для вырезанных товаров, стикеров и изолированных объектов.

HEX (#RRGGBB) — самый компактный формат, который по умолчанию используют CSS, Figma и Sketch. RGB показывает три значения компонентов от 0 до 255 — удобно при программной работе с данными изображения. HSL (тон, насыщенность, светлота) интуитивно понятен для настройки цветов: сдвиньте тон, чтобы сменить цветовую гамму, измените светлоту для оттенков и затемнений.

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

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

Выберите базовый цвет, и панель цветовых гармоний мгновенно построит комплементарные, аналоговые, триадные, сплит-комплементарные, тетрадные и монохроматические схемы на основе теории цветового круга. Кликните по любому образцу, чтобы скопировать его код HEX.

In the standalone Color Picker & Wheel, dial in your color and the panel shows its contrast ratio against pure white and pure black along with the WCAG rating — AAA, AA, AA Large, or Fail. Use this before finalizing a text or button color so it stays readable and meets WCAG 2.1 accessibility guidelines.

Yes. The standalone Color Picker & Wheel shows the closest matching named CSS color next to whatever HEX, RGB or HSL value you've dialed in, which is handy for quickly describing a shade in a brief, ticket or design spec without guessing.

Click Random in the Color Picker & Wheel to jump to a new color, then use the Color harmonies panel below it to see complementary, analogous, triadic and other coordinated palettes built from that color — a quick way to find a starting point when you're designing from scratch rather than sampling an existing image.

Use the Size dropdown above the palette to choose 5, 8, 10, 16 or 24 dominant colors — the palette recalculates instantly as you change it. Combine a small size like 5 for a clean brand palette with the picked-color eyedropper to grab one or two exact accent shades the automatic extraction might average away.

Yes — the standalone Color Picker & Wheel shows your current color's contrast ratio against pure white and pure black right under the swatch, labelled AAA, AA, AA Large or Fail per the WCAG thresholds (7:1, 4.5:1, 3:1). Use it to check a text/background pairing meets accessibility standards before you lock in a design color.

The Color Picker & Wheel automatically matches whatever color you've dialed in — via the picker, HEX box, or RGB/HSL fields — to its closest standard CSS color name, shown as 'Closest name' next to the swatch. It's a quick way to describe a color verbally or find its nearest web-safe equivalent.

Yes — every click or tap on the uploaded image adds a new swatch to your Picked Colors list rather than replacing the last one, so you can build up a custom set of exact pixel colors from different parts of a photo. Remove any single swatch with its × button, or clear the whole list with Clear picked.

Yes — the Random button (shuffle icon) in the Color Picker & Wheel jumps to a new hue, saturation and brightness combination in one click, useful for breaking creative block or exploring a palette you wouldn't have typed in manually. HEX, RGB, HSL and the harmony swatches below all update together.

On a touchscreen, drag your finger across the image to preview the color under it in a live floating swatch, then lift your finger to add that exact pixel to your Picked Colors list — no separate confirm tap needed. The same palette-size dropdown and export buttons work identically on mobile.