views:

5448

answers:

16

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.

+7  A: 

Check out kuler, it's a great resource for finding colors that go well together, just do a search for the HTML color code (eg. FF9900). It won't limit the result to only sets that include high-contrast colors with the one you selected, but the sets typically will have a combination of low and high contrast colors.

J c
But just because they look well together doesn't mean that the color pairs would increase readability.
Thomas Owens
Each search result is actually more than a pair, it is a set of three to five colors, which typically include good choices for foreground/background color.
J c
It's true that it won't automatically evaluate readability though, but I thought being able to search for user-generated sets for a specific color was worth mentioning.
J c
No, it is. But kuler (and sites like it) are centered around aesthetic appeal, not readability. I use tools like this for designing a color scheme myself, but when it comes to text on colored backgrounds, it's much harder.
Thomas Owens
+5  A: 

You could consider something like http://www.snook.ca/technical/colour_contrast/colour.html. Set the background color, then play around with the foreground color until you get something that looks good (and ideally, fits with the W3C guidelines).

Michael Madsen
While this one doesn't really do what I need (it should create a set of colors, so I don't have to check every color manually), it is at least good to check if a certain foreground/background combination will be readable. votes++
Mecki
+3  A: 

Have you tried yaflacolor? It isn't quite what you are looking for (it doesn't let you set both text and background colour), but it does show complimentary colours and dark and light versions of the colours together. Unless someone comes up with exactly what you need, it might at least help you pick your colours.

David Arno
Went straight to favorites. Thanks for that.
MusiGenesis
+2  A: 

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.

MusiGenesis
+2  A: 

Another proposition: ColorVisibility

Experiment with readability of colored text over a coloured background. Move the sliders to see the effect of color changes.

VonC
It's a bit hard to operate (the sliders seem hard to drag in Firefox), but it's useful. votes++
Mecki
Well... I concur: the slider are not easy to use, on IE or Firefox. The informations however are relevant to what you are after.
VonC
+10  A: 

I suggest you to try some colors that looks good for you (using one of the tools suggested by others in the answers if you want), but don't forget that color blindness exists, so test your page at this address:

http://colorfilter.wickline.org/

alexmeia
A good point. Although most people could probably read yellow text on blue background easily, some people can't discern the two colours at all. I would opt for white on black or vice verse wherever possible.
Kibbee
I will try avoiding a color combination that is totally unreadable for people with color blindness. votes++
Mecki
A: 

Have you considered letting the user of your application select their own color scheme? Without fail you won't be able to please all of your users with your selection but you can allow them to find what pleases them.

billcoke
There's nothing wrong with letting the user decide, but I should still at least include a useful default color theme, shouldn't I? It can't be that it is unreadable and ugly as hell by default till each user fixes it ;-)
Mecki
+8  A: 

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.

Aaron Digulla
+1  A: 

Might be strange to answer my own question, but here is another really cool color picker I never saw before. It does not solve my problem either :-(((( however I think it's much cooler to these I know already.

http://www.colorjack.com/

On the right, under Tools select "Color Sphere", a very powerful and customizable sphere (see what you can do with the pop-ups on top), "Color Galaxy", I'm still not sure how this works, but looks cool and "Color Studio" is also nice. Further it can export to all kind of formats (e.g. Illustrator or Photoshop, etc.)

How about this, I choose my background color there, let it create a complimentary color (from the first pop up) - this should have highest contrast and thus be best readable, now select the complementary color as main color and select neutral? Hmmm... not too great either, but we are getting better ;-)

Mecki
Nah, it's not strange at all to answer your own question, I've wound up doing it a few times myself and getting the answers out there only betters the community.
Dillie-O
A: 

Here's another interesting link. Basically this page contains all the rules that are important. I was hoping someone has written a tool that selects font colors automatically based upon these rules:

http://www.sapdesignguild.org/resources/diagram_guidelines/textcolor_bk.html

Mecki
+1  A: 

Another scheme generation site, but it includes options to help handle color-blindness based on percentage of the population affected.

Well Sytled Color Scheme Generator

Ken Gentle
Haven't I seen that one before? Anyway, it looks nice and I like the preview of the page in the chosen colors. Thanks.
Mecki
+2  A: 

Okay, this is still not the best possible solution, but a nice point to start. I wrote a little Java app that calculates the contrast ratio of two colors and only processes colors with a ratio of 5:1 or better - this ratio and the formula I use has been released by the W3C and will probably replace the current recommendation (which I consider very limited). It creates a file in the current working dir named "chosen-font-colors.html", with the background color of your choice and a line of text in every color that passed this W3C test. It expects a single argument, being the background color.

E.g. you can call it like this

java FontColorChooser 33FFB4

then just open the generated HTML file in a browser of your choice and choose a color from the list. All colors given passed the W3C test for this background color. You can change the cut off by replacing 5 with a number of your choice (lower numbers allow weaker contrasts, e.g. 3 will only make sure contrast is 3:1, 10 will make sure it is at least 10:1) and you can also cut off to avoid too high contrasts (by making sure it is smaller than a certain number), e.g. adding

|| cDiff > 18.0

to the if clause will make sure contrast won't be too extreme, as too extreme contrasts can stress your eyes. Here's the code and have fun playing around with it a bit :-)

import java.io.*;

/* For text being readable, it must have a good contrast difference. Why?
 * Your eye has receptors for brightness and receptors for each of the colors
 * red, green and blue. However, it has much more receptors for brightness
 * than for color. If you only change the color, but both colors have the
 * same contrast, your eye must distinguish fore- and background by the
 * color only and this stresses the brain a lot over the time, because it
 * can only use the very small amount of signals it gets from the color
 * receptors, since the breightness receptors won't note a difference.
 * Actually contrast is so much more important than color that you don't
 * have to change the color at all. E.g. light red on dark red reads nicely
 * even though both are the same color, red.
 */


public class FontColorChooser {
    int bred;
    int bgreen;
    int bblue;

    public FontColorChooser(String hexColor) throws NumberFormatException {
     int i;

     i = Integer.parseInt(hexColor, 16);
     bred = (i >> 16);
     bgreen = (i >> 8) & 0xFF;
     bblue = i & 0xFF;
    }

    public static void main(String[] args) {
     FontColorChooser fcc;

     if (args.length == 0) {
      System.out.println("Missing argument!");
      System.out.println(
       "The first argument must be the background" +
       "color in hex notation."
      );
      System.out.println(
       "E.g. \"FFFFFF\" for white or \"000000\" for black."
      );
      return;
     }
     try {
      fcc = new FontColorChooser(args[0]);
     } catch (Exception e) {
      System.out.println(
       args[0] + " is no valid hex color!"
      );
      return;
     }
     try {
      fcc.start();
     } catch (IOException e) {
      System.out.println("Failed to write output file!");
     }
    }

    public void start() throws IOException {
     int r;
     int b;
     int g;
     OutputStreamWriter out;

     out = new OutputStreamWriter(
      new FileOutputStream("chosen-font-colors.html"),
      "UTF-8"
     );

     // simple, not W3C comform (most browsers won't care), HTML header
     out.write("<html><head><title>\n");
     out.write("</title><style type=\"text/css\">\n");
     out.write("body { background-color:#");
     out.write(rgb2hex(bred, bgreen, bblue));
     out.write("; }\n</style></head>\n<body>\n");

     // try 4096 colors
     for (r = 0; r <= 15; r++) {
      for (g = 0; g <= 15; g++) {
       for (b = 0; b <= 15; b++) {
        int red;
        int blue;
        int green;
        double cDiff;

        // brightness increasse like this: 00, 11,22, ..., ff
        red = (r << 4) | r;
        blue = (b << 4) | b;
        green = (g << 4) | g;

        cDiff = contrastDiff(
         red, green, blue,
         bred, bgreen, bblue
        );
        if (cDiff < 5.0) continue;
        writeDiv(red, green, blue, out);
       }
      }
     }

     // finalize HTML document
     out.write("</body></html>");

     out.close();
    }

    private void writeDiv(int r, int g, int b, OutputStreamWriter out)
     throws IOException
    {
     String hex;

     hex = rgb2hex(r, g, b);
     out.write("<div style=\"color:#" + hex + "\">");
     out.write("This is a sample text for color " + hex + "</div>\n");
    }

    private double contrastDiff(
     int r1, int g1, int b1, int r2, int g2, int b2
    ) {
     double l1;
     double l2;

     l1 = ( 
      0.2126 * Math.pow((double)r1/255.0, 2.2) +
      0.7152 * Math.pow((double)g1/255.0, 2.2) +
      0.0722 * Math.pow((double)b1/255.0, 2.2) +
      0.05
     );
     l2 = ( 
      0.2126 * Math.pow((double)r2/255.0, 2.2) +
      0.7152 * Math.pow((double)g2/255.0, 2.2) +
      0.0722 * Math.pow((double)b2/255.0, 2.2) +
      0.05
     );

     return (l1 > l2) ? (l1 / l2) : (l2 / l1);
    }

    private String rgb2hex(int r, int g, int b) {
     String rs = Integer.toHexString(r);
     String gs = Integer.toHexString(g);
     String bs = Integer.toHexString(b);
     if (rs.length() == 1) rs = "0" + rs;
     if (gs.length() == 1) gs = "0" + gs;
     if (bs.length() == 1) bs = "0" + bs;
     return (rs + gs + bs);
    }
}
Mecki
A: 

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.

MotoWilliams
+2  A: 

I have implemented something similar for a different reason - that was code to tell the end user whether the foreground and background colors that they selected would result in unreadable text. To do this, rather than examining the RGB values, I converted the color value to HSL/HSV and then determined by experimentation what my cutoff point was for readability when comparing the fg and bg values. This is something you may want/need to consider.

RedFilter
A: 

thanks that was great!!

+1  A: 

Check out http://www.cattail.nu/newton/

Has an Obj C Class to add to your UIColor

Fab!

Chris Beeson