<!--源码来源：https://www.qymao.cn/-->
<!DOCTYPE html><html><head><meta charset="utf-8">
<title>网页设计常用色彩搭配表 - 配色表 | 资源火的工具箱</title>
<meta name="keywords" content="配色表,网页配色,色彩搭配,网页设计,常用色彩搭配">
<meta name="description" content="色彩搭配看似复杂，但并不神秘。既然每种色彩在印象空间中都有自己的位置，那么色彩搭配得到的印象可以用加减法来近似估算。将网页设计中常见的色彩搭配按照色相的顺序归类。搭配起来就会得到千变万化的感觉。">
<meta name="copyright" content="molure.cn">
<meta name="author" content="molure.cn">
<link rel="shortcut icon" href="favicon.ico">
<style>
html,
body {
overflow: hidden;
height: 100%
}
body {
font: 14px/1.5 "Lucida Grande", "Helvetica Neue", Helvetica, Arial, Verdana, "PingFang SC", "Hiragino Sans GB", STHeiti, "Microsoft YaHei", "WenQuanYi Micro Hei", "WenQuanYi Micro Hei Mono", "WenQuanYi Zen Hei", "WenQuanYi Zen Hei Mono", "Noto Sans CJK SC", "Source Han Sans CN", SimSun, 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: #000;
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 14px;
width: 198px;
height: 85px;
_display: inline
}
.group span {
float: left;
width: 60px;
height: 60px;
text-align: center
}
.group span:first-child {
border-radius: 7px 0 0 7px;
}
.group span:last-child {
border-radius: 0 7px 7px 0;
}
.group input {
display: block;
margin-top: 64px;
background: #fff;
font-family: Consolas, "Ubuntu Mono", Monaco, Menlo, "Andale Mono", "Liberation Mono", Courier, monospace;
border: none 0;
font-size: 12px;
width: 100%;
text-align: center;
}
[data-clipboard-text] {
position: relative;
cursor: pointer;
transition: .2s;
}
[data-clipboard-text]:hover {
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
z-index: 2;
}
[data-clipboard-text]:hover input {
font-weight: bold;
}
#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;
font-weight: normal
}
#header h1 span {
display: block;
font-size: 40px
}
#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: #111;
color: #fff
}
#nav::-webkit-scrollbar {
width: 6px
}
#nav::-webkit-scrollbar-track {
background: rgba(255, 255, 255, .1)
}
#nav::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, .3)
}
.aside {
margin: 50px auto 0;
width: 728px;
}
.morelinks {
text-align: center;
color: #999;
margin: 50px 0;
text-decoration: none;
}
.morelinks a {
color: #666;
}
</style>
</head>
<body>
<div id="panel">
<div id="header">
<h1>网页设计常用色彩搭配表<span>《配色表》</span></h1>
<address>制作 by <a href="https://www.qymao.cn/">企业猫源码网</a></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"
