Choose Foreground Color based on Background Color

# Thread: Choose Foreground Color based on Background Color

1. Member
Join Date
Dec 1969
Posts
43

## Choose Foreground Color based on Background Color

Hi, has anyone got any ideas for some sort of function/formula that looks at a hexidecimal color ( just stored in a variable ), which will be used as the background color, and based on that value, decides on whether to use black or white as the foreground text color ?<BR><BR>Say takes the color combination of each RGB part of the hexidecimal and maybe does some calculations to say that black or white would look "better" on it...<BR><BR>Or would that be impossible to you think ?<BR><BR>Thanks,<BR>adam

2. Senior Member
Join Date
Dec 1969
Posts
2,050

## RE: Choose Foreground Color based on Background Co

Since RGB 255,255,255 is pure white and RGB 0,0,0 is black, find the 50% range of the color. If it&#039;s closer to pure white, use a black background. if it&#039;s closer to pure black, use a white background.<BR><BR>For example, Dark red is around RGB of 133,0,0. Converted to Hex, that&#039;s #850000. In Decimal, that&#039;s 8,716,288.<BR>Pure white is RGB: 255,255,255 Hex: #FFFFFF Decimal: 16,777,215.<BR>Pure Black: Hex: #000000 Decimal: 0<BR>Hence, Dark Red is within the lower range of the scale. So, since it is, you would use a white background.<BR>

3. Member
Join Date
Dec 1969
Posts
43

## RE: Choose Foreground Color based on Background Co

thanks for that. but one question though, you say "lower range of the scale", as in halfway between 0 and 16,777,215 ? is this what you mean ? in that case, dark blue ( #000080 ), has a decimal equivalent of 128, but as you would agree, white would also look better on it, as it would with dark red, but the decimal equivelant of each number ( dark red and dark blue ), are at different ends of the "scale"...this is because your answer ( or the answer i think your saying ), looks at the hexadecimal color as one big number ( 850000 ) rather than each individual component ( 85-00-00 ). would you agree this is the problem ?<BR><BR>maybe i dont understand you answer completely either !<BR>thanks, adam

4. Senior Member
Join Date
Dec 1969
Posts
2,050

## RE: Choose Foreground Color based on Background Co

Hmm you&#039;re right! My logic is flawed. You would probably need to take the individual numbers, and judge their brightness. Take dark blue:<BR>Hex: #000080<BR>Decimal: 128<BR>RGB: 0,0,128<BR><BR>And take dark red:<BR>Hex: #800000<BR>Decimal: 8388608<BR>RGB: 128,0,0<BR><BR>I think it&#039;d do use good to get rid of the decimal altogether, and just use RGB. Since 128 is the mid-range, you could do a check to see if ANY RGB value of the color is OVER 128. If it is, then use a black background. If it isn&#039;t, use white.<BR>Let me know how that works. This is compelling. You might need to adjust the percentage value, and make sure you account for values that exactly equal 128. What would the program do if it were ALL 128&#039;s (gray)?<BR><BR><BR>

5. Member
Join Date
Dec 1969
Posts
43

## RE: Choose Foreground Color based on Background Co

good ideas. just looking at the windows color palette, i think the general rule can be applied that if 2 or more of the individual RGB colors are greater than 128, then use black.... otherwise use white...<BR><BR>thats probably a very rough but reliable rule i would think...

6. Senior Member
Join Date
Dec 1969
Posts
342

## RE: Choose Foreground Color based on Background Co

Personally I would add the three components together and compare it to some fixed number - if it&#039;s higher than the fixed number then use black, else use white. Maybe start with 384 (128+128+128) and adjust to taste.

#### Posting Permissions

• You may not post new threads
• You may not post replies
• You may not post attachments
• You may not edit your posts
•