Is there any way to change the hue of an entire webpage client side?

Question

Haven't been able to find any sort of information about this. Seems like it should be possible...

Is there any way to change the hue of an individual element (like say an image) with js?

Answer 1

If you want to tint the image a specific color, you could overlay a translucent colored div.

If you mean actually shifting the hues of the image, like you might do in Photoshop, I don't believe Javascript can do that in any major browsers.

Answer 2

You can access an image's data using the canvas API. Then you can change the colours. This can be very expensive though (take a little while to render).

For doing the whole page, you could do

#overlay {
    display: block;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: red;
    opacity: 0.7; /* check IE's proprietary filter */
}

Answer 3

The only way I can think of doing it is something along these lines:

1. Go through every element in the page, find it's COMPUTED background color and text color. Use something like ColorJizz to change the hue.
2. Find every image - including backgrounds images. Maybe again you could do this by finding the computed styles. It'd be tricky.. You then have the option of either redirecting them to a server side script that can change the hue of those, or replacing them with a canvas element and going through every pixel and changing the color of that. Again - colorjizz would work for this, but it'd be VERY slow.

Generally though, I wouldn't recommend doing any of this. It'd be VERY hard to get right.