Welcome to WebmasterWorld Guest from 54.234.244.30

Forum Moderators: coopster & jatar k

Message Too Old, No Replies

# Detecting if a color is dark of light

## To place black or white text on it

#### fromholland

2:01 pm on Aug 20, 2005 (gmt 0)

#### Junior Member

joined:June 1, 2005
posts:43

I've got a background color in my database and I have to detect if it is dark or light. Actually, it's because Google is also always showing 'Ads by Google' in black or white.

So, does anyone know how I can check this.

You need to know how the hexadecimal system works :)

Thank you very much in advance.

#### Aleister

2:20 pm on Aug 20, 2005 (gmt 0)

#### Junior Member

joined:Aug 2, 2004
posts:96

This page explains how you can use hexdec to convert from hex to decimal. There is also an example in the comments of how to use it for a color, returning an array with the red, green, blue elements.

[us2.php.net...]

Each element will be between 0 and 255 of course. The tricky part will be deciding what 'dark' is, since a color like blue for example even at 255 would alway look good with white text, but a 255 green might look better with white, then you have combinations etc..

Now if you are dealing with just shades of gray it would be easier. I would split it around 150 for the white/black text decision.

#### Longhaired Genius

2:23 pm on Aug 20, 2005 (gmt 0)

#### Preferred Member

joined:Aug 28, 2002
posts:564

From this W3C document [w3.org]:

Color brightness is determined by the following formula:
((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000

Also search for "Colour Contrast Check" for a fascinating online colour contrast too.

#### fromholland

2:41 pm on Aug 20, 2005 (gmt 0)

#### Junior Member

joined:June 1, 2005
posts:43

\$color="#*******";
\$colorcheck=strtolower(\$color[3]);
if(\$colorcheck>6¦¦is_numeric(\$colorcheck)===false)
echo'<font style="color:black;">Black</font>';
else
echo'<font style="color:white;">White</font>';

#### Aleister

3:05 pm on Aug 20, 2005 (gmt 0)

#### Junior Member

joined:Aug 2, 2004
posts:96

Nice find there Longhaired Genius!

Maybe try this something like this:

``get_brightness(\$hex) { // returns brightness value from 0 to 255 // strip off any leading # \$hex = str_replace('#', '', \$hex); \$c_r = hexdec(substr(\$hex, 0, 2)); \$c_g = hexdec(substr(\$hex, 2, 2)); \$c_b = hexdec(substr(\$hex, 4, 2)); return ((\$c_r * 299) + (\$c_g * 587) + (\$c_b * 114)) / 1000;}``\$color = "#******"; if (\$get_brightness(\$color) > 130) // will have to experiment with this number echo '<font style="color:black;">Black</font>'; else  echo '<font style="color:white;">White</font>'; ``

#### fromholland

3:48 pm on Aug 20, 2005 (gmt 0)

#### Junior Member

joined:June 1, 2005
posts:43

My way is also working, but your's is better.

Is there also a way you can check if there's enough contrast between two colors? So you can check if there's a light yellow color on a light blue background for example.

#### Longhaired Genius

3:58 pm on Aug 20, 2005 (gmt 0)

#### Preferred Member

joined:Aug 28, 2002
posts:564

From the same W3C document:

Color difference is determined by the following formula:
(maximum (Red value 1, Red value 2) - minimum (Red value 1, Red value 2)) + (maximum (Green value 1, Green value 2) - minimum (Green value 1, Green value 2)) + (maximum (Blue value 1, Blue value 2) - minimum (Blue value 1, Blue value 2))

The rage for color brightness difference is 125. The range for color difference is 500.