Пипетка: цвет с картинки
Показывает цвет любой точки изображения в HEX, RGB и HSL и собирает палитру снимка. Картинка обрабатывается в браузере и никуда не загружается.
Палитра снимка
Что показывает пипетка и как считается палитра
Пипетка показывает цвет любой точки картинки сразу в трёх записях: HEX для вёрстки и дизайн-редакторов, RGB для расчётов, HSL для подбора оттенка. Картинка открывается в браузере через холст: файл не загружается на сервер, поэтому годится и для рабочего макета, и для скриншота с чужого сайта. Лупа увеличивает пиксели под курсором, чтобы попасть в тонкую линию или в букву, а клик фиксирует цвет и копирует HEX.
Палитра снимка собирается отдельно. Инструмент уменьшает копию картинки, группирует близкие оттенки по сетке в 32 уровня на канал и считает, сколько точек попало в каждую группу. Дальше берутся самые частые группы, но каждая следующая — только если она заметно отличается от уже выбранных: без этого правила у тёмного скриншота получалось восемь оттенков одного и того же чёрного. Итог — восемь цветов, которые действительно описывают картинку.
| Запись | Как выглядит | Где пригодится |
|---|---|---|
| HEX | #4C6EF5 | CSS, Figma, письма дизайнеру |
| RGB | rgb(76, 110, 245) | расчёты, градиенты, код |
| HSL | hsl(228, 90%, 63%) | подобрать светлее или бледнее тот же тон |
| Альфа | 0.60 | прозрачные области PNG и скриншотов |
История: от вееров Pantone до пипетки в браузере
Пока цвет смешивали руками, его описывали образцами. В 1963 году американская компания Pantone выпустила систему сопоставления цветов: типография и заказчик держали в руках одинаковые веера с напечатанными плашками и номерами, и спор о том, какой именно красный имелся в виду, заканчивался номером. Тот же принцип живёт в строительных и текстильных каталогах до сих пор.
На экране цвет пришлось описывать числами. Модель RGB опирается на три канала свечения, а цилиндрические модели вроде HSL и HSV предложил в 1978 году Элви Рэй Смит: в них тон, насыщенность и светлота разделены, поэтому оттенок подбирается на глаз быстрее. В 1996 году HP и Microsoft описали пространство sRGB — общий знаменатель для мониторов и веба, из-за которого один и тот же HEX выглядит примерно одинаково на разных экранах.
Инструмент-пипетка появился вместе с растровыми редакторами: в первой версии Photoshop 1990 года он уже был, и с тех пор иконка с пипеткой означает одно и то же в любой программе. В вебе долго приходилось обходиться скриншотом и холстом, пока браузеры не добавили системную пипетку: в Chrome и Edge она берёт цвет из любой точки экрана, и кнопка для неё появляется здесь автоматически.
Как снять цвет точно и что с ним делать дальше
Скриншот удобнее вставлять прямо из буфера: снимите область и нажмите сочетание вставки, загружать файл не нужно. Наводите лупу на однотонный участок: на границе двух цветов и на тексте браузер покажет промежуточный оттенок, потому что там работает сглаживание. Клик добавляет цвет в ряд последних, а клик по любому квадрату из этого ряда копирует его снова.
Палитра снимка отвечает на вопрос «в каких цветах это сделано», и восемь оттенков для этого достаточно: тонкие переходы всё равно сливаются в соседнюю группу. Если нужен точный цвет из исходного файла, берите его в самом редакторе — предпросмотр и скриншот могут быть в другом цветовом профиле, и оттенок сместится на пару единиц. Для веба этого хватает, для печати цвет сверяют по вееру. Дальше цвет пригодится в конвертере цветов и контраста, а собрать вокруг него сочетание поможет подбор сочетаний.
| Записей цвета | HEX, RGB, HSL |
| Цветов в палитре | 8 |
| История цветов | последние 8 |
| Группировка | 32 уровня на канал |
| Системная пипетка | Chrome и Edge |
| Pantone | 1963 год |
| HSL и HSV | 1978 год |
| Файл на сервер | не уходит |
Как пользоваться
- Перетащите файл, выберите его кнопкой или вставьте скриншот из буфера.
- Лупа увеличивает пиксели, чтобы попасть точно в нужную точку.
- Клик фиксирует цвет и копирует HEX; RGB и HSL показаны рядом.
- Инструмент выделяет основные цвета снимка — их тоже можно скопировать.
Частые вопросы
Картинка загружается на сервер?
Нет. Файл открывается прямо в браузере через canvas: страница не отправляет изображение никуда, поэтому подходит и для рабочих макетов.
Какие форматы открываются
Всё, что умеет показывать браузер: JPG, PNG, WebP, GIF, BMP и SVG. Файлы HEIC с айфона большинство браузеров не открывает — сохраните такой снимок в JPG.
Можно ли взять цвет прямо с экрана
Да, если браузер поддерживает системную пипетку: кнопка «Взять цвет с экрана» появляется в Chrome и Edge. В остальных браузерах сделайте скриншот и вставьте его сюда сочетанием Ctrl+V.
Что означают HEX, RGB и HSL
Это три записи одного цвета. HEX ждут вёрстка и дизайн-редакторы, RGB удобен для расчётов, HSL показывает тон, насыщенность и светлоту — по нему проще подобрать оттенок.
Как собирается палитра снимка
Инструмент проходит по уменьшенной копии картинки, группирует близкие оттенки и показывает восемь самых частых. Это грубая оценка: тонкие переходы попадают в соседнюю группу.
Почему цвет отличается от того, что в фотошопе
Скриншот и предпросмотр могут быть в другом цветовом профиле, а браузер приводит картинку к своему. Для точной работы берите цвет из исходного файла в самом редакторе.
Цвет копируется с прозрачностью
Прозрачные точки показываются как есть, но в HEX и RGB попадает только цвет. Прозрачность видно по значению альфа-канала рядом.
Похожие инструменты
Сантиметры и дюймы на экране, вертикальный и полноэкранный режимы, метки для замера предмета и калибровка по банковской карте, монете или диагонали.
ОткрытьВиртуальная клавиатураЭкранная клавиатура для ввода мышью: русская ЙЦУКЕН и английская QWERTY, Shift и Caps Lock, цифры и символы, копирование текста.
ОткрытьКакой вариант выбратьСравнение вариантов по своим критериям с весами: лидер, отрыв от второго места, устойчивость результата и что должно измениться, чтобы выбор перевернулся.
ОткрытьЧто знает обо мне браузерКакие данные сайт получает без единого разрешения: браузер и система, экран, часовой пояс, ядра, память, видеокарта. Рядом отпечаток и разбор, что из этого делает вас узнаваемым.
ОткрытьКалькулятор размера MP3Рассчитайте размер MP3-файла по длительности, битрейту и количеству записей. Показывает объём одной композиции и всей подборки.
ОткрытьКалькулятор битрейта и трафика стримаРассчитайте требуемую скорость отдачи и объём трафика для стрима по видео- и аудиобитрейту, длительности трансляции и запасу канала.
ОткрытьЕщё утилиты
Фавикон и свой IP, конвертер цветов с проверкой контраста, ссылка WhatsApp, расчёты битрейта и PPI, компас и линейка — в разделе 16 утилит.