Пипетка по картинке — цвет в HEX, RGB и палитра
Браузерный инструмент, который определяет коды цветов на изображении и строит основную палитру
Работает в браузере · файлы никуда не загружаются
Перетащите изображение, из которого нужно взять цвет
Одно изображение, например JPG, PNG или WebP. Можно также вставить скопированную картинку сочетанием Ctrl+V (⌘V на Mac). Оно не покидает ваш браузер.
Нажмите или коснитесь изображения, чтобы взять цвет под курсором. После щелчка курсор можно двигать стрелками (Shift + стрелка — на 10 пикселей).
Лупа
Курсор: -
Выбранный цвет
Цвет пока не выбран. Нажмите на изображение.
Основная палитра
Палитра строится методом k-means: изображение уменьшается, а похожие цвета объединяются в группы. Одно и то же изображение всегда даёт одинаковый результат. Нажмите на цвет, чтобы загрузить его наверх.
Что это
Этот инструмент показывает цвет любого пикселя фотографии или макета в виде кода HEX (#2563EB), а также в RGB и HSL. Нажмите или коснитесь изображения, чтобы выбрать пиксель, — лупа увеличит область вокруг, чтобы вы попали точно в нужное место. Кроме того, инструмент автоматически строит палитру из 5–8 самых заметных цветов.
Как пользоваться
- Перетащите изображение или нажмите Выбрать изображение. Скопированную картинку можно вставить сочетанием Ctrl+V (⌘V на Mac).
- При движении по изображению Лупа справа показывает увеличенные соседние пиксели. Нажмите или коснитесь нужного места.
- Посмотрите HEX, RGB и HSL в блоке Выбранный цвет и нажмите Копировать.
- После щелчка по изображению стрелки двигают курсор на один пиксель, а Shift со стрелкой — на десять, для более точной настройки.
- В блоке Основная палитра выберите от 5 до 8 цветов и нажмите на образец, чтобы загрузить его в значения выше.
Как это работает
- HEX: каждый канал записывается двумя шестнадцатеричными цифрами заглавными буквами. R37 G99 B235 дают #2563EB.
- HSL: тон от 0 до 360 градусов, насыщенность и светлота от 0 до 100 %, с округлением до целых. Цвет выше — hsl(221, 83%, 53%).
- Палитра: пиксели с непрозрачностью не менее 50 % группируются методом k-means (инициализация k-means++, фиксированное зерно, не более 20 итераций), центры округляются. Крупные группы идут первыми, рядом указана их доля в изображении в процентах.
- Уменьшение: перед кластеризацией изображение уменьшается примерно до 10 000 пикселей, поэтому большие фото обрабатываются быстро. Пиксели берутся без смешивания, так что в палитру не попадает промежуточный цвет, которого нет на картинке.
- Значения цвета: это значения пикселей в том виде, в каком браузер отрисовал их в sRGB; изображение с другим цветовым профилем читается после перевода браузером в sRGB.
Примеры использования
| Задача | Как сделать |
|---|---|
| Узнать фирменный цвет логотипа | нажмите на однородную область и скопируйте HEX |
| Подобрать фон под фотографию | возьмите самый крупный цвет палитры |
| Проверить отдельный пиксель | двигайтесь стрелками и смотрите на лупу |
Частые вопросы
Моё изображение загружается на сервер?
Нет. Отрисовка изображения и чтение значений пикселей происходят в вашем браузере. Ни файл, ни выбранные цвета никуда не отправляются.
Выбранный цвет немного отличается от того, что я вижу.
Инструмент читает значения пикселей, которые браузер отрисовал для экрана в sRGB. Если у изображения есть цветовой профиль вроде Display P3 или Adobe RGB, браузер сначала переводит его в sRGB, поэтому значения могут отличаться от значений документа в редакторе вроде Photoshop. На восприятие влияют и настройки, и яркость монитора. Кроме того, в фотографиях есть мелкий шум, и соседние пиксели немного различаются. Чтобы получить точный цвет, нажимайте внутри однородной области.
Можно ли выбирать цвет с клавиатуры?
Да. Нажмите на изображение один раз или перейдите к нему клавишей Tab, затем двигайте курсор стрелками на один пиксель, а с Shift на десять. Цвет под курсором выбирается сразу. Enter или пробел повторно берут цвет в текущей точке. Лупа показывает соседние пиксели в области 11 × 11.
Как подбирается палитра?
Изображение уменьшается примерно до 10 000 пикселей, и похожие цвета объединяются методом k-means в 5–8 цветов. Начальные точки берутся из фиксированного случайного зерна, поэтому одно и то же изображение всегда даёт одинаковую палитру. Прозрачные пиксели не учитываются.
Работают ли очень большие изображения?
Если длинная сторона больше 4096 пикселей, изображение загружается в этом размере, и цвета берутся из уменьшенной картинки. Если на огромном изображении нужна точность до пикселя, сначала обрежьте нужный фрагмент.
А что с частично прозрачными пикселями?
HEX, RGB и HSL показывают только цвет, без альфа-канала. При выборе полупрозрачного пикселя появится пометка, что альфа не учитывается.
