drawing of a floating creature. it has nothing to do with this page. but it is a prime target for hue shifting i guess
Hej welcome 2 "OKLCH rotate" it's tinytool 4 to rotate the image. Copy an image and paste it here to get started. If you are on mobile don't be on mobile. Other GFX scripts...
I mean rotate as in rotate the colors along the color wheel, not transforming the image itself. It's a hue shift thing. OKLAB is a good color space for this apparently and i wanted to check it out.

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 .