Извлечь цвета из фото — палитра и выбор кликом
Кликните по изображению, чтобы усреднить небольшую область вокруг точки (около 7×7 исходных пикселей).
Получите доминирующие цвета и полную палитру с любого снимка — или выберите цвет кликом по области. Шаги: выберите изображение, задайте число цветов (2–12), извлеките, скопируйте HEX/RGB/HSL, или кликните превью для локального среднего. Пример: шесть оттенков с брендового снимка и клик по логотипу для акцента — файл остаётся на устройстве.
Как это работает
Выберите фото и извлеките палитру: страница уменьшает рабочую копию (длинная сторона ~256 px), пропускает почти прозрачные пиксели, группирует цвета и сортирует по частоте. Отдельно кликните превью, чтобы усреднить небольшой квадрат вокруг точки в полном разрешении и скопировать HEX, RGB или HSL — ничего не загружается.
Чего ожидать
Извлечение палитры и выбор кликом используют одно изображение, но отвечают на разные вопросы. Сверьтесь со списком, если цвет кажется неожиданным.
- Выборка палитры идёт по уменьшенному bitmap (макс. сторона ~256 px), чтобы большие фото оставались отзывчивыми. Мелкие детали могут сливаться в соседние оттенки.
- Пиксели с alpha ниже 128 игнорируются и для палитры, и для средних по клику. Полностью прозрачные точки показывают понятное сообщение.
- Запрашиваете 2–12 цветов палитры; на плоских изображениях может быть меньше. Цвета упорядочены по доле выборки.
- Клик усредняет непрозрачные пиксели в окне ~7×7 вокруг клика в исходных координатах (не только уменьшенное превью). Это выборка области, а не лабораторная пипетка одного пикселя.
- Приватность: декодирование, расчёт палитры и выборка кликом выполняются локально в этой вкладке.
Пример
Загрузите пример из четырёх блоков, оставьте Цвета = 6 и извлеките — должны быть бирюза, янтарь, зелёный, кремовый и красный. Затем кликните красный круг: карточка выбранного цвета показывает красный HEX из среднего ~7×7 вокруг точки, готовый к копированию.
Когда подходит
- Брендовые фото: возьмите палитру, затем кликните логотип или кнопку для конкретного акцента.
- Скриншоты UI: просмотрите палитру интерфейса, затем кликните чип или иконку для цвета этой области.
- Идеи градиента: два акцента из палитры или кликом, затем калькулятор градиентов.
Frequently asked questions
Моё изображение покидает браузер?
Нет. Расчёт палитры и выборка кликом локальны. Проверьте Network — изображение не отправляется POST.
Как выбираются основные цвета?
Страница уменьшает изображение, отбрасывает низкоальфа-пиксели, делит цветовое пространство median-cut, усредняет группы и сортирует по числу выборок.
Что происходит при клике по изображению?
Инструмент переводит клик в исходные пиксели и усредняет непрозрачные цвета в небольшом квадрате (~7×7). Вы получаете HEX/RGB/HSL для этой области, отдельно от списка палитры.
Почему клик — не один пиксель?
Фото и UI-скриншоты шумны на 1×1. Среднее малой области стабильнее для CSS-акцентов и всё же отражает место клика.
Анимированные GIF анализируются полностью?
Рисуется только первый кадр, он используется для палитры и доступен для выбора кликом.
Related tools
Вопросы и отзывы
Что-то неясно, сломано или отсутствует? Напишите сообщение ниже — мы читаем каждую заметку об этих инструментах.