Javascript Canvas и CSS цвета

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

Для этого я использую canvas и функцию ctx.getImageData и получаю массив с нужными цветами rgba.

С помощью этого массива можно повторить цвет, в рамках самого Canvas, но если попытаться применить этот цвет на стили CSS, то цвет будет другой.

Как я понимаю, между цветовой схемой Canvas и CSS существуют различия. Как построить JavaScript-функцию, которая бы устраняла эти различия?

UPD: я создал небольшой пример.

Там можно увидеть три элемента — широкий div, с цветом rgb(36,43,51), внутри которого находится элемент Canvas, на котором размещено изображение, состоящее из фона такого же цвета и белой полосы слева, и ниже него элемент img с тем же содержимым.

Вы не увидите разницы между цветами div и img, потому что они одни и те же.

Но изображение, отображаемое внутри Canvas имеет совсем другой цвет и заметно выделяется на общем фоне.

Как я понимаю, использование функции ctx.getImageData показывает правильные цвета и для CSS, и для Canvas, но проблема в том, что все цвета внутри тега canvas искажаются.