homepage Welcome to WebmasterWorld Guest from 54.163.91.250
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / PHP Server Side Scripting
Forum Library, Charter, Moderators: coopster & jatar k

PHP Server Side Scripting Forum

    
Detecting if a color is dark of light
To place black or white text on it
fromholland




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

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




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

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




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

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




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

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

Aleister




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

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




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

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




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

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / PHP Server Side Scripting
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved