Пипетка для изображения — узнайте HEX-код любого пикселя

Что делает эта пипетка

Это пипетка, а не генератор палитры: вы сами решаете, какой пиксель взять, а инструмент сообщает ровно то, что там записано. Объяснения заслуживает способ получения пробы, потому что очевидный подход тут незаметно ошибочен. Отрисовать всё изображение на один холст и считывать пиксели оттуда не выйдет на больших фотографиях: браузеры ограничивают суммарную площадь холста примерно 16,7 миллиона пикселей, около 4096 на 4096, а 24-мегапиксельный файл с камеры легко это превышает. Уменьшение изображения до допустимого размера превратило бы каждую пробу в среднее нескольких исходных пикселей — и первым потерялось бы ровно то единственное, что пипетка обязана делать правильно. Вместо этого проба перерисовывает лишь небольшое окно вокруг указателя прямо из декодированного файла в масштабе один к одному. Исходный и целевой прямоугольники одинакового размера, поэтому браузер копирует пиксели, а не пересчитывает их, и вы получаете собственные байты файла, каким бы большим он ни был. Предпросмотр, который вы видите, может быть уменьшен под лимит холста или под ваш экран, но проба никогда не берётся с него. То же окно питает лупу: она рисует каждый исходный пиксель квадратом в 13 пикселей с сеткой между ними и обводит центральную ячейку чёрным и белым, чтобы она оставалась заметна на любом цвете. Лупа необходима: фотография шириной 4000 пикселей, размещённая в колонке шириной 720 пикселей, укладывает примерно 5,6 пикселя изображения под каждый пиксель экрана. Стрелки сдвигают пробу ровно на один исходный пиксель, а Shift со стрелкой — на десять; это единственный надёжный способ попасть в однопиксельную границу или тонкий сглаженный край. Каждая проба выдаёт HEX, RGB и HSL из одной и той же 8-битной тройки, а также 8-значный HEXA и RGBA, если пиксель не полностью непрозрачен. Реальное ограничение, о котором стоит знать, — управление цветом: в большинстве браузеров холст отбрасывает встроенный ICC-профиль, поэтому значения соответствуют тому, что рисует браузер, а не тому, что показывает редактор с управлением цветом.