Adjust temperature to LAB color space

Question

I am trying to implement a color temperature changing functionality in javascript (HTML5 canvas). From my research, I concluded that the best approach for this would be to convert RGB to LAB and then adjust the B component from LAB (A -> Tint & B -> Temperature)

However, I also implemented a code that converts degrees Kelvin to an RGB value . So I have both of my needed components; image data and my temperature.

My approach was to convert every pixel to LAB and the temperature RGB also to LAB and interpolate between those values. I just don't know if this is the right approach though.

Or is there a better way to apply temperature to an image based on a certain degrees Kelvin?

i would find a way to make the adjustment in RGB. even if a bit more complicated to do the actual adjustment, it's far simpler to avoid all the conversion just to make the adjustment a bit simpler... — dandavis

lomas09 lomas09 · Accepted Answer · 2016-07-28T19:23:58

Doing more research I came across this algorithm that takes care of temperature adjustment without doing any color conversions.

//code from http://www.tannerhelland.com/5675/simple-algorithms-adjusting-image-temperature-tint/
//Given a temperature adjustment on the range -100 to 100,
//apply the following adjustment to each pixel in the image:

r = r + adjustmentValue
g = g
b = b - adjustmentValue

//Given a tint adjustment on the range -100 to 100, 
//apply the following adjustment to each pixel in the image:

r = r 
g = g + adjustmentValue
b = b

Adjust temperature to LAB color space

1 Answers