Как инструмент читает цвет с фото
Фото рисуется на canvas, встроенном в браузер холсте для работы с пикселями. При наведении курсора инструмент читает цвет пикселя под ним и переводит его в HEX и RGB. Вся обработка идёт локально, в браузере. На сервер файл не уходит. Подобранные цвета можно сразу использовать в редакторе пиксель-арта.
Один и тот же пиксель инструмент отдаёт в трёх записях. Это один цвет, разные способы его записать:
| Формат | Пример | Где применяется |
|---|---|---|
| HEX | #3B82F6 | CSS, дизайн-макеты, самый ходовой |
| RGB | rgb(59, 130, 246) | CSS с прозрачностью, canvas, код |
| HSL | hsl(217, 91%, 60%) | когда надо сделать тот же цвет светлее или бледнее |
HSL удобнее остальных именно для правок: чтобы получить оттенок той же гаммы, достаточно изменить последнее число, а в HEX для этого пришлось бы пересчитывать все три пары.
Зачем нужна лупа при наведении
На экране один пиксель занимает доли миллиметра, промахнуться мимо него легко, особенно на мелких деталях фото. Рядом с результатом при наведении курсора появляется круглая лупа с увеличенным участком и рамкой на текущем пикселе. Так видно, что возьмётся, ещё до клика.
Что влияет на точность цвета с фото
Экран показывает RGB, то есть свет. Краска на предмете отражает свет по другим законам, поэтому у экранного и реального цвета разная физическая природа. На итоговый цвет на фото дополнительно влияют освещение и баланс белого при съёмке, сжатие JPEG (оно немного смещает цвета соседних пикселей) и калибровка конкретного монитора. Для дизайна и вёрстки такой точности хватает. Для подбора краски или печати цвет с фото стоит проверить образцом на месте. Там он работает ориентиром, а не финальным значением.