Пипетка цвета с фото: HEX, RGB, HSL и Lab

Как пользоваться

Нажмите Выберите файл или перетащите картинку в окно. Можно также вставить её сочетанием Ctrl+V.
Наведите указатель на нужную часть картинки. Лупа покажет пиксели вокруг, а блок Цвет под указателем даст цвет в четырёх записях.
Выберите Размер выборки 3 × 3 или 5 × 5, чтобы считать среднее небольшой области, а не один пиксель.
Щёлкните картинку, чтобы добавить цвет в Выбранные цвета, затем нажмите HEX, RGB, HSL или Lab, чтобы его скопировать.

Один пиксель или среднее

У фотографии есть шум: соседние пиксели могут немного различаться даже на ровной поверхности, поэтому один пиксель может быть чуть неточным. Инструмент может усреднить квадрат 3 × 3 или 5 × 5 вокруг указателя. На участке одного цвета среднее даёт более устойчивое значение, чем один пиксель.

Четыре записи

HEX и RGB — обычные записи в веб- и дизайн-программах. HSL описывает цвет оттенком, насыщенностью и светлотой, что помогает, когда нужен более светлый или тёмный его вариант. Lab (CIE L*a*b*, с белой точкой D65, которую использует sRGB) повторяет то, как глаз видит цвет: равные шаги в Lab выглядят примерно равными, поэтому запись удобна для сравнения двух цветов. Функция lab() в CSS использует белую точку D50, поэтому её числа отличаются от этих.

Ваша картинка остаётся на вашем устройстве

Картинка открывается и читается в вашем браузере. Ничего не загружается, выбранные цвета не сохраняются, а список очищается при уходе со страницы.

Пример: чистый красный

Чистый красный, #FF0000, читается как rgb(255, 0, 0), hsl(0, 100%, 50%) и L*a*b* 53,2; 80,1; 67,2 (D65). Чтобы считать красный логотипа, поставьте Размер выборки 5 × 5 пикселей, чтобы один шумный пиксель не определял цвет.

Частые вопросы

Загружается ли моя картинка, когда я считываю её цвета?

Нет. Картинка открывается и читается в вашем браузере, на вашем устройстве. На сервер ничего не отправляется, а сохранённые цвета не запоминаются: они очищаются при уходе со страницы.

Совпадает ли цвет в результате с тем, что на моём экране?

Не всегда. В результате показано значение, записанное в пикселях картинки. Экран, его калибровка и цветовой профиль картинки могут менять вид цвета, поэтому числа — это собственные значения картинки, а не измерение экрана.

В чём разница между HEX и RGB?

Это два способа записать одни и те же три значения. HEX записывает каждое значение от 0 до 255 в шестнадцатеричной системе, поэтому rgb(255, 128, 0) — это #FF8000, а RGB записывает те же числа в десятичной. Оба принимаются веб- и дизайн-программами.

Зачем инструмент показывает значение Lab?

Lab описывает цвет так, как его видит глаз: светлотой и двумя осями цвета. По нему лучше видно, близки ли два цвета, чем по HEX или RGB, где близкие цвета могут иметь заметно разные числа.

Почему очень большая картинка может читаться немного иначе?

Для скорости цвета читаются с копии не больше 2 048 пикселей по большей стороне. Цвет большой области остаётся тем же, но один крошечный пиксель в огромной фотографии может быть усреднён с соседними.

Можно ли считать цвета с прозрачного PNG?

Да. В результате показан цвет, записанный в каждом пикселе; прозрачность не входит в считывание. Для прозрачной области показано записанное значение, а не тот цвет, который вы видите на странице за картинкой.

Источники

Цифры и текст в последний раз проверены вторник, 10 ноября 2026 г..