Выборщик цветов изображения
Чтобы определить цвет бренда по скриншоту логотипа или цвет стены по фотографии, обычно приходится открывать Photoshop. Этот инструмент загружает любое изображение на масштабируемый холст и отображает значения HEX, RGB и HSL для любого выбранного пикселя, а также среднее значение по области 10×10 пикселей, это позволяет брать пробу с целой области вместо отдельного пикселя и избегать артефактов шума JPEG.
Как выбрать цвет на изображении
-
1
Загрузите или перетащите изображение
JPG, PNG, WebP, выборщик автоматически масштабируется под размер окна просмотра.
-
2
Увеличьте нужную область
Прокручивайте колесико для масштабирования; перетаскивайте, чтобы переместиться к точному месту, которое хотите взять как пробу.
-
3
Нажмите на пиксель
Мгновенное отображение значений в форматах HEX, RGB, HSL, а также увеличенный образец цвета.
-
4
Скопируйте нужную нотацию
Одним кликом значения HEX, rgb() или hsl() копируются в буфер обмена.
-
5
Сохранить несколько образцов
Выберите палитру из 6–10 цветов по всей картинке для использования в дизайне.
Получение точных образцов
Выбор цвета по одному пикселю почти никогда не соответствует реальным характеристикам фотографии: сжатие JPEG, шум и вариации освещения вызывают различия между пикселями даже на визуально однородных участках.
Режимы отбора проб
| Режим | Что делает | Когда использовать |
|---|---|---|
| Точка | Один пиксель под курсором | Отбор пробы со скриншота из инструмента дизайна |
| Среднее 3 × 3 | Среднее значение по 9 пикселям вокруг точки клика | Фотографии JPG с лёгким сжатием |
| Среднее 10 × 10 | Среднее значение по 100 пикселям | Сильно сжатые или зашумлённые фотографии |
| Среднее по области | Нарисуйте прямоугольник, усредняется каждый пиксель внутри | Логотипы и элементы дизайна с плоской заливкой |
Замечания о цветовом пространстве
- На скриншотах отображаются значения sRGB; выбранный цвет соответствует исходному источнику.
- Фотографии с камеры могут быть в Adobe RGB или DCI-P3; выборщик показывает sRGB, поэтому ярко-красный цвет со снимка с телефона с широким цветовым охватом выглядит слегка менее насыщенным.
- PNG с профилем ICC: выборщик преобразует изображение в sRGB перед отбором проб, что обеспечивает согласованность результатов.
Распространённые сценарии использования
- Подбор цвета логотипа клиента по скриншоту вместо угадывания.
- Создание палитры на основе эталонного изображения (пейзаж, мудборд или кадр из фильма).
- Проверка шестнадцатеричных значений на отрендеренной веб-странице, утратившей свои дизайн-токены.
- Проверка того, что цвет бренда был применён правильно.
Конфиденциальность
Изображение загружается в холст вашего браузера и никогда не отправляется на сервер: выборщик использует исключительно чтение данных холста на стороне клиента, поэтому конфиденциальные дизайны остаются конфиденциальными.
Часто задаваемые вопросы
Компрессия в формате JPEG незначительно изменяет цвета, особенно в градиентах и вблизи краёв. Если исходный файл, JPG, попробуйте режим среднего значения размером 10 × 10 пикселей; если у вас есть оригинальный файл в форматах PNG или SVG, используйте его для точного соответствия.
Не напрямую: сделайте скриншот нужного кадра и загрузите его. Для точной работы по преобразованию видео в палитру цветов используйте специальные инструменты для обработки видео и извлеките из каждого кадра соответствующий образец.
Применяется выборка из любого отображаемого кадра при нажатии. Перед началом выборки можно остановить или переместить курсор до нужного кадра.
До 20 цветов за сеанс. Палитры хранятся локально: обновление страницы их сохраняет, а очистка данных браузера удаляет.
Сопутствующие инструменты
Изменение размера изображений
Меняйте размер изображений до точных пиксельных размеров или процентов, сохраняя пропорции. Подходит для пакетной подготовки, без загрузки файлов.
WebP в JPG
Конвертируйте изображения WebP в JPG/JPEG прямо в браузере. Выберите качество, объедините прозрачность с цветом фона и скачайте без загрузки файлов на сервер.
Генератор QR-кодов
Создавайте QR-код из текста или URL в браузере и скачивайте его в PNG.
Генератор мемов
Добавьте верхнюю и нижнюю подписи к JPG, PNG или WebP. Настройте шрифт, цвета и обводку, затем скачайте статичный мем в PNG.
Генератор штрихкодов
Создавайте Code 128, EAN-13, UPC, ITF-14 и еще семь линейных штрихкодов. Данные остаются в браузере, результат можно скачать в SVG или PNG.
Генератор надписей граффити
Создавайте надписи в стилях тег, баббл, блок, трафарет, неон и вайлд. Настраивайте цвета и экспортируйте PNG или SVG прямо в браузере.