Пипетка цвета по картинке и палитра из изображения
Кликните в любое место картинки и получите точный цвет. Палитра ниже пересчитывается для каждого изображения. Откройте, перетащите или вставьте свою картинку: она не покидает браузер.
Пример: дизайн лендинга
Цвет под курсором
#000000rgb(0, 0, 0)hsl(0, 0%, 0%)Выбранные цвета
Кликайте по картинке, и цвета будут собираться здесь.
Палитра этой картинки
Загружаем палитру...Как определить цвет по картинке
- Откройте, перетащите или вставьте изображение. Скриншот, скопированный системным сочетанием клавиш, можно вставить сразу.
- Ведите курсором по картинке. Лупа показывает пиксели вокруг курсора, так что можно точно попасть в рамку толщиной в один пиксель.
- Кликните (или коснитесь), чтобы взять цвет. HEX, RGB и HSL появятся справа с кнопками копирования, а цвет добавится в «Выбранные цвета».
С клавиатуры: переведите фокус на картинку клавишей Tab, двигайтесь стрелками (с Shift шаг 10 пикселей) и нажмите Enter, чтобы взять цвет.
Как получить палитру из картинки
Палитра группирует похожие пиксели и показывает сначала самые частые цвета, с долей картинки, которую занимает каждый. Выберите от 3 до 12 цветов: при меньшем числе получите фирменные цвета, при большем проявятся ещё рамки и тени. Копируйте палитру как CSS-переменные в :root, как блок Tailwind theme.extend.colors или простым списком HEX-кодов.
Примеры
- Подобрать фирменные цвета по скриншоту. Для картинки из примера выше при 6 цветах палитра выдаёт лавандовый фон (
#f2f1fd, 73% пикселей), белый цвет карточек (#fcfcfd), два мягких серых для рамок и логотипов, фиолетовый цвет кнопок (#6049f0) и тёмный текст (#3c3b62): ровно тот набор, который нужен для стилей. - Проверить контраст. Возьмите цвет текста и цвет фона под ним, а перед релизом сравните оба HEX-значения в проверке контрастности.
- Собрать тему по фотографии. Перетащите фото товара, выставьте 5 цветов и вставьте блок Tailwind в конфиг, чтобы оформить лендинг в его цветах.
Вопросы о пипетке
Моя картинка куда-то загружается?
Нет. Изображение рисуется на canvas в вашем браузере, и каждый пиксель читается локально. Ничего не покидает устройство, поэтому пипеткой можно пользоваться и для конфиденциальных макетов.
Почему цвет немного отличается от того, что в моём графическом редакторе?
Сжатие JPG и WebP слегка меняет значения пикселей, а у скриншотов может быть другой цветовой профиль, чем у исходного файла. Чтобы получить точные фирменные цвета, берите их из экспорта дизайна в PNG.
Как считается палитра?
Картинка уменьшается примерно до 160 пикселей по длинной стороне, а цвета группируются кластеризацией k-means. Каждый образец равен среднему цвету одной группы, а процент показывает долю пикселей в ней. Одна и та же картинка всегда даёт одну и ту же палитру.
Какие форматы изображений поддерживаются?
Всё, что умеет показывать ваш браузер: PNG, JPG, WebP, GIF (первый кадр), AVIF и SVG. Скриншот можно вставить и прямо из буфера обмена.
Можно использовать палитру в Tailwind CSS?
Да. Вкладка Tailwind выдаёт блок theme.extend.colors. Вставьте его в tailwind.config.js и используйте классы вроде bg-palette-100 или text-palette-300.