Beefy Boxes and Bandwidth Generously Provided by pair Networks
Syntactic Confectionery Delight
 
PerlMonks  

Re: to generate a set of well contrasted colors

by blokhead (Monsignor)
on Nov 07, 2003 at 00:47 UTC ( [id://305203]=note: print w/replies, xml ) Need Help??


in reply to to generate a set of well contrasted colors

Although colors chosen by your method may contrast, they might still be unreadable. Have you ever seen a webpage with a pure blue background and pure yellow text? Perhaps a more eye-friendly method is to always use black or white foreground text, which would hardly clash with anything

To determine whether white or black would contrast more with your random background color, you can use the luminosity (brightness) of the background color. The luminosity is the value the color would become when converted to grayscale. What's nice is that human perception is built in -- the formula for luminosity takes into account the differences in how red, green, and blue contribute to the perception of "brightness". If the luminosity is brighter than 50% gray, use black text, otherwise use white text. The results are very readable.

sub random_colors { my ($r, $g, $b) = map { int rand 256 } 1 .. 3; my $lum = ($r * 0.3) + ($g * 0.59) + ($b * 0.11); my $bg = sprintf("#%02x%02x%02x", $r, $g, $b); my $fg = $lum < 128 ? "white" : "black"; return ($bg, $fg); } for (1 .. 10) { my ($bg, $fg) = random_colors(); print qq{ <table><tr><td bgcolor=$bg> <font color=$fg>THIS IS A TEST</font> </td></tr></table> }; }
THIS IS A TEST
THIS IS A TEST
THIS IS A TEST
THIS IS A TEST
THIS IS A TEST
THIS IS A TEST
THIS IS A TEST
THIS IS A TEST
THIS IS A TEST
THIS IS A TEST
Update: (This is for my own reference in the future as much as anything, so I can find these links when I need to.) To be nitpicky, choosing a "random" color by uniformly choosing random RGB components is not as random as one would think. RGB is not a perceptually uniform color space. A better method to generate colors that are perceptually random instead of numerically random in their RGB components would be to use a different color space like L*a*b* or L*u*v*, where the three color dimensions are closer to perceptually uniform. Uniformly select the three components in this color space, then convert to RGB. For more info, see the Color Space FAQ, questions C-35 and C-39.

But for the purposes of pg's app, uniformly choosing in RGB-space is probably quite sufficient, as we only need the color to be noticably different than the previous.

blokhead

Replies are listed 'Best First'.
Re: Re: to generate a set of well contrasted colors
by pg (Canon) on Nov 07, 2003 at 02:45 UTC

    Quite a few interesting replies came up for this thread!

    I come up below piece of code to demon different solutions together. It displays a table that:

    • The background color of each row is randomly generated, and keep the same for all cells in the row;
    • The foreground color is generated by different solutions, identified by author's name.

    To run it, just type:

    perl -w blah.pl > result.html

    And then use your browser to view result.html.

    You will see that each siolution has its merit, and a different look and feel. I think, if you love fish, then take fish; if you love meat, then take meat, all delicious.

    sub random_colors { my ($r, $g, $b) = map { int rand 256 } 1 .. 3; my $lum = ($r * 0.3) + ($g * 0.59) + ($b * 0.11); my $bg = sprintf("#%02x%02x%02x", $r, $g, $b); my $fg1 = sprintf("#%02x%02x%02x", ($r + 128) % 256, ($g + 128) % +256, ($b + 128) % 256); my $fg2 = $lum < 128 ? "white" : "black"; return ($bg, $fg1, $fg2); } for (1 .. 100) { my ($bg, $fg1, $fg2) = random_colors(); print qq{ <table> <tr> <td bgcolor=$bg><font size=5 color=$fg1>pg</font></td> <td bgcolor=$bg><font size=5 color=$fg2>blokhead</font></t +d> </tr> </table> }; }

    Here is just a piece of it:

    pg blokhead
    pg blokhead
    pg blokhead
    pg blokhead
    pg blokhead
    pg blokhead
    pg blokhead
    pg blokhead
    pg blokhead
    pg blokhead
    pg blokhead
    pg blokhead
    pg blokhead
    pg blokhead
    pg blokhead
    pg blokhead
    pg blokhead
    pg blokhead
    pg blokhead
    pg blokhead
    pg blokhead
    pg blokhead
Re: Re: to generate a set of well contrasted colors
by Everlasting God (Beadle) on Nov 07, 2003 at 14:41 UTC
    I second the colored background black or white text plan. Pretty much any scheme for creating contrast will either fail for grey (as the 255-r,255-g,255-b method does), produce eye-destroying combinations, or have at least one of the colors so close to white/black that it's not worth the effort to calculate it (like my idea, using HSB to create a complimentary pair, one color with high brightness and low saturation and the other vice-versa, aka a pastel and and an earthtone).

    I do, however have to take issue with your luminance function. Those coeffiecients are for NTSC, and despite the fact that it would likely never make a difference, for the sake of argument

    Y = 0.212671 * R + 0.715160 * G + 0.072169 * B

    is more apropriate for a computer monitor.

    Having worked off and on with L*a*b* and L*u*v* transforms for several months now, I whole heartedly agree that it's not in any way worth pursuing them. 'Uniformly distributed' in either is easier said than done, as neither a* and b* nor u* and v* have well defined maximums. Now call me crazy, but color spaces that let you specify colors outside the gamut of *light* bother me.


    'The fickle fascination of and Everlasting God' - Billy Corgan, The Smashing Pumpkins
      Y = 0.212671 * R + 0.715160 * G + 0.072169 * B
      ...but those are for the sRGB primaries in linear space; css/HTML codes are in gamma space.
        D'Oh! Right you are. That should have said Y' = etc. That gives Luma, which is plenty close enough to actual Lightness (which is what this calls for, not Luminosity that Y is stands for) for this application.


        'The fickle fascination of and Everlasting God' - Billy Corgan, The Smashing Pumpkins
Re: Re: to generate a set of well contrasted colors
by Willard B. Trophy (Hermit) on Nov 07, 2003 at 15:03 UTC
    Hey, there's nowt wrong with yellow on blue. It was NASA, I think, who found that to be the most readable. At least, that was the reason that Amstrad gave for making their CPC 464 colour scheme yellow on blue.

    Still doesn't make it any less ugly ...

    --
    bowling trophy thieves, die!

Log In?
Username:
Password:

What's my password?
Create A New User
Domain Nodelet?
Node Status?
node history
Node Type: note [id://305203]
help
Chatterbox?
and the web crawler heard nothing...

How do I use this?Last hourOther CB clients
Other Users?
Others examining the Monastery: (5)
As of 2024-04-23 17:29 GMT
Sections?
Information?
Find Nodes?
Leftovers?
    Voting Booth?

    No recent polls found