search

Home >Web Front-end >CSS Tutorial >Conveniently check the html color values ​​you need at any time

Conveniently check the html color values ​​you need at any time

大家讲道理
大家讲道理Original
2016-11-11 09:29:201548browse

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8" />
<title>颜色搭配表|网页配色方案|RGB颜色查询对照表</title>
<meta name="keywords" content="颜色搭配表,网页配色方案,颜色表,rgb颜色,常用色彩搭配" />
<meta name="description" content="搭配！让颜色发挥更加强大……" />
<script type="text/javascript">
/*120*270，创建于2014-1-2*/
var cpro_id = "u1447567";
</script>
<script src="http://cpro.baidustatic.com/cpro/ui/f.js" type="text/javascript"></script>
<style>
html, body {overflow:hidden; height:100%}
body {font:14px/1.5 &#39;\5FAE\8F6F\96C5\9ED1&#39;, Arial,Helvetica,sans-serif; -ms-overflow-style:-ms-autohiding-scrollbar}
* {margin:0; padding:0}
#wrapper {overflow:auto; overflow-x:hidden; margin-left:220px; height:100%}
#main {margin:0 auto; width:640px}
h2, h3 {margin-bottom:1em; padding:.2em .4em; border-bottom:3px solid #CCF; background:#E91818; color:#fff}
h2 {display:inline-block}
blockquote {margin-bottom:1em}
.section, .sub-section, .groups {clear:both}
.section {overflow:hidden; margin:5em 0}
.sub-section {overflow:hidden; margin-bottom:3em}
.group {float:left; margin:0 7px; width:198px; height:85px; _display:inline}
.group span {float:left; margin:1px; width:60px; height:60px; text-align:center}
.group i {display:block; margin-top:60px; background:#fff; font-style:normal; font-family:"Lucida Console","Lucida Sans Typewriter",Monaco,"Bitstream Vera Sans Mono",monospace}
#panel {position:absolute; top:0; bottom:0; left:0; width:220px; height:100%; background:#111; color:#fff; text-shadow:0 1px 2px #000}
#header {text-align:center}
#header h1 {margin:.5em; font-size:18px}
#header h1 span {display:block; font-size:20px}
#header address {clear:both; margin-bottom:2em; color:#999}
#header a {color:#999}
#nav {position:absolute; top:140px; right:10px; bottom:10px; left:10px; overflow:auto; background:#222; _width:195px; _height:expression(this.parentNode.clientHeight - 155+"px")}
#nav h4{margin:.4em 1em 0; padding:.4em 0; border-bottom:1px solid #333; color:#aaa}
#nav a{margin:0 .4em; display:block; padding:.4em .6em; color:#f7f7f7; text-decoration:none}
#nav a:hover {background: #F15454; color:#fff}
::-webkit-scrollbar {width:7px}
::-webkit-scrollbar-track {background:rgba(0,0,0,.1)}
::-webkit-scrollbar-thumb {background:rgba(0,0,0,.3)}
#nav::-webkit-scrollbar-track {background:rgba(255,255,255,.1)}
#nav::-webkit-scrollbar-thumb {background:rgba(255,255,255,.3)}
</style>
</head>
<body>
<div id="panel">
    <div id="header">
        <h1>颜色搭配表|网页配色方案|RGB颜色查询对照表</h1>
        <address>制作 by </address>
    </div>
    <div id="nav">加载中...</div>
</div>
<div id="wrapper">
<div id="main">
    <h2>按色相的搭配分类</h2>
    <blockquote>列举一些最为代表常见的颜色值，让你能快速的找到自己想要的代码，左边为导航，可以按色相搭配分类寻找，也可以按印象的搭配来组合，如果喜欢的话，别忘了分享本站哦！</blockquote>
    <h2>按印象的搭配分类</h2>
    <blockquote>颜色的搭配在很多人眼中往往觉得很复杂，其实网页颜色的搭配取决于各人的想法，经历，和见解，演示能反应人的喜怒哀乐，也能同时赋予浏览器同样的情感，给人能第一眼带来什么感觉，是每个设计师搭配颜色前的思路…… 世间颜色千变万化，搭配起来的视觉感受也千变万化，能不能抓住浏览用户的第一眼球，就看你的了……</blockquote>
    <noscript><h1>你的浏览器不支持 JavaScript，请启用 JavaScript 后访问。</h1></noscript>
<script>
var COLORTABLE = {
    hue: {
        title: "按色相的搭配分类",
        intro: "列举一些最为代表常见的颜色值，让你能快速的找到自己想要的代码，左边为导航，可以按色相搭配分类寻找，也可以按印象的搭配来组合，如果喜欢的话，别忘了分享本站哦！",
        table: [{
            name: "红色",
            desc: "",
            colors: [["#FFFFCC","#CCFFFF","#FFCCCC"],["#99CCCC","#FFCC99","#FFCCCC"],["#FF9999","#996699","#FFCCCC"],["#CC9999","#FFFFCC","#CCCC99"],["#FFCCCC","#FFFF99","#CCCCFF"],["#0099CC","#CCCCCC","#FF6666"],["#FF9966","#FF6666","#FFCCCC"],["#CC9966","#666666","#CC9999"],["#FF6666","#FFFF66","#99CC66"],["#CC3333","#CCCCCC","#003366"],["#993333","#CCCC00","#663366"],["#CCCC99","#666666","#CC9999"],["#FF6666","#FFFF00","#0066CC"],["#CC0033","#333333","#CCCC00"],["#336633","#990033","#FFCC99"],["#993333","#CC9966","#003300"],["#FF0033","#333399","#CCCC00"],["#CC0033","#000000","#003399"],["#000000","#99CC00","#CC0033"],["#999933","#993333","#333300"]]
        }, {
            name: "橙色",
            desc: "",
            colors: [["#FFCC99","#FFFF99","#99CC99"],["#FFCC99","#CCFF99","#CCCCCC"],["#FFCC99","#FFFFCC","#99CCFF"],["#FF9966","#FFFFCC","#99CC99"],["#FF9900","#FFFFCC","#336699"],["#CCCC33","#FFFF99","#CC9933"],["#996600","#FFCC33","#FFFFCC"],["#FFFFCC","#CC9933","#336666"],["#FF9900","#FFFF00","#0099CC"],["#99CC33","#FF9900","#FFCC00"],["#FF9933","#99CC33","#CC6699"],["#FF9933","#FFFF00","#3366CC"],["#FF9933","#FFFFCC","#009966"],["#FF6600","#FFFF66","#009966"],["#990033","#CCFF66","#FF9900"],["#FF9966","#996600","#CCCC00"],["#CC6600","#999999","#CCCC33"],["#CC6600","#CCCC33","#336699"],["#000000","#FF9933","#999966"],["#663300","#FF9933","#FFFF66"]]
        }, {
            name: "黄色",
            desc: "",
            colors: [["#FFFFCC","#CCFFFF","#FFCCCC"],["#FFFF00","#FFFFFF","#CCCC00"],["#99CCFF","#FFCC33","#FFFFCC"],["#FFFF33","#99CCFF","#CCCCCC"],["#FFFF00","#FFFFFF","#9933FF"],["#99CCFF","#FFCC33","#FFFF33"],["#FFCC00","#66CC00","#FFFF99"],["#FF9900","#FFFF00","#0099CC"],["#FFCC00","#0000CC","#FFFF99"],["#CC9999","#FFFFCC","#6666CC"],["#999933","#FFFFCC","#CC99CC"],["#CCCC00","#666600","#FFFF66"],["#FF9966","#FFFFCC","#99CC99"],["#FFCC33","#FFFFCC","#999966"],["#FFCC99","#FF6666","#FFFF66"],["#FFCC99","#999966","#FFFF00"],["#FFFF99","#99CC99","#666600"],["#999966","#FFFF99","#333333"],["#006633","#333300","#CCCC99"],["#006633","#663300","#CCCC66"]]
        }, {
            name: "黄绿色",
            desc: "",
            colors: [["#33CC33","#6666CC","#FFFFFF"],["#CCCC33","#FFFFFF","#CCFFCC"],["#FFCC99","#CCFF99","#CCCCCC"],["#CCCC00","#999966","#FFFFCC"],["#CCCC33","#FFFFFF","#336699"],["#CCCC33","#999999","#CCFFFF"],["#00CC00","#0066CC","#99CCCC"],["#99CC33","#FF9900","#FFCC00"],["#99CC33","#CCCCFF","#663300"],["#CCCC33","#993399","#000000"],["#CC6600","#999999","#CCCC33"],["#CC9933","#FFFF99","#99CC99"],["#669933","#CCCC33","#663300"],["#99CC33","#CCCCCC","#000000"],["#CC6600","#CCCC33","#336699"],["#666600","#CCCC66","#CCFFCC"],["#333366","#99CC33","#336699"],["#666666","#99CC33","#003366"],["#003333","#99CC33","#999999"],["#996633","#FFFF99","#99CC66"]]
        }, {
            name: "绿色",
            desc: "",
            colors: [["#009966","#FFFFFF","#FFFF00"],["#339933","#FFFFFF","#9933CC"],["#339933","#FFFFFF","#000000"],["#339933","#99CC00","#FFFFCC"],["#FFFFCC","#CCCC66","#336666"],["#99CC33","#FFFF66","#336600"],["#339933","#CC9900","#666666"],["#339966","#CCCCCC","#003366"],["#669933","#CCCCCC","#000000"],["#339933","#CCCCCC","#6699CC"],["#006633","#CCCC33","#CC9933"],["#339933","#666633","#CCCC66"],["#339933","#FFCC33","#336699"],["#006633","#669933","#99CC99"],["#336666","#996633","#CCCC33"],["#003300","#669933","#CCCC99"],["#006633","#990033","#FF9900"],["#006633","#333300","#CCCC99"],["#006633","#663300","#CCCC66"],["#993333","#CC9966","#003300"]]
        }, {
            name: "青绿色",
            desc: "",
            colors: [["#CCFF99","#FFFFFF","#66CCCC"],["#339999","#FFFFFF","#99CCFF"],["#66CC99","#FFFFFF","#666699"],["#009999","#66CCCC","#CCFFFF"],["#66CCCC","#CCFF66","#FF99CC"],["#339999","#FFFF00","#336699"],["#CC9933","#339999","#FFCC33"],["#FFCC00","#009999","#CC3333"],["#669999","#CCCCCC","#CC99CC"],["#339999","#CCCCCC","#000000"],["#339999","#666699","#CCCCCC"],["#003333","#99CC99","#FFFFCC"],["#669999","#CCFFCC","#996699"],["#996699","#CCCC99","#669999"],["#999966","#CCCC99","#339999"],["#336666","#669999","#CCCC99"],["#999999","#003366","#669999"],["#663333","#339999","#CCCC66"],["#333333","#339999","#CCFFCC"],["#336666","#3399CC","#666666"]]
        }, {
            name: "蓝色",
            desc: "",
            colors: [["#FFFFCC","#CCFFFF","#FFCCCC"],["#99CCCC","#FFFFFF","#3399CC"],["#CCFFCC","#99CCCC","#FFFFCC"],["#CCCCFF","#FFFFFF","#99CCFF"],["#FFCC99","#FFFFCC","#99CCFF"],["#336699","#FFFFFF","#99CCCC"],["#99CCCC","#FFFFFF","#CCFF99"],["#CCCCFF","#FFFFCC","#CCFFFF"],["#99CCCC","#FFFFFF","#336699"],["#99CCFF","#CCFFFF","#6699CC"],["#99CC33","#FFFFFF","#3399CC"],["#0099CC","#FFFFCC","#666699"],["#CCCCCC","#003366","#99CCFF"],["#0099CC","#FFFFFF","#666666"],["#CCCCCC","#6699CC","#666666"],["#336699","#CCCC99","#003366"],["#3399CC","#003366","#CCCCCC"],["#6699CC","#006699","#000000"],["#003366","#CCCCCC","#006699"],["#999933","#336699","#333333"]]
        }, {
            name: "蓝紫色",
            desc: "",
            colors: [["#CCFFFF","#FFFFFF","#CCCCFF"],["#CCCCCC","#FFFFFF","#666699"],["#99CCFF","#FFFFFF","#333399"],["#6666CC","#FFFFFF","#FF9999"],["#9999FF","#FFCC33","#FFFFCC"],["#0099CC","#FFFFCC","#666699"],["#0000FF","#6699FF","#CCFFFF"],["#6666FF","#66CCFF","#CCFF66"],["#669999","#FFFFCC","#6666CC"],["#9999CC","#FF9999","#666699"],["#003399","#FFCCCC","#6699CC"],["#CC6666","#333399","#CCCC00"],["#000066","#6666FF","#CCCCCC"],["#003399","#CCFF99","#333333"],["#333366","#CC0033","#CCCCCC"],["#336699","#CCCC66","#333300"],["#003399","#FFFF99","#000000"],["#990066","#CCCC33","#003399"],["#CC3333","#000000","#003399"],["#333366","#999966","#333333"]]
        }, {
            name: "紫色",
            desc: "",
            colors: [["#FFFFCC","#FFFF99","#CCCCFF"],["#9999CC","#99CC99","#FFFFFF"],["#FFCCCC","#CCCCFF","#CCCC99"],["#9999CC","#FFFFCC","#FFCCCC"],["#FFCCCC","#FF99CC","#CCCCFF"],["#660066","#FFFFFF","#663333"],["#CCCC99","#333333","#9966CC"],["#CCCC00","#FF9966","#663399"],["#996699","#FFCCCC","#CC99CC"],["#996666","#CC99CC","#FFCCCC"],["#FFCC99","#FF9933","#663366"],["#333399","#CCCCFF","#CC99CC"],["#663366","#CCCCCC","#CC99CC"],["#996699","#9999CC","#CCCCFF"],["#CC9966","#999999","#663366"],["#330033","#666666","#669999"],["#CCCCCC","#999999","#663366"],["#FF33CC","#CCCC99","#663366"],["#663366","#999999","#CCCCFF"],["#999966","#993333","#330033"]]
        }, {
            name: "紫红色",
            desc: "",
            colors: [["#FFCCCC","#FFFFFF","#99CC00"],["#FF99CC","#FFFFFF","#993366"],["#66CC99","#FFFFFF","#CC6699"],["#CC9999","#FFCCCC","#CC99CC"],["#FFCCCC","#FFFF99","#CCCCFF"],["#FFFF99","#993399","#FF99CC"],["#66CCCC","#CCFF66","#FF99CC"],["#FF99CC","#003399","#CCCC00"],["#FFCCCC","#FF99CC","#CCCCFF"],["#FF9999","#FFCCCC","#FF99CC"],["#669966","#CC6699","#FFCCFF"],["#CCCCCC","#CC99CC","#CC3399"],["#CC3399","#FFCC99","#FF6666"],["#FF3399","#CCCC99","#663366"],["#663366","#FFFFCC","#FFCCCC"],["#663366","#CCCCCC","#CC99CC"],["#990066","#FFCC00","#CC0033"],["#990066","#CCCCCC","#006699"],["#999900","#990033","#000000"],["#990066","#000000","#009966"]]
        }]
    },
    character: {
        title: "按印象的搭配分类",
        intro: "颜色的搭配在很多人眼中往往觉得很复杂，其实网页颜色的搭配取决于各人的想法，经历，和见解，演示能反应人的喜怒哀乐，也能同时赋予浏览器同样的情感，给人能第一眼带来什么感觉，是每个设计师搭配颜色前的思路…… 世间颜色千变万化，搭配起来的视觉感受也千变万化，能不能抓住浏览用户的第一眼球，就看你的了……",
        table: [{
            name : "柔和、明亮、温柔 ",
            desc : "亮度高的色彩搭配在一起就会得到柔和、明亮、温和的感觉。为了避免刺眼，设计师一般会用低亮度的前景色调和，同时色彩在色环之间的距离也有助于避免沉闷。",
            colors : [["#FFFFCC", "#CCFFFF", "#FFCCCC"], ["#FFCCCC", "#FFFF99", "#CCCCFF"], ["#FF9966", "#FF6666", "#FFCCCC"], ["#FFCC99", "#CCFF99", "#CCCCCC"], ["#FFCCCC", "#CCCCFF", "#CCFFCC"], ["#CCFFFF", "#CCCCCC", "#CCFF99"], ["#FFCCCC", "#FFFFFF", "#99CC99"], ["#99CCCC", "#FFCC99", "#FFCCCC"], ["#CCCCFF", "#FFCCCC", "#CCFFFF"], ["#FFCC99", "#FFFFCC", "#99CCCC"]]
        }, {
            name : "柔和、洁净、爽朗 ",
            desc : "对于柔和、清洁、爽朗的印象，色环中蓝到绿相邻的颜色应该是最适合的。并且亮度偏高。可以看到，几乎每个组合都有白色参与。当然在实际设计时，可以用蓝绿相反色相的高亮度有彩色代替白色。",
            colors : [["#CCFF99", "#FFFFFF", "#99CCFF"], ["#99CCCC", "#FFFFFF", "#CCFF99"], ["#CCFFCC", "#FFFFFF", "#66CCCC"], ["#CCCCFF", "#FFFFFF", "#99CCCC"], ["#CCFFCC", "#99CCCC", "#FFFFCC"], ["#CCFFFF", "#FFFFFF", "#CCCCFF"], ["#CCFFFF", "#FFFFFF", "#99CCFF"], ["#66CCFF", "#FFFFFF", "#CCFFFF"], ["#6699CC", "#FFFFFF", "#99CCFF"], ["#CCCCFF", "#FFFFFF", "#99CCFF"]]
        }, {
            name : "可爱、快乐、有趣 ",
            desc : "可爱、快乐、有趣印象中的色彩搭配特点是，色相分布均匀，冷暖搭配，饱和度高，色彩分辨度高。",
            colors : [["#66CCCC", "#CCFF66", "#FF99CC"], ["#FF9999", "#FFFFFF", "#FFCC99"], ["#FF6666", "#FFFF66", "#99CC66"], ["#666699", "#FFFFFF", "#FF9999"], ["#99CC33", "#FF9900", "#FFCC00"], ["#FF0033", "#FFFFFF", "#FF9966"], ["#FF9900", "#CCFF00", "#CC3399"], ["#99CC33", "#FFFFFF", "#FF6600"], ["#993366", "#CCCC33", "#666633"], ["#66CCCC", "#FFFFFF", "#666699"]]
        }, {
            name : "活泼、快乐、有趣 ",
            desc : "活泼、快乐、有趣相对前一种印象，色彩选择更加广泛，?最重要的变化是将纯白色用低饱和有彩色或者灰色取代。",
            colors : [["#CC9999", "#FFFF99", "#666699"], ["#FF9900", "#FFFF00", "#0099CC"], ["#CCCC99", "#CC3399", "#99CC00"], ["#FF6666", "#FFFF00", "#3399CC"], ["#CC6600", "#999999", "#CCCC33"], ["#FF9933", "#FFFFCC", "#009933"], ["#0099CC", "#CCCCCC", "#FF6666"], ["#FF6600", "#FFFF66", "#009966"], ["#CC6633", "#FFCC99", "#CC6600"], ["#CC0066", "#009999", "#FFCC33"]]
        }, {
            name : "运动型、轻快 ",
            desc : "运动的色彩要强化激烈、刺激的感受，同时还要体现健康、快乐、阳光。因此饱和度较高、亮度偏低的色彩在这类印象中经常登场。",
            colors : [["#FF6666", "#FFFF00", "#006699"], ["#FF9966", "#FFFFFF", "#0066CC"], ["#339933", "#FFCC33", "#336699"], ["#FF9900", "#FFFFCC", "#336699"], ["#CC6600", "#CCCC44", "#336699"], ["#99CC33", "#FFFFFF", "#0099CC"], ["#99CC33", "#FF6666", "#336699"], ["#336699", "#FFFFFF", "#99CCCC"], ["#FF0033", "#333399", "#CCCC00"], ["#33CC99", "#FFFF00", "#336699"]]
        }, {
            name : "轻快、华丽、动感 ",
            desc : "华丽的印象要求页面充斥有彩色，并且饱和度偏高，而亮度适当减弱则能强化这种印象。",
            colors : [["#990066", "#FFCC00", "#CC0033"], ["#FFCC33", "#333399", "#FF0033"], ["#666699", "#FFFF00", "#FF0033"], ["#FF0033", "#006699", "#FFFF33"], ["#FFCC00", "#009999", "#CC3366"], ["#FF0033", "#CCCC00", "#006699"], ["#CCCC00", "#FF9933", "#663399"], ["#FF9933", "#FFFF00", "#336699"], ["#CC3333", "#FFCCCC", "#99CC00"], ["#003399", "#FFFF00", "#FF6600"]]
        }, {
            name : "狂野、充沛、动感 ",
            desc : "狂野的印象空间中少不了低亮度的色彩，甚至可以用适当的黑色搭配。其他有彩色的饱和度高，对比强烈。",
            colors : [["#990066", "#FFFF00", "#003399"], ["#CC0033", "#000000", "#003399"], ["#003399", "#FFFF00", "#F00000"], ["#CC3333", "#CCCCCC", "#003366"], ["#CC0033", "#333333", "#CCCC00"], ["#000000", "#99CC00", "#CC0033"], ["#FF0033", "#333333", "#FF9900"], ["#990066", "#000000", "#009966"], ["#666666", "#FF6600", "#333333"], ["#993333", "#CCCC00", "#663366"]]
        }, {
            name : "华丽、花哨、女性化 ",
            desc : "女性化的页面中紫色和品红是主角、粉红、绿色也是常用色相。一般它们之间要进行高饱和的搭配。",
            colors : [["#FFFF99", "#993399", "#FF99CC"], ["#FF6666", "#FFFFFF", "#339999"], ["#FF99CC", "#003399", "#CCFF00"], ["#66CC99", "#FFFFFF", "#CC6699"], ["#CC3399", "#FFCC99", "#FF6666"], ["#FFCCCC", "#FFFFFF", "#993366"], ["#CC6699", "#FFFF00", "#666699"], ["#CC6699", "#99CC66", "#663366"], ["#FF33CC", "#CCCC99", "#663366"], ["#CC3399", "#FFCC99", "#FF6666"]]
        }, {
            name : "回味、女性化、优雅 ",
            desc : "优雅的感觉很奇特，色彩的饱和度一般要降下来。一般以蓝、红之间的相邻，调节亮度和饱和度进行搭配。",
            colors : [["#CCCCCC", "#CC99CC", "#CC3399"], ["#FFCCCC", "#FF99CC", "#CCCCFF"], ["#CC3399", "#9933CC", "#CC99CC"], ["#9999CC", "#FFFFCC", "#FFCCCC"], ["#663366", "#CCCCCC", "#CC99CC"], ["#FF9999", "#FFCCCC", "#FF99CC"], ["#996666", "#CC99CC", "#FFCCCC"], ["#CC9999", "#CCCCCC", "#FFCCCC"], ["#FF9999", "#996699", "#FFCCCC"], ["#996699", "#FFCCCC", "#CC99CC"]]
        }, {
            name : "高尚、自然、安稳 ",
            desc : "高尚一般要用低亮度的黄绿色，色彩亮度降下去，注意色彩的平衡，页面就会显得安稳。",
            colors : [["#CCCC33", "#FFFF99", "#CC9933"], ["#CC9966", "#CCCC66", "#669999"], ["#FF9966", "#996600", "#CCCC00"], ["#CCCC66", "#660033", "#CC6600"], ["#CCCC00", "#666600", "#CCCCFF"], ["#CC9933", "#009999", "#FFCC33"], ["#999966", "#CCCC99", "#339999"], ["#99CC99", "#669933", "#336633"], ["#666633", "#999933", "#CC9966"], ["#660000", "#CC9900", "#CCCC99"]]
        }, {
            name : "冷静、自然 ",
            desc : "绿色是冷静、自然印象的主角，但是绿色作为页面的主要色彩，容易陷入过于消极的感觉传达，因此应该特别重视图案的设计。",
            colors : [["#FFFF99", "#99CC99", "#666600"], ["#996633", "#FFFF99", "#99CC66"], ["#006600", "#66CC66", "#CCFF99"], ["#666600", "#CCCC66", "#CCFFCC"], ["#669933", "#CCCC33", "#663300"], ["#666633", "#999933", "#CC9966"], ["#003300", "#669933", "#CCCC99"], ["#006633", "#663300", "#CCCC66"], ["#666600", "#FFFFCC", "#999999"], ["#006633", "#333300", "#CCCC99"]]
        }, {
            name : "传统、高雅、优雅 ",
            desc : "传统的内容一般要降低色彩的饱和度，特别是棕色很适合。前面介绍紫色也是高雅和优雅印象的常用色相。",
            colors : [["#999933", "#FFFFCC", "#CC99CC"], ["#CC9966", "#666666", "#CC9999"], ["#CCCC99", "#333333", "#9966CC"], ["#CCCC99", "#666666", "#CC9999"], ["#996699", "#CCCC99", "#669999"], ["#CC9966", "#999999", "#666666"], ["#339966", "#CCCCCC", "#996699"], ["#663366", "#999999", "#CCCCFF"], ["#996699", "#9999CC", "#CCCCFF"], ["#CCCC99", "#999999", "#663300"]]
        }, {
            name : "传统、稳重、古典 ",
            desc : "传统、稳重、古典都是保守的印象，色彩的选择上应该尽量用低亮度的暖色，这种搭配符合成熟的审美。",
            colors : [["#6699CC", "#663366", "#CCCC99"], ["#990033", "#CCFF66", "#FF9900"], ["#666699", "#660033", "#99CC99"], ["#663300", "#FF9933", "#FFFF66"], ["#990033", "#006633", "#CCCC00"], ["#660033", "#999933", "#660099"], ["#993366", "#CCCC33", "#666633"], ["#996600", "#CCCC66", "#666600"], ["#009933", "#CC9900", "#666666"], ["#666633", "#CCCC33", "#CC3366"]]
        }, {
            name : "忠厚、稳重、有品位 ",
            desc : "亮度、饱和度偏低的色彩会给人忠厚、稳重的感觉。这样的搭配为了避免色彩过于保守，使页面僵化、消极，应当注重冷暖结合和明暗对比。",
            colors : [["#FFFFCC", "#CC9933", "#336666"], ["#336666", "#996633", "#CCCC33"], ["#336633", "#990033", "#FFCC99"], ["#333366", "#669999", "#996600"], ["#993333", "#CC9966", "#003300"], ["#336633", "#CCCC99", "#333366"], ["#663300", "#999933", "#333333"], ["#663366", "#666666", "#333366"], ["#999900", "#990033", "#CC99CC"], ["#333366", "#990033", "#CCCCCC"]]
        }, {
            name : "简单、洁净、进步 ",
            desc : "简单、洁净的色彩在色相上可以用蓝、绿表现，并大面积留白。而进步的印象可以多用蓝色，搭配低饱和甚至灰色。",
            colors : [["#CCCCCC", "#FFFFFF", "#666699"], ["#CCFF66", "#FFFFFF", "#003366"], ["#99CCFF", "#FFFFFF", "#336699"], ["#CCCC33", "#FFFFFF", "#336699"], ["#0099FF", "#FFFFCC", "#666699"], ["#99CC33", "#CCCCCC", "#000000"], ["#CCCCCC", "#003366", "#99CCFF"], ["#0099CC", "#CCFF66", "#666666"], ["#3399CC", "#003366", "#CCCCCC"], ["#ABCDEF", "#ABCDEF", "#ABCDEF"]]
        }, {
            name : "简单、时尚、高雅 ",
            desc : "灰色是最为平衡的色彩，并且是塑料金属质感的主要色彩之一，因而要表达高雅、时尚，可以适当使用，甚至大面积使用。但是要注重图案和质感的构造。",
            colors : [["#99CCFF", "#FFFF66", "#666666"], ["#336666", "#FFFFFF", "#999999"], ["#0099CC", "#FFFFFF", "#666666"], ["#999999", "#CCCCCC", "#336666"], ["#CCCCCC", "#999999", "#663366"], ["#666666", "#CCCCCC", "#6699CC"], ["#999999", "#FFFFFF", "#333366"], ["#669999", "#CCCCCC", "#666666"], ["#999999", "#CCCCCC", "#333333"], ["#ABCDEF", "#ABCDEF", "#ABCDEF"]]
        }, {
            name : "简单、进步、时尚 ",
            desc : "表现进步的色彩主要以蓝色为主，搭配灰色。而色彩的明度统一、色相相邻，在色彩上会显得简洁。",
            colors : [["#333366", "#99CC33", "#336699"], ["#999999", "#003366", "#669999"], ["#003399", "#CCFF99", "#333333"], ["#999933", "#336699", "#333333"], ["#666666", "#99CC33", "#003366"], ["#999999", "#336699", "#333333"], ["#3366CC", "#CCCC66", "#333300"], ["#6699CC", "#006699", "#000000"], ["#003366", "#CCCCCC", "#006699"], ["#000000", "#999999", "#003366"]]
        }]
    }
};
!function(e,n){var a="",i=""
for(var o in COLORTABLE){var t=COLORTABLE[o]
i+="<div class=&#39;section by"+o+"&#39;>",i+="<h2>"+t.title+"</h2>",i+="<blockquote>"+t.intro+"</blockquote>",a+="<h4>"+t.title+"</h4>",a+="<div>"
for(var s=0,l=t.table.length;l>s;s++){var r=t.table[s]
i+="<div class=&#39;sub-section&#39; id=&#39;"+o+"_"+s+"&#39;>",i+="<h3>"+r.name+"</h3>",i+="<blockquote>"+(t.desc||"")+"</blockquote>",i+="<div class=&#39;groups&#39;>",a+="<a href=&#39;#"+o+"_"+s+"&#39;>"+r.name+"</a>"
for(var c=0,d=r.colors.length;d>c;c++){var v=r.colors[c]
i+="<div class=&#39;group&#39;><span style=&#39;background:"+v[0]+"&#39;><i>"+v[0]+"</i></span><span style=&#39;background:"+v[1]+"&#39;><i>"+v[1]+"</i></span><span style=&#39;background:"+v[2]+"&#39;><i>"+v[2]+"</i></span></div>"}i+="</div>",i+="</div>"}i+="</div>",a+="</div>"}e.innerHTML=i,n.innerHTML=a}(document.getElementById("main"),document.getElementById("nav"));
</script>
</div>
</div>
 
</body>
</html>

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：CSS performance optimization notesNext article：CSS performance optimization notes

Related articles

See more