Alex Rivera | Logout

How to find good looking font color if background color is known?

Asked 2008-11-19T13:21:55.600
86

There seem to be so many color wheel, color picker, and color matcher web apps out there, where you give one color and the they'll find a couple of other colors that will create a harmonic layout when being used in combination. However most of them focus on background colors only and any text printed on each background color (if text is printed at all in the preview) is either black or white.

My problem is different. I know the background color I want to use for a text area. What I need help with is choosing a couple of colors (the more, the merrier) I can use as font colors on this background. Most important is that the color will make sure the font is readable (contrast not being too low, also maybe not being too high to avoid that eyes are stressed) and of course that the combination of foreground and background just looks good.

Anyone being aware of such an application? I'd prefer a web application to anything I have to download. Thanks.

Edit
Report

3 Answers

39

If you need an algorithm, try this: Convert the color from RGB space to HSV space (Hue, Saturation, Value). If your UI framework can't do it, check this article: http://en.wikipedia.org/wiki/HSL_and_HSV#Conversion_from_RGB_to_HSL_or_HSV

Hue is in [0,360). To find the "opposite" color (think colorwheel), just add 180 degrees:

h = (h + 180) % 360;

For saturation and value, invert them:

l = 1.0 - l;
v = 1.0 - v;

Convert back to RGB. This should always give you a high contrast even though most combinations will look ugly.

If you want to avoid the "ugly" part, build a table with several "good" combinations, find the one with the least difference

def q(x):
    return x*x
def diff(col1, col2):
    return math.sqrt(q(col1.r-col2.r) + q(col1.g-col2.g) + q(col1.b-col2.b))

and use that.

answered 2008-11-19T14:49:55.593
2

This is an interesting question, but I don't think this is actually possible. Whether or not two colors "fit" as background and foreground colors is dependent upon display technology and physiological characteristics of human vision, but most importantly on upon personal tastes shaped by experience. A quick run through MySpace shows pretty clearly that not all human beings perceive colors in the same way. I don't think this is a problem that can be solved algorithmically, although there may be a huge database somewhere of acceptable matching colors.

answered 2008-11-19T13:31:04.660
0

Similar to @Aaron Digulla's suggestion except that I would suggest a graphics design tool, select the base color, in your case the background color, then adjust the Hue, Saturation and Value. Using this you can create color swatches very easily. Paint.Net is free and I use it all the time for this and also the pay-for-tools will also do this.

answered 2008-11-19T19:11:12.180

Your Answer