How to calculate "darkness" of a colour?

BlitzMax Forums/BlitzMax Programming/How to calculate "darkness" of a colour?

Chalky

(Posted 2009) [#1]

I am writing a fullscreen window GUI system and want to allow the user to change the colour schemes. Window titles etc. will need to be drawn in either white or black, depending on how dark (or light) the window borders are. Having retrieved the border's RGB value via ReadPixel, how can I tell how "dark" the colour is?

TaskMaster

(Posted 2009) [#2]

Why not just allow them to change the text color as well? Then it is their choice, you you won't have to mess with it.

EOF	(Posted 2009) [#3]

I'm no expert on colour but I believe you would need to convert your RGB to HSL (Hue, Saturation, Luminance)
Where Luminance would give you it's brightness

The code archives has some *.bb code which may help:

http://www.blitzmax.com/codearcs/codearcs.php?code=2333

Also, see:
http://130.113.54.154/~monger/hsl-rgb.html

Who was John Galt?

(Posted 2009) [#4]

Just add the red, green and blue values. This will give you a measure of the brightness.

Czar Flavius

(Posted 2009) [#5]

Just add the red, green and blue values. This will give you a measure of the brightness.

Not necessarily, 255-255-0 yellow is just as bright as either 255-0-0 red or 0-255-0 green for instance. All three have luminosity of 120 according to Paint.

dynaman

(Posted 2009) [#6]

(just a guess here)
use the highest color

255-0-0 is just as bright as 255-255-255. (different shade, but just as bright)

if the number is closer to 255 then use black, otherwise use white.

Czar Flavius

(Posted 2009) [#7]

I'm afraid that doesn't help either, as Paint thinks 255-255-127 is brighter than 255-255-0 :P (and it looks it too, bright shade of yellow) I think you'll need to look up one of dem matamatiks furmulaz.

Chalky

(Posted 2009) [#8]

Why not just allow them to change the text color as well? Then it is their choice, you you won't have to mess with it.

I could do, but my intention is to only allow them to change the colours of the window borders, buttons etc. I could always simply provide a predefined list, which included text colour...

I believe you would need to convert your RGB to HSL (Hue, Saturation, Luminance)
Where Luminance would give you it's brightness

I thought that too, and have already played around with reading the Luminance value but I can find no definite pattern where what appears bright on the screen has a Luminance which falls within a certain value range. Comparatively dark colours have mid-range Luminance values - as do considerably lighter ones. I was hoping I could do something like:

If Luminance<128 then SetColor 255,255,255 Else SetColor 0,0,0

but it looks like it's gonna be more complicated than that...

GfK	(Posted 2009) [#9]

Try this - found it via google, untested:

Brightness:Int = Sqr((R * R * 0.241) + (G * G * 0.691) + (B * B * 0.068))

Apparently that'll return a value between 0-255 denoting the pixel 'brightness'.

Chalky

(Posted 2009) [#10]

Thanks Gfk. That actually works pretty well - much better than my previous attempts using HSL values. Guess I'd better do some more googling now so I can learn how those float values are determined...

GfK	(Posted 2009) [#11]

Guess I'd better do some more googling now so I can learn how those float values are determined...

Well for a start, they add up to 1. Its really just calculating an average which is 69% biased towards green as that's brighter than both red and blue.

There's likely no reason for those values beyond trial and error.

xlsior

(Posted 2009) [#12]

GfK's suggestion will work -- the human eye is more sensitive to certain colors in the light spectrum, so not all mixtures are perceived at the same brightness. You're most sensitive to green and least sensitive to blue, so you need to take that into consideration when determining the strength.

when I wrote my color-to-monochrome conversion (it's somewhere in the code archives), I found the following values as the recommended ones on the internet:

red: 0.299
green: 0.587
blue: 0.114
brightness = (R*0.299)+(G*0.587)+(B*0.114)

all in all, it seemed to work pretty well. The principle is still the same as Gfk suggested, though -- by converting the value to 'proper' black and white (monochrome), all you're left with is the brightness essentially.

_Skully

(Posted 2009) [#13]

Brightness:Int = Sqr((R * R * 0.241) + (G * G * 0.691) + (B * B * 0.068))

Strange.. looks like a 3D distance formula with axis weighting ;) Looks sound though