On Sunday, March 16, 2014 2:32:53 PM UTC-7, Ton Gerner wrote: > > I even posted a link to a color chart [2]: > This is the ColorChart that was once at Eric Shulman's site, but I cannot > find it anymore there. So I made a demo so you can see how it looks with > black/white text. >
http://www.TiddlyTools.com/#PaletteMaker PaletteMaker displays a palette with checkmarks showing which colors are currently defined in the ColorPalette. In order to ensure that the checkmark text is visible, PaletteMaker automatically selects either white or black text, based on the "brightness" of the background RGB color. Here's the code that I wrote... var rgb=bgcolor.substr(1).split(''); var long=bgcolor.length>=6; function h2d(h){return '0123456789ABCDEF'.indexOf(h?h.toUpperCase():'');}; var r=h2d(rgb[0]); var g=h2d(rgb[long?2:1]); var b=h2d(rgb[long?4:2]); if (r<0||g<0||b<0||r+g+b>=15) return 'black'; // BAD RGB or BRIGHT COLOR return 'white'; // DARK COLOR The background color, t, can be specified as "#RGB", "#RRGGBB", or an X11 Color Name. Notes: * first line chops up the color code into separate r, g, b variables. * if a 6-digit RRGGBB value is used, only the first (most-significant) digit of R, G, and B is used to calculate overall brightness. * next two lines convert the hexadecimal values (0-F) to decimal (0-15) * next two lines test for "brightness" and return either black or white, accordingly. * the "cutoff" value of r+g+b>15 to test "bright" vs. "dark" color was determined empirically by experimentation. Note that this approach only uses black or white text. I had experimented with calculating the "reciprocal" color, so that, for example, a background of "#ccc" (light gray) would use text color "#333" (dark gray), while a background of "#ccf" (light blue) would use "#ffc" (pale yellow) text color. However, this lead to some poor color combinations, especially when the background color was close to the middle of the RGB palette (e.g., the reciprocal of background "#999" would be text color "#666") due to the low contrast ratio between text and background. enjoy, -e Eric Shulman TiddlyTools / ELS Design Studios YOUR DONATIONS ARE VERY IMPORTANT! HELP ME TO HELP YOU - MAKE A CONTRIBUTION TO MY "TIP JAR"... http://TiddlyTools.github.com/fundraising.html#MakeADonation Professional TiddlyWiki Consulting Services... Analysis, Design, and Custom Solutions: http://www.TiddlyTools.com/#Contact -- You received this message because you are subscribed to the Google Groups "TiddlyWiki" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/tiddlywiki. For more options, visit https://groups.google.com/d/optout.
