To use this "tool" go on your computer and copy an image file, come back here and do ctlr+v or cmd+v or something similar. The image should appear along with a little slider. You are encouraged to touch this slider.
NB! The code is NOT fast and it's better to use a smaller image if you just wanna play around.
The image on the left is hue shifted the "regular way". The image on the right is hue shifted in the OKLAB space, which (as its main trick) preserves lightness when you hue shift! If you compare the two images, you should notice that the left one changes in brightness while the right one doesn't (as much).
A problem is that OKLAB allows for vivid, beautiful colors that are not representable in RGB. But i need to convert the image back to RGB after shifting to be able to display it in the browser. This means that in some cases, the colors behave strangely - you will see bright reds in unexpected places, for example. What i should do is detect these occurences and map to the closest representable RGB value, but i wont. Tihi!!
NB 2! I'm using OKLAB and OKLCH a bit interchangeably here. The color space is called OKLAB. OKLCH is navigating the same space but using polar coordinates instead of cartesian. OK means okay, and the rest are dimensions: Luminosity, A, and B (think x and y over a color picker). OKLCH is instead okay Luminosity, Chroma, Hue. And that last Hue is what we want to change! Basically, to hue shift, we convert the original pixel's RGB into (linear RGB into) OKLAB into OKLCH, add some value to the H, then convert backwards OKLCH into OKLAB (into linear RGB) into RGB.
Lastly. If you want to save the right image, but Firefox doesn't wanna do the "save image", you can maybe .