css template generator with color scheme tool

I've seen some free online css template generators online:
http://www.ibdjohn.com/csstemplate/

I've also seen some graphic color schemer tools:
http://www.colorschemer.com/online.html

What would be great is if these two tools could be combined together so that you could quickly and easily create css templates in different color schemes. Does this exist anywhere?

And, I think it would be extra cool if you could just click on the background area or text and a popup window would suggest colors for you to choose than are complimentary. I'm not good at knowing what colors match, but it seems like an easy thing to program color suggestions based on color scheme algorithms.

Anyone else have this vision or a similar one for a online css template generator? Perhaps I have just motivated someone who is smart and talented (unlike me) to create this?

Quote:

I've seen some free online css template generators online:
http://www.ibdjohn.com/csstemplate/

I wouldn't use that one as it has the box model all wrong I'm afraid :(

Cleva Treva used to have a generator but I'm not sure if its still online:

Hello

build your own CSS library, save time money

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>12345 12345 12345 12345 12345 </title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> body{ text-align: center; margin:0px; padding:0px; background-color:#b2b2b2; } div,p,span{ font-family:Arial,Verdana, Geneva , Helvetica, sans-serif; font-size:12px; color:#ffffff; margin:0px; padding:0px; text-align:left; } .mcon{ margin-left:auto; margin-right:auto; top:0px; left:0px; width:754px; } .bca{background:#ffffcc;} .bcb{background:#ccffff;} .bcc{background:#ccffcc;} .bcy{background:#ffff99;}/* */ .acon{ width:754px; background:#bababa; } .con{ width:754px; background: #c9c9c9; } .nav{ width:107px; background: #8dabef; } .txt{padding:2px;color: #797979;background: #e0e0e0;} .tr{text-align:right;} .tc{text-align:center;} .po{padding:0px;} .pb{padding:2px;} .pc{padding:10px;} .ma{ margin-left:auto; margin-right:auto; } .mt{margin-top:10px;} /* */ .ml{margin-left:10px;} .mr{margin-right:10px;} .mb{margin-bottom:10px;} .mlin{margin-left:10px;} .mrin{margin-right:10px;} .mtp2{margin-top:12px;} .mto{margin-top:0px;} .mlo{margin-left:0px;} .mro{margin-right:0px;} .mbo{margin-bottom:0px;} .w{width:103px;} .wt{width:622px;} .wtb{width:304px;} .wtbb{width:299px;} .wtbx{width:302px;} .wc{width:734px;} .wca{width:754px;} .wnc{width:104px;} .t{top:2px;} .bl,.b,.bb,.btl,.bbr{ border-color:#f8f8f8; border-style: solid; border-width: 1px 0 1px 1px; } .bcbl{border-color:#000000;} .b{border-width: 1px 1px 0 1px;} .bb{border-width: 1px 1px 1px 1px;} .btl{border-width: 1px 0px 0px 1px;} .bbr{border-width: 0px 1px 1px 0px;} .bo{border-width: 0 0 0 0;} a{ display:inline-block; padding-top:2px; padding-bottom:2px;/* */ text-decoration: none; text-align: center; } a:visited{ background:#8dabef; color: #787878; } a:hover{ background:#ffcc00; color: #787878; } .fl{float:left;} .fr{float:right;} .clf{clear:both;} .ofa{overflow:auto;} .ofh{overflow:hidden;} .dilb{display:inline-block;} .r{position:relative;} .a{position:absolute;} img{display:block;} </style>  </head> <body> <div class="mcon ofh"> <div class="wca"><img src="r.gif" width="754" height="1" alt="" /></div> <div class="acon mt mb"> <div class="con"> <div class="pc tc"><br /> header<br /><br /> </div> <div class="con"><span> <a href="##" class="nav fl bl">Latest News</a> <a href="##" class="nav fl bl">Home</a> <a href="##" class="nav fl bl">Home</a> <a href="##" class="nav fl bl">Home</a> <a href="##" class="nav fl bl">Latest News</a> <a href="##" class="nav fl bl">Home</a> <a href="##" class="nav fl bb wnc">Contact Us</a></span> </div> <div class="clf"></div> <div class="con"> <div class="txt fl w mt"> acc Text<br /> Test<br /> Text<br /> Test<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> </div> <div class="txt fl mlin mr mt wtb"> b Test Text Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> </div> <div class="pb bb fr wtbx mr mt"> azz Test Text Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> </div> <div class="txt fr wt mt mr"> 112345 Test Text Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Test<br /> Test<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Test<br /> Test<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Test<br /> Test<br /> Test<br /> </div> <div class="pb fl w mt"> a Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> </div> <br class="clf" /> </div> </div> <div class="con wc pc"> <div class="txt pc tc"> <br /> footer<br /><br /> </div> </div> </div> <div class="clf"></div> </div> <div class="mcon ofh"> <div class="ma wca"><img src="r.gif" width="754" height="1" alt="" /></div> <div class="acon ma mt mb"> <div class="con"> <div class="pc tc"><br /> header<br /><br /> </div> <div class="con"><span> <a href="##" class="nav fl bl">Latest News</a> <a href="##" class="nav fl bl">Home</a> <a href="##" class="nav fl bl">Home</a> <a href="##" class="nav fl bl">Home</a> <a href="##" class="nav fl bl">Latest News</a> <a href="##" class="nav fl bl">Home</a> <a href="##" class="nav fl bb wnc">Contact Us</a></span> </div> <div class="clf"></div> <div class="con"> <div class="txt bb fl ml mt wtb"> b Test Text Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> </div> <div class="po fr wtb mtp2"> ax Test Text Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Text<br /> Test<br /> Text<br /> Test<br /> <div class="txt bl pb wtbb mt r t"> a Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> </div> </div> <div class="txt bb fr w mt mrin"> aaa Text<br /> Test<br /> Text<br /> Test<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> </div> <div class="pb fl wtb ml mt"> a Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> </div> <br class="clf" /> </div> </div> <div class="con wc pc"> <div class="txt pc tc"> <br /> footer<br /><br /> </div> </div> </div> <div class="clf"></div> </div> <div class="mcon ofh"> <div class="ma wca"><img src="r.gif" width="754" height="1" alt="" /></div> <div class="acon ma mt mb"> <div class="con"> <div class="pc tc"><br /> header<br /><br /> </div> <div class="con"><span> <a href="##" class="nav fl bl">Latest News</a> <a href="##" class="nav fl bl">Home</a> <a href="##" class="nav fl bl">Home</a> <a href="##" class="nav fl bl">Home</a> <a href="##" class="nav fl bl">Latest News</a> <a href="##" class="nav fl bl">Home</a> <a href="##" class="nav fl bb wnc">Contact Us</a></span> </div> <div class="clf"></div> <div class="con"> <div class="txt fr w mt"> a Text<br /> Test<br /> Text<br /> Test<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> </div> <div class="txt fl ml mt wtb"> b Test Text Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> </div> <div class="pb bb fl mlin wtbx mt"> a Test Text Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> </div> <div class="txt fl wt mt ml"> 112345 Test Text Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Test<br /> Test<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Test<br /> Test<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Test<br /> Test<br /> Test<br /> </div> <div class="pb fl w mt mlin"> a Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> </div> <br class="clf" /> </div> </div> <div class="con wc pc"> <div class="txt pc tc"> <br /> footer<br /><br /> </div> </div> </div> <div class="clf"></div> </div> <div class="mcon ofh"> <div class="ma wca"><img src="r.gif" width="754" height="1" alt="" /></div> <div class="acon ma mt mb"> <div class="con"> <div class="pc tc"><br /> header<br /><br /> </div> <div class="con"><span> <a href="##" class="nav fl bl">Latest News</a> <a href="##" class="nav fl bl">Home</a> <a href="##" class="nav fl bl">Home</a> <a href="##" class="nav fl bl">Home</a> <a href="##" class="nav fl bl">Latest News</a> <a href="##" class="nav fl bl">Home</a> <a href="##" class="nav fl bb wnc">Contact Us</a></span> </div> <div class="clf"></div> <div class="con"> <div class="pb fl mt w "> b Test Text Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> </div> <div class="po fr wtb mt mr mlin"> <div class="txt fr wtbb"> afff Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> </div> <br /><br />ax Test Text Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Text<br /> Test<br /> Text<br />Text<br /> </div> <div class="txt bb fr w mt"> aaa Text<br /> Test<br /> Text<br /> Test<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> </div> <div class="txt fl wtb mt"> az Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br />Text<br />Text<br /> </div> <br class="clf" /> </div> </div> <div class="con wc pc"> <div class="txt pc tc"> <br /> footer<br /><br /> </div> </div> </div> <div class="clf"></div> </div> </body> </html>