网页设计常用色彩搭配表配色表.doc

《网页设计常用色彩搭配表配色表.doc》由会员分享，可在线阅读，更多相关《网页设计常用色彩搭配表配色表.doc（18页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

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

2、色彩搭配在一起就会得到柔和、明亮、温和的感觉。为了避免刺眼，设计师一般会用低亮度的前景色调和，同时色彩在色环之间的距离也有助于避免沉闷。对于柔和、清洁、爽朗的印象，色环中蓝到绿相邻的颜色应该是最适合的。并且亮度偏高。可以看到，几乎每个组合都有白色参与。当然在实际设计时，可以用蓝绿相反色相的高亮度有彩色代替白色。可爱、快乐、有趣印象中的色彩搭配特点是，色相分布均匀，冷暖搭配，饱和度高，色彩分辨度高。#66CCCC#CCFF66#FF99CC#FF9999#FFFFFF#FFCC99#FF6666#FFFF66#99CC66#666699#FFFFFF#FF9999#99CC33#FF9900#F

3、FCC00#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#CCCCC

4、C#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#FF

5、0033#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狂野的印象空间中少不了低

6、亮度的色彩，甚至可以用适当的黑色搭配。其他有彩色的饱和度高，对比强烈。#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#993

7、399#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#9933

8、CC#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

9、#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#66993

10、3#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

11、#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亮度、饱和度偏低的色彩会给人忠厚

12、、稳重的感觉。这样的搭配为了避免色彩过于保守，使页面僵化、消极，应当注重冷暖结合和明暗对比。#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简单、洁净的色彩在色相上可以用蓝、绿表现，并大面积留白。而进步的印象可以多用蓝色，搭配低

13、饱和甚至灰色。#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#

14、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#00336618 / 18