How to convert to-and-from colors with pictures or videos (YIQ, YUV, YCbCr, RGB, CMY, HSV, HSL, LCH...), not a object?

[Winston]

I was looking for code that switches R with H, G with S and B with L in JS, CSS, HTML, and so. Having no success, it kept giving me a color picker and color code, no matter how I describe it to Google, and it is leaving me no other choice but to ask for help. How do I switch colors in videos and pictures from and/or to RGB and other programmed in a .HTM page?

 

PS: I don't want to edit the picture in a different program, I want to display it differently on the page.

 

Suggestions? Do I need a color map or brightness map? Help would be appreciated.

[Ingolme]

You probably would have to do the math yourself for each pixel and draw the result on a canvas. I don't think that would run fast enough to work on videos. There is nothing natively in Javascript or HTML that converts between RGB and HSL colors that I am aware of.

To run algorithms on individual pixels, I would use getImageData() and putImageData() to do pixel manipulation.

[Ingolme]

Adding to my previous post, it looks like browsers are fast enough to process pixel data of videos after all, as in the example shown here: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas

[TonyC]

On 6/2/2021 at 6:30 AM, Winston said:

I was looking for code that switches R with H, G with S and B with L in JS

There is no direct link between R and H, G and S, and B and L. The RGB value as a whole must be converted to HSL.  There's a formula, I don't know it, but I'm sure you can do a search for it.  As Ingolme explained, I think it would have to be done on a pixel by pixel basis.  Is there an effect you are trying to create (like added brightness or contrast or hue change)?  If so, that can be done easily with CSS Filters.  BTW Ingolme, nice find, I had no idea that you could convert green screen to a background LIVE, that's very impressive.   

Edited November 3, 2021 by TonyC