1. Загрузите исходное изображение
Выберите, перетащите или вставьте картинку. Браузер подстраивает крупные файлы под рабочую область, сохраняя связь пикселей для считывания.
Приватная пипетка в браузере
Пипетка цвета с изображения в HEX, RGB и HSB
Перетащите, выберите или вставьте изображение, затем нажмите на нужную область. Toon Tone преобразует пиксель в готовые для копирования HEX, RGB и HSB и позволяет собрать небольшую рабочую палитру.
Обновлено 21 июля 2026 года
пипетка цвета с изображения
Что делает эта пипетка цвета с изображения?
Эта пипетка цвета с изображения считывает красный, зелёный, синий и альфа-канал точного пикселя, выбранного на холсте браузера. Она показывает тот же пиксель как шестизначный HEX, RGB и HSB, сообщает координаты и сохраняет до пяти цветов в скачиваемую палитру. Загруженные или вставленные файлы остаются в текущей вкладке и не передаются на сервер Toon Tone.
Выберите точный цвет на своём изображении
Выберите точный цвет на своём изображении
Используйте пример сразу или замените его файлом JPG, PNG, WebP, GIF либо другим читаемым браузером изображением. Нажимайте или проводите по холсту.
Локальная обработка — изображение не загружается
Перетащите изображение сюдаили выберите файл на устройстве
Изображение также можно вставить из буфера обмена. · Читаемое браузером изображение · до 12 МБВаша палитра из пяти цветов
Ваша палитра из пяти цветов
Сохраните разные образцы, скопируйте палитру или экспортируйте подписанный PNG.
Выберите цвет и добавьте его сюда. Можно сохранить до пяти цветов.
Изображение готово. Нажмите на область, чтобы считать пиксель.
Локальная обработка — изображение не загружается
Изображение остаётся в этой вкладке
Пипетка декодирует файл средствами браузера и читает пиксели с локального холста. В этом процессе нет загрузочного API, аккаунта, облачной библиотеки или фонового сохранения. Закрытие или обновление вкладки очищает рабочее изображение и палитру.
- Без загрузки на сервер
- Без обязательного аккаунта
- Экспорт палитры создаётся на вашем устройстве
Как выбрать цвет с изображения
Надёжный образец начинается с понятной исходной области и заканчивается записанным кодом. Три шага связывают картинку, пиксель и результат.
2. Нажмите на нужную поверхность
Выбирайте ровную внутреннюю область, а не сглаженный край, блик, тень или блок сжатия. Проверьте точный пиксель в увеличенной сетке.
3. Скопируйте или сохраните
Скопируйте HEX, RGB или HSB одного образца либо соберите несколько значимых цветов в палитру из пяти тонов и скачайте подписанную справку.
Выберите формат для следующей задачи
Форматы описывают один видимый пиксель, но каждый делает удобнее определённое чтение или редактирование.
| Формат | Лучше всего для | Что показывает инструмент |
|---|---|---|
| HEX | CSS-токены, дизайн-заметки и быстрый обмен | Шестизначный веб-код |
| RGB | Проверка каналов и браузерная графика | Красный, зелёный и синий от 0 до 255 |
| HSB | Визуальное редактирование и практика Toon Tone | Тон 0–360°, насыщенность и яркость 0–100% |
Когда полезна пипетка цвета с изображения
Считывание наиболее полезно, когда ясно названы источник, целевая область и дальнейшее применение.
Изучение мультфильмов и иллюстраций
Считайте ровную область одежды, меха, предмета или фона, сохраните связанные оттенки и посмотрите, как тон, насыщенность и яркость разделяют палитру. Считайте скриншот учебной ссылкой, а не официальной спецификацией франшизы.
Передача интерфейса и дизайна
Считайте пиксель макета или скриншота, скопируйте HEX и храните исходный файл рядом с результатом. При точной фирменной или производственной работе сверяйтесь с утверждённым токеном.
Тренировка цветовой памяти
Выберите цвет, спрячьте источник, восстановите впечатление с помощью HSB или Toon Tone и сравните воспоминание с образцом только после окончательного ответа.
Точный пиксель не всегда является характерным цветом
Изображение состоит из сетки пикселей, поэтому пипетка может сообщить сохранённые значения красного, зелёного и синего в точной координате. Эта точность не решает, какая точка лучше представляет объект. На рубашке могут быть базовый цвет, блик, тень, контур и сглаженные края. Все это реальные пиксели, но только один отвечает вашему вопросу. Сначала назовите целевую часть, затем считайте её широкую и визуально устойчивую внутреннюю область.
Сделайте несколько измерений, если на поверхности есть текстура, освещение, градиент или следы сжатия. Сохраняйте небольшое число осмысленных образцов вместо множества случайных кликов. Палитра из базы, света, тени, акцента и фона часто полезнее одного кода без контекста. Если нужен доминирующий средний цвет, а не точка, это другой расчёт: называйте его извлечённой или усреднённой палитрой, а не точным пикселем.
Используйте лупу, чтобы избегать краёв и смешанных пикселей
Края цифрового рисунка часто сглаживаются. Браузер смешивает цвета объекта и фона в соседних пикселях, чтобы кривая выглядела ровной при обычном масштабе. Нажатие на такой переход может дать цвет, которого нет в плоской внутренней области. Увеличенная сетка показывает окружение указателя и отмечает выбранную клетку, поэтому до сохранения легко отойти от контуров, прозрачной каймы, сглаженного текста и маленьких бликов.
Координаты мыши или касания переводятся обратно в сетку холста, даже если показанное изображение уменьшено под телефон или ноутбук. Пользователь клавиатуры может сфокусировать холст и двигать выбор стрелками; Shift увеличивает шаг. Координаты относятся к декодированному рабочему изображению. Сохраните оригинал, если производственному процессу нужны позиции в полном исходном разрешении.
Сжатие, прозрачность и профили меняют образец
JPEG-сжатие может создавать небольшие блоки или ореолы около контрастных линий, поэтому соседние пиксели различаются, хотя рисунок кажется ровным. PNG и WebP могут содержать прозрачность, а частично прозрачный пиксель обычно смешивается с фоном до того, как его видит человек. Инструмент сообщает декодированное отображение на холсте и показывает альфа-канал при неполной непрозрачности. Выбирайте точку вдали от повреждённых краёв и отмечайте исходный формат.
Браузерный холст работает в экранном цветовом процессе. Встроенные профили, широкий охват, системное управление цветом, калибровка монитора, его яркость и соседние цвета влияют на восприятие. Код может быть верным для декодированного пикселя, не доказывая совпадение с другим устройством, печатью, краской, товаром или официальным файлом. Для точного производства вернитесь к авторитетному исходнику и его документированному цветовому пространству.
Переходите от HEX и RGB к управляемому редактированию HSB
HEX и RGB сохраняют компактные прямые значения каналов для веб-работы, а HSB перестраивает тот же цвет в тон, насыщенность и яркость. Тон указывает общее семейство, насыщенность показывает интенсивность или приглушённость, а яркость описывает максимальный канал модели. Пипетка округляет HSB для понятной передачи и оставляет соответствующие HEX и RGB рядом.
После считывания откройте HSB-пипетку, чтобы сделать контролируемый вариант. Меняйте один канал за раз, копируйте новый HEX и храните исходный образец в палитре. Яркость HSB не равна воспринимаемой светлоте и не является коэффициентом доступного контраста. Для двух сохранённых цифровых цветов используйте калькулятор Delta E с видимыми образцами; для читаемого текста применяйте требуемый способ расчёта к реальным цветам текста и фона.
Локальная обработка уменьшает ненужную передачу изображений
Приватный скриншот может содержать имена, сообщения, неопубликованные макеты и другой контекст, не связанный с нужным цветом. Пипетка не загружает его на сервер: файл декодируется во вкладке и рисуется на локальном холсте. При копировании в буфер попадает только показанный код, а скачивание создаёт на устройстве новый подписанный PNG палитры. Исходное изображение в этот экспорт не включается.
Локальная обработка всё равно требует обычной осторожности с устройством. Человек рядом видит открытое изображение, расширения имеют собственные разрешения, а скачанная палитра остаётся до удаления. Закройте или обновите вкладку, чтобы очистить рабочее состояние, и не открывайте материалы без права на просмотр. Это описание относится к пути кода Toon Tone, а не к операционной системе, расширениям или файлам, которыми вы поделитесь позже.
Превратите считанную палитру в осознанную практику
Полезное упражнение разделяет наблюдение и воспоминание. Считайте значимую область, запишите её HSB, затем спрячьте изображение и код. Восстановите цвет по памяти и только потом проверьте. Сначала сравните тон, затем насыщенность и яркость: назвать крупнейшее отклонение полезнее, чем просто решить, что ответ выглядел неверно. Повторите позже с другим источником, чтобы кратковременная память чисел не подменяла визуальное обучение.
Toon Tone связывает этот процесс с игровыми заданиями о персонажах, но загруженные картинки не становятся публичными вопросами и не сохраняются. Используйте пипетку изображения для разрешённого источника, HSB-пипетку для управляемых правок, Delta E для сравнения двух цифровых образцов и игру для практики без видимой подсказки. Каждый инструмент отвечает на более узкий вопрос, поэтому результат проще понимать и повторно использовать.
Продолжить работу с выбранным цветом
Вопросы о пипетке цвета с изображения
Toon Tone загружает моё изображение?
Нет. Выбранное или вставленное изображение декодируется и считывается в текущей вкладке. У страницы нет загрузочного API, библиотеки аккаунта или облачного сохранения.
Какие форматы изображений поддерживаются?
Используйте форматы, которые декодирует ваш браузер: обычно JPG, PNG, WebP, GIF и другие. Ограничение 12 МБ поддерживает отзывчивость локальной рабочей области.
Почему цвет меняется при соседнем клике?
Соседние пиксели могут содержать сглаживание, тень, блик, текстуру, прозрачность или следы сжатия. Используйте лупу и стабильную внутреннюю область для базового цвета.
Точны ли значения HEX и RGB?
Они точны для выбранного декодированного пикселя холста. Они не доказывают совпадение скриншота с исходником, другим профилем, калиброванным дисплеем, печатью или товаром.
Можно ли создать палитру из одной картинки?
Да. Сохраните до пяти разных цветов, скопируйте их HEX, RGB и HSB либо скачайте подписанную PNG-палитру.
HSB и HSL — одно и то же?
Нет. HSB обычно соответствует HSV, а HSL иначе рассчитывает ось светлоты. При переносе процентов сохраняйте рядом HEX или RGB.