>首页 -> 技术资料 -> 网页配色
网页设计常用色彩搭配表 - 配色表
 作者:奥德传媒 网络摘录| 浏览:1139次  评论:0条 ;责任编辑:admin | 
页面颜色布局非常重要,以下列出了页面中经常用到的色系搭配,供您参考!

按色相的搭配分类

 
本节将网页设计中常见的色彩搭配按照色相的顺序归类。每类都以该色相为主,配以其他色相或者同色相的,应用对比和调和的方法,并按照从轻快到浓烈的顺序排序。

红色

 
#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
 

橙色

 
#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
 

黄色

 
#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
 

黄绿色

 
#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
 

绿色

 
#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
 

青绿色

 
#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
 

蓝色

 
#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
 

蓝紫色

 
#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
 

紫色

 
#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
 

紫红色

 
#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
 

按印象的搭配分类

 
色彩搭配看似复杂,但并不神秘。既然每种色彩在印象空间中都有自己的位置,那么色彩搭配得到的印象可以用加减法来近似估算。如果每种色彩都是高亮度的,那么它们的叠加,自然会是柔和、明亮的;如果每种色彩都是浓烈的,那么它们叠加,就会是浓烈的。当然在实际设计过程中,设计师还要考虑到乘除法,比如同样亮度和对比度的色彩,在色环上的角度不同,搭配起来就会得到千变万化的感觉。因此本书除了要列举出按色相的搭配,也要将印象作为重点的搭配分类列举出来,以供读者参考。

柔和、明亮、温柔

 
亮度高的色彩搭配在一起就会得到柔和、明亮、温和的感觉。为了避免刺眼,设计师一般会用低亮度的前景色调和,同时色彩在色环之间的距离也有助于避免沉闷。
#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
 

柔和、洁净、爽朗

 
对于柔和、清洁、爽朗的印象,色环中蓝到绿相邻的颜色应该是最适合的。并且亮度偏高。可以看到,几乎每个组合都有白色参与。当然在实际设计时,可以用蓝绿相反色相的高亮度有彩色代替白色。
#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
 

可爱、快乐、有趣

 
可爱、快乐、有趣印象中的色彩搭配特点是,色相分布均匀,冷暖搭配,饱和度高,色彩分辨度高。
#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
 

活泼、快乐、有趣

 
活泼、快乐、有趣相对前一种印象,色彩选择更加广泛,?最重要的变化是将纯白色用低饱和有彩色或者灰色取代。
#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
 

运动型、轻快

 
运动的色彩要强化激烈、刺激的感受,同时还要体现健康、快乐、阳光。因此饱和度较高、亮度偏低的色彩在这类印象中经常登场。
#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
 

轻快、华丽、动感

 
华丽的印象要求页面充斥有彩色,并且饱和度偏高,而亮度适当减弱则能强化这种印象。
#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
 

狂野、充沛、动感

 
狂野的印象空间中少不了低亮度的色彩,甚至可以用适当的黑色搭配。其他有彩色的饱和度高,对比强烈。
#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
 

华丽、花哨、女性化

 
女性化的页面中紫色和品红是主角、粉红、绿色也是常用色相。一般它们之间要进行高饱和的搭配。
#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
 

回味、女性化、优雅

 
优雅的感觉很奇特,色彩的饱和度一般要降下来。一般以蓝、红之间的相邻,调节亮度和饱和度进行搭配。
#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
 

高尚、自然、安稳

 
高尚一般要用低亮度的黄绿色,色彩亮度降下去,注意色彩的平衡,页面就会显得安稳。
#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
 

冷静、自然

 
绿色是冷静、自然印象的主角,但是绿色作为页面的主要色彩,容易陷入过于消极的感觉传达,因此应该特别重视图案的设计。
#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
 

传统、高雅、优雅

 
传统的内容一般要降低色彩的饱和度,特别是棕色很适合。前面介绍紫色也是高雅和优雅印象的常用色相。
#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
 

传统、稳重、古典

 
传统、稳重、古典都是保守的印象,色彩的选择上应该尽量用低亮度的暖色,这种搭配符合成熟的审美。
#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
 

忠厚、稳重、有品位

 
亮度、饱和度偏低的色彩会给人忠厚、稳重的感觉。这样的搭配为了避免色彩过于保守,使页面僵化、消极,应当注重冷暖结合和明暗对比。
#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
 

简单、洁净、进步

 
简单、洁净的色彩在色相上可以用蓝、绿表现,并大面积留白。而进步的印象可以多用蓝色,搭配低饱和甚至灰色。
#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
 

简单、时尚、高雅

 
灰色是最为平衡的色彩,并且是塑料金属质感的主要色彩之一,因而要表达高雅、时尚,可以适当使用,甚至大面积使用。但是要注重图案和质感的构造。
#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
 

简单、进步、时尚

 
表现进步的色彩主要以蓝色为主,搭配灰色。而色彩的明度统一、色相相邻,在色彩上会显得简洁。
#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
 
(如果您觉得本站不错,请告诉身边的朋友,或转载到论坛、百度知道、贴吧等,记得带网址哟!)
更多
来源:网络| 浏览:1139次 |  [ ][编辑] [收藏] [评论] [返回顶部]
相关栏目
热门文章
推荐文章