Hi Eric, Thanks for the explanation. You proved it could be done easily. I think that black and white text is just perfect.
Sorry for giving a wrong link for the colorchart (the original I once downloaded from your site I think) [1] Cheers, Ton [1] https://dl.dropboxusercontent.com/u/2638511/ColorChart.html On Sunday, March 16, 2014 11:51:38 PM UTC+1, Eric Shulman wrote: > > 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.
