ПаветтаПипетка: цвет с картинки
Показывает цвет любой точки изображения в 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 попадает только цвет. Прозрачность видно по значению альфа-канала рядом.
Спросите нейросети об инструменте
Больше возможностей: Нейросеть для фото, ретушь, реставрация, фон; увеличение бесплатно.
Похожие инструменты
HEX, RGB и HSL в одном окне, шкала оттенков одного тона и проверка контраста по WCAG с ответом, годится ли цвет для текста.
ОткрытьСочетание цветовГармоничные палитры по цветовому кругу: комплементарные, триада, аналоговые. С симуляцией дальтонизма и контрастом пар.
ОткрытьТест ЛюшераЦветовой тест Люшера из восьми цветов: два выбора с паузой, расшифровка по группам плюс, крест, равно и минус, тревожность, вегетативный коэффициент Шипоша и отклонение от аутогенной нормы.
ОткрытьОбжим витой парыКак обжать витую пару: распиновка RJ-45 по цветам T568B и T568A, прямой и перекрёстный кабель, 4 жилы и 8 жил, PoE, категории кабеля и порядок обжима.
ОткрытьКалькулятор битрейта и трафика стримаРассчитайте требуемую скорость отдачи и объём трафика для стрима по видео- и аудиобитрейту, длительности трансляции и запасу канала.
ОткрытьКалькулятор стоимости токеновСколько выйдет за месяц работы с моделью ИИ у пяти сервисов доступа из России: ввод и вывод считаются отдельно, рядом цена самого разработчика модели.
ОткрытьЕщё утилиты
Фавикон и свой IP, конвертер цветов с проверкой контраста, ссылка WhatsApp, расчёты битрейта и PPI, компас и линейка — в разделе 16 утилит.