淡雅的WEB设计配色方案
一组比较大众化的淡雅配色方案，可供设计页面时做具体功能模块的参考，但个人觉得大面积使用这种淡雅的色调，会让网站整体感觉不够稳重，有点很虚的感觉。局部模块用用还是蛮好的，同时看着这些配色偶尔还能启发设计灵感，故转载以备候用。原文来自蓝色理想帖子，原始的演示代码的CSS有点冗余，我把公用的属性整合了下。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head><title>比较淡雅的配色方案</title>
<style type="text/css">
#xzwDemo{width:80%; overflow:hidden; margin:10px auto}
#xzwDemo#xzwDemo .demo {height:100px; margin:0 auto 20px;}#xzwDemo .style1 {border:1px solid #96C2F1;background-color: #EFF7FF}#xzwDemo .style2 {border:1px solid #9BDF70;background-color: #F0FBEB}#xzwDemo .style3 {border:1px solid #BBE1F1;background-color: #EEFAFF}#xzwDemo .style4 {border:1px solid #CCEFF5;background-color: #FAFCFD}#xzwDemo .style5 {border:1px solid #FFCC00;background-color: #FFFFF7}#xzwDemo .style6 {border:1px solid #92B0DD;background-color: #FFFFFf}#xzwDemo .style7 {border:1px solid #A9C9E2;background-color: #E8F5FE}#xzwDemo .style8 {border:1px solid #E3E197;background-color: #FFFFDD}#xzwDemo .style9 {border:1px solid #ADCD3C;background-color: #F2FDDB}#xzwDemo .style10{border:1px solid #F8B3D0;background-color: #FFF5FA}#xzwDemo .style11{border:1px solid #D3D3D3;background-color: #F7F7F7}#xzwDemo .style12{border:1px solid #BFD1EB;background-color: #F3FAFF}#xzwDemo .style13{border:1px solid #FFDD99;background-color: #FFF9ED}#xzwDemo .style14{border:1px solid #CACAFF;background-color: #F7F7FF}#xzwDemo .style15{border:1px solid #A5B6C8;background-color: #EEF3F7}#xzwDemo .style16{border:1px solid #CEE3E9;background-color: #F1F7F9}#xzwDemo h5 {color:#CCCCCC}#xzwDemo .style1 h5{margin: 1px;background-color: #B2D3F5;height: 24px;}#xzwDemo .style6 h5{margin: 1px;background-color: #E2EAF8;height: 24px;}#xzwDemo .style2 h5{margin: 1px;background-color: #C2ECA7;height: 24px;}#xzwDemo a {color:#CCCCCC;text-decoration:none}#xzwDemo a:hover {color:#666666;text-decoration:underline}</style><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head><body><div id="xzwDemo"> <div class="demo style1"><h5></h5></div> <div class="demo style2"><h5></h5></div> <div class="demo style6"><h5></h5></div> <div class="demo style3"></div> <div class="demo style4"></div> <div class="demo style5"></div> <div class="demo style7"></div> <div class="demo style8"></div> <div class="demo style9"></div> <div class="demo style10"></div> <div class="demo style11"></div> <div class="demo style12"></div> <div class="demo style13"></div> <div class="demo style14"></div> <div class="demo style15"></div> <div class="demo style16"></div></div></body></html>演示效果如下：
