# Selecting a color that will be readable overlapped upon another? [duplicate]

I've got random circles from random colors of RBG (assume they can be any combination of values). I have some text I want to write on top of them but I want the color to be readable on it no matter the color of the bubble. How can I pick a complimentary color?

## marked as duplicate by Ilmari Karonen, Seth Battin, MichaelHouse♦Nov 30 '13 at 15:51

You can pick the opposite color by calculate like this:

maximum - color = opposite color

e.g. white(255,255,255) - red(255,0,0) = cyan(0,255,255)


You can also solve the problem by using a text with a border e.g. inner color white, outher color black -> if the background is black, you cannot see the outer border but the inner white. If the background is white, the border shows the text.

Edit: an example is the caption of the site: "Game Development" -> the inner color is white, the outer color something like gray. The background doesn't matter you can see every character very well.

• This won't work with every colour. Try (127,127,127) for example. – Adam Nov 29 '13 at 23:49
• That's because grey has no opposite color :D – fedab Nov 30 '13 at 11:58

One simple solution is to pick either black or white depending on how bright the colour is. Something like this:

float GetIntensity(float r, float g, float b)
{
return r * 0.299f + g * 0.587f + b * 0.114f;
}

if (GetIntensity(r, g, b) < 0.5f)
{
RenderTextWhite();
}
else
{
RenderTextBlack();
}


It has the benefit that you don't need to worry about weird looking text colours, or colour blindness in the viewer.