Welcome to WebmasterWorld Guest from 23.22.17.192

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

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

5+ Year Member



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.

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

10+ Year Member



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.

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

10+ Year Member



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.

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

5+ Year Member



I've made something simple.
$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>';
3:05 pm on Aug 20, 2005 (gmt 0)

10+ Year Member



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>';

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

5+ Year Member



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.

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

10+ Year Member



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.