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

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

Пипетка цвета из изображения декодирует ваше изображение на canvas и сэмплирует пиксели целиком в вашем браузере. Картинка, которую вы перетаскиваете, и цвета, которые вы выбираете, никогда не покидают ваше устройство и не загружаются в ArrayKit.

Открыть конвертер цветов CSS

Об инструменте Пипетка цвета из изображения

Пипетка цвета из изображения превращает любую картинку в пробоотборник цвета. Перетащите или выберите фотографию, логотип, скриншот или макет дизайна, затем перемещайте курсор по нему для превью пикселя под перекрестием и кликайте, чтобы зафиксировать этот точный цвет. Каждый образец показывается как HEX, RGB и HSL рядом с живым свотчем, так что вы можете вставить его прямо в CSS, токен дизайна или заливку. Полоса недавних цветов держит ваши последние выборы под рукой для сборки палитры, а у каждого значения своя кнопка копирования. Прозрачные пиксели сохраняют свой альфа-канал, поэтому наложения PNG считываются как rgba и #rrggbbaa. Инструмент создан для дизайнеров, фронтенд-разработчиков и всех, кто подбирает фирменный цвет из изображения. Картинка декодируется на canvas и сэмплируется на вашем устройстве — она никогда не загружается.

Возможности

Как использовать Пипетка цвета из изображения

  1. Кликните по зоне перетаскивания или перетащите файл изображения на неё
  2. Перемещайте курсор по изображению для превью цвета пикселя
  3. Кликните по точке, чтобы зафиксировать этот цвет и раскрыть его HEX, RGB и HSL
  4. Скопируйте нужную нотацию или откройте заново более ранний выбор из «Недавних цветов»

Пример

Ввод

Sampled pixel: R 37, G 99, B 235 (opaque)

Результат

HEX #2563eb
RGB rgb(37, 99, 235)
HSL hsl(221, 83%, 53%)

Один клик по синей кнопке превращает пиксель в готовые к вставке значения цвета CSS.

Частые ошибки и устранение неполадок

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

Как выбрать цвет из изображения?
Перетащите или выберите изображение, наведите на него для превью цвета пикселя, затем кликните по нужной точке. Пипетка мгновенно показывает HEX, RGB и HSL этого пикселя со свотчем, и у каждого значения есть кнопка копирования.
Можно ли получить HEX-код цвета на скриншоте?
Да. Загрузите скриншот как любое изображение, наведите, чтобы найти нужный оттенок, и кликните по нему. HEX-код появляется рядом со значениями RGB и HSL, так что вы можете скопировать его в CSS или инструмент дизайна.
Сохраняет ли пипетка цвета прозрачность из изображений PNG?
Да. Когда сэмплированный пиксель не полностью непрозрачен, альфа-канал передаётся: RGB показывается как rgba(...), а HEX получает восьмую альфа-пару (#rrggbbaa), соответствуя тому, как пиксель фактически отрисовывается.
Из каких форматов изображений можно выбирать цвета?
Из всего, что ваш браузер может декодировать на canvas — PNG, JPG, WebP, SVG, GIF, AVIF, BMP и ICO. Для точных фирменных цветов предпочитайте PNG без потерь, поскольку JPG и WebP могут сдвинуть плоскую заливку на оттенок.
Можно ли сохранить несколько цветов из одной картинки?
Да. Каждый клик добавляет цвет в полосу «Недавние цвета», до дюжины выборов. Кликните по любому свотчу там, чтобы открыть его заново, затем скопируйте его HEX, RGB или HSL, чтобы собрать палитру из изображения.
Загружается ли моё изображение, когда я выбираю из него цвет?
Нет. Пипетка цвета из изображения отрисовывает вашу картинку на canvas и читает пиксели целиком на вашем устройстве. Изображение никогда не отправляется в ArrayKit или на какой-либо сервер, поэтому приватные макеты и фотографии остаются локально.

Связанные инструменты

Все инструменты ArrayKit