Как пользоваться: Пипетка для цвета из изображения
- 1
Откройте изображение
Перетащите, выберите или вставьте скриншот, фото или логотип размером до 25 MB в формате JPG, PNG, WebP, AVIF, HEIC, GIF или SVG.
- 2
Наведите лупу
Проведите курсором или пальцем по изображению: лупа 11 × 11 пикселей покажет точный пиксель под перекрестием и его HEX-код.
- 3
Нажмите, чтобы выбрать цвет
Вы получите значения HEX, RGB, HSL и OKLCH, у каждого своя кнопка копирования. Стрелки сдвигают перекрестие, Enter выбирает цвет.
- 4
Возьмите палитру
Выберите от 5 до 12 основных цветов и скопируйте их как CSS-переменные, JSON или блок темы Tailwind.
Лимиты и Pro
Одно изображение за раз, до 25 MB, без ограничений на число выбранных цветов, палитра из 5–12 цветов и история из 24 цветов.
В Pro можно работать с изображениями до 4 GB. Смотреть Pro
О инструменте «Пипетка для цвета из изображения»
Пипетка для изображений считывает точное значение любого пикселя и превращает всю картинку в палитру. Каждый выбранный цвет выдаётся в четырёх записях: HEX для дизайнерских программ, rgb() и hsl() для CSS и oklch() для современной работы с цветом в CSS, где светлота и насыщенность ведут себя так, как привычно глазу. Выбранные цвета попадают в историю из последних 24 цветов; она хранится в этом браузере, поэтому сохранится до следующего визита. В Chrome и Edge на компьютере кнопка «Выбрать на экране» ещё и берёт любой цвет за пределами страницы через встроенную пипетку браузера.
Палитра считается кластеризацией k-means в цветовом пространстве OKLab на копии изображения, уменьшенной до 200 пикселей по длинной стороне. Похожие кластеры объединяются, прозрачные пиксели игнорируются, а цвета сортируются по доле на изображении; эта доля указана на каждом образце. Одно и то же изображение всегда даёт одну и ту же палитру.
Инструментом пользуются, чтобы подобрать фирменный цвет по логотипу, собрать тему по фото, проверить точный цвет кнопки на скриншоте или составить мудборд. Значения даны в стандартном sRGB, как браузер показывает изображение, поэтому артефакты JPG или широкий цветовой охват исходника могут сдвинуть результат на несколько единиц относительно дизайнерского файла. Для полупрозрачных пикселей цвет указывается без учёта прозрачности. Названия цветов инструмент не подбирает и контрастность не проверяет.
Конфиденциальность
Изображение декодируется и анализируется в этой вкладке, а кластеризация палитры идёт в небольшом Web Worker, который создаётся после открытия файла; на сервер ничего не загружается. История цветов хранится только в локальном хранилище этого браузера, а «Выбрать на экране» использует встроенную пипетку браузера, которая передаёт странице только один выбранный цвет.
Возможности
Лупа с точностью до пикселя
Лупа 11 × 11 пикселей и сдвиг клавишами для точного выбора мышью и касанием.
Основная палитра
От 5 до 12 цветов методом k-means в OKLab, по убыванию доли на изображении.
Экспорт для разработчиков
Значения HEX, RGB, HSL и OKLCH, а также CSS-переменные, JSON или блок @theme для Tailwind.
История цветов
Последние 24 цвета хранятся в этом браузере, их можно скопировать списком.