Выбор цвета на изображении
Пипетка цвета для изображений
Пипетка цвета для изображений возвращает точный код цвета любого пикселя, на который вы нажимаете. Лупа показывает пиксели под курсором, а для каждого выбранного цвета доступны значения HEX, RGB, HSL, HSB, OKLCH, Lab и CMYK.
- Бесплатно, без регистрации
- Изображения не покидают устройство
- Точные цвета пикселей
Перетащите изображение, чтобы выбрать цвета
или вставьте через Ctrl+V. JPG, PNG, WebP, GIF, AVIF, SVG. До 20 изображений.
Как узнать цвет на изображении?
Чтобы узнать цвет на изображении, откройте изображение в пипетке и нажмите на нужный пиксель.
Откройте изображение
Перетащите, вставьте или выберите файл JPG, PNG, WebP, GIF, AVIF или SVG. Изображение остаётся на вашем устройстве.
Прицельтесь с лупой
Наведите курсор на изображение. Лупа увеличивает область 11 на 11 пикселей вокруг курсора и выделяет пиксель под ним.
Нажмите, чтобы выбрать
Нажмите или коснитесь, чтобы добавить цвет пикселя к выбранным цветам. Перетащите метку, чтобы переместить её, или сдвигайте её клавишами со стрелками.
Скопируйте код
Копируйте любой код одним нажатием или экспортируйте все выбранные цвета в CSS, Tailwind, Adobe, Procreate и другие форматы.
Насколько точен выбранный цвет?
Каждый выбор возвращает значение реального пикселя. Пипетка читает изображение с разрешением до 2048 пикселей по длинной стороне без сглаживания, поэтому никакое усреднение не меняет значение.
Соседние пиксели на фото часто различаются, потому что освещение, текстура и сжатие JPEG добавляют небольшие отклонения. Чтобы получить цвет целой области, используйте Извлечение цветовой палитры с настройкой «Среднее».
Какие коды цвета показывает пипетка?
Пипетка показывает семь кодов для каждого выбранного цвета, и у каждого кода есть кнопка копирования.
- HEX
- Шестизначный код для CSS и дизайн-приложений
- RGB
- Красный, зелёный и синий каналы от 0 до 255
- HSL
- Тон, насыщенность и светлота для CSS
- HSB
- Тон, насыщенность и яркость для инструментов выбора цвета в приложениях
- OKLCH
- Воспринимаемая светлота, хроматичность и тон для современного CSS
- CIE Lab
- Светлота и две цветовые оси, как в CSS
lab() - CMYK
- Оценка для печати без профиля принтера
- Контраст
- Коэффициент WCAG 2 относительно белого и чёрного
Когда использовать пипетку, а когда извлечение палитры?
| Задача | Инструмент |
|---|---|
| Найти код одного конкретного места, например кнопки или детали | Пипетка цвета для изображений |
| Получить основные цвета всего изображения | Извлечение цветовой палитры |
| Получить точные цвета логотипа без смешанных краёв | Извлечение цветов логотипа |
| Получить цвета сайта из его кода | Извлечение цветов сайта |
Для чего используют пипетку цвета для изображений?
Подбор цвета
Подбирают цвет краски, ткани или товара по фото для печатного или веб-макета.
Веб-дизайн
Копируют точный цвет кнопки или фона со скриншота макета.
Работа с брендом
Берут один фирменный цвет с фото упаковки или вывески как отправную точку.
Проверка доступности
Смотрят контраст выбранного цвета текста с белым и чёрным на вкладке «Коды цвета».
Частые вопросы о пипетке цвета для изображений
Как узнать HEX-код цвета на картинке?
Откройте картинку в пипетке цвета для изображений и нажмите на цвет. HEX-код появится сразу, и рядом с ним будет кнопка копирования.
Можно ли выбирать цвета на телефоне?
Да. Коснитесь изображения, чтобы выбрать пиксель, затем перетащите метку, чтобы уточнить положение.
Почему один и тот же объект показывает разные HEX-коды?
Освещение, тени и сжатие дают соседним пикселям разные значения. Выбирайте цвет в самой однородной области объекта или усредните область с помощью извлечения цветовой палитры.
Можно ли выбирать цвета со скриншота?
Да. Сделайте скриншот и вставьте его на страницу с помощью Ctrl+V или Command+V.
Есть ли ограничение на количество выборов?
Нет. Выбирайте столько цветов, сколько нужно. Экспорт в Procreate содержит первые 30 цветов, а форматы кода содержат все цвета.