Hi Ton, I know this is an ancient thread, but I would like to pursue the subject a little further.
I have a wiki used by my lab which has a dark theme with red4 (EC2200) lettering in the title. Tab pills have a default background color black. I would like the tab text to have the same color as the wki title. The overall appearance would be quite attractive and not at all garish. I'm attaching a screen-shot of the top of the page after coloring the tab text in Intaglio to demonstrate what I'd like. Do you have any suggestions about how I might accomplish this effect? Cheers, Eric [image: wiki_page.png] <about:invalid#zClosurez> On Monday, March 17, 2014 at 2:21:07 AM UTC-7, Ton Gerner wrote: > > 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 https://groups.google.com/group/tiddlywiki. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/d915262b-b0e6-49ad-9b21-e10ea67d7b1d%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
