Grab the exact color from any image

Загрузите любой 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 (тон, насыщенность, светлота) интуитивно понятен для настройки цветов: сдвиньте тон, чтобы сменить цветовую гамму, измените светлоту для оттенков и затемнений.

Yes. Free, free account required to download, no limits on image size or number of palettes extracted. There is nothing to install — the entire tool is a single web page.

No image needed. The Color Picker & Wheel at the top works on its own — drag the saturation/brightness square and the hue slider, or type any HEX, RGB or HSL value to dial in an exact color. Uploading an image is optional, just for eyedropping colors out of a photo.

Pick your base color and the Color harmonies panel instantly builds complementary, analogous, triadic, split-complementary, tetradic and monochromatic schemes using color-wheel theory. Click any swatch to copy its HEX code.

В отдельном инструменте «Пипетка и цветовой круг» подберите свой цвет, и панель покажет его коэффициент контрастности относительно чисто-белого и чисто-чёрного вместе с оценкой WCAG — AAA, AA, AA Large или Fail. Используйте это перед окончательным выбором цвета текста или кнопки, чтобы он оставался читаемым и соответствовал рекомендациям по доступности WCAG 2.1.

Да. Отдельный инструмент Color Picker & Wheel показывает ближайший подходящий именованный CSS-цвет рядом с любым значением HEX, RGB или HSL, которое вы задали, что удобно для быстрого описания оттенка в брифе, тикете или дизайн-спецификации без догадок.

Нажмите «Random» в панели «Color Picker & Wheel», чтобы перейти к новому цвету, затем воспользуйтесь панелью «Color harmonies» под ней, чтобы увидеть комплементарные, аналоговые, триадные и другие согласованные палитры, построенные на основе этого цвета — быстрый способ найти отправную точку, когда вы разрабатываете с нуля, а не берёте цвета с готового изображения.

Используйте раскрывающийся список «Размер» над палитрой, чтобы выбрать 5, 8, 10, 16 или 24 доминирующих цвета — палитра пересчитывается мгновенно при изменении. Сочетайте небольшой размер вроде 5 для чистой фирменной палитры с пипеткой выбора цвета, чтобы захватить один-два точных акцентных оттенка, которые автоматическое извлечение могло бы усреднить.

Да — отдельная «Пипетка и цветовой круг» показывает коэффициент контрастности вашего текущего цвета относительно чисто белого и чисто чёрного прямо под образцом, с пометкой AAA, AA, AA Large или Fail согласно порогам WCAG (7:1, 4.5:1, 3:1). Используйте это, чтобы проверить, что сочетание текст/фон соответствует стандартам доступности, прежде чем зафиксировать цвет дизайна.

Выбор цвета и цветовой круг автоматически сопоставляют любой заданный вами цвет — через палитру, поле HEX или поля RGB/HSL — с ближайшим стандартным именем цвета CSS, показанным как «Ближайшее имя» рядом с образцом. Это быстрый способ описать цвет словами или найти его ближайший веб-безопасный эквивалент.

Да — каждый клик или касание по загруженному изображению добавляет новый образец в ваш список «Выбранные цвета», а не заменяет предыдущий, поэтому вы можете собрать собственный набор точных пиксельных цветов из разных частей фото. Удалите любой отдельный образец кнопкой ×, либо очистите весь список кнопкой «Очистить выбранное».

Да — кнопка «Случайно» (значок перемешивания) в «Пипетке и цветовом круге» одним кликом переходит к новой комбинации оттенка, насыщенности и яркости, что полезно для преодоления творческого ступора или изучения палитры, которую вы бы не ввели вручную. HEX, RGB, HSL и образцы гармонии ниже обновляются все вместе.

На сенсорном экране проведите пальцем по изображению, чтобы просматривать цвет под ним в живом плавающем образце, затем поднимите палец, чтобы добавить именно этот пиксель в список «Выбранные цвета» — отдельного подтверждающего касания не нужно. Тот же выпадающий список размера палитры и кнопки экспорта работают на мобильном точно так же.

Да. У цветового круга в верхней части страницы есть кнопка «Случайный», которая переходит к случайному цвету и сразу показывает его коды HEX, RGB и HSL, ближайший по названию цвет, коэффициенты контраста на белом и чёрном фоне, а также полные наборы гармоний — комплементарные, аналоговые, триадные, раздельно-комплементарные, тетрадные и монохромные. Это быстрый способ найти отправную точку для палитры.

Этот инструмент берёт цвета из загруженного изображения или встроенного цветового круга, а не считывает их напрямую с экрана. Самый быстрый способ заменить экранную пипетку: сделайте скриншот, перетащите его на страницу и кликните по нужному пикселю — вы получите те же коды HEX, RGB и HSL без установки расширений, а скриншот никогда не покинет ваш браузер.