怎样做好色彩搭配

怎样做好色彩搭配

有了好的框架和页面设计，而色彩把握不准，则会导致整个设计失败。色彩，是最先也是最持久地给浏览者以网站形象的因素。色彩和谐的重要性，是你我都明白的。

如何做好色彩的搭配呢？

下面总结了几个色彩实用设计的要点，希望能给大家带来帮助。

确定主体色 遵循主从关系，这是最稳定的处理色彩原则

相近色 选择色彩相近的颜色，非常容易搭配。 解释一下：假设在红色里面加白，红色就会越来越亮，明度提高。而加黑，红色就越来越暗。明度降低。那么色彩的明度就是指任何一种色彩的明暗程度。如下图中，明度随箭头方向逐渐提高。

相近色 选择色彩相近的颜色，非常容易搭配。

解释一下：假设在红色里面加白，红色就会越来越亮，明度提高。而加黑，红色就越来越暗。明度降低。那么色彩的明度就是指任何一种色彩的明暗程度。如下图中，明度随箭头方向逐渐提高。 假设在蓝色里面加了黑、白、灰，或另一种颜色，就会使得蓝色不纯，不再鲜艳。那么色彩的纯度就是指彩色系中每个色彩的鲜艳程度。

同 色彩系（同色相），明度不同或纯度不同的几种颜色容易搭配，

比如挑几种深浅不同的绿色来搭配，一般页面不会有太大问题；同一页面尽量不要多出4种颜色。超级连接的色彩搭配也是遵循以上的原则。而文字颜色的搭配，则要与背景分离。有个小方法：打开Photoshop 6 看到色彩（Swatches）的控制面板，调入Anpa colors.aco。如果它们6色为一组的话，每组都是很不错的配色方案，但是都比较高调：）其实如果搭配颜色的时候遇到麻烦，就可以在Photoshop的Swatches面板，调入不同的几种色系，看看它们相邻的颜色，或隔几种色来搭配，找合适你页面的颜色绝对不难。

色彩均衡 它 是比较保险的配色互补原则。

多种颜色同时存在的时候不容易把握好，一定要调和统一。

比如利用色彩错视现象，其中的重量错视在实用设计时用处很多。也就是明度高的浅亮色看起来较轻，明度低的深暗色则较重。

那么在网页设计中，如果运用了较多明度较高的颜色。比如右图中左边是比较浅的颜色或亮的颜色，就可以用黑色，或同色相的深色小面积压一下，点缀一下，使得页面不要太轻，达到色彩重量的平衡。平衡的颜色较符合多数人的色彩心理。根据你的情况，如选用黑色，可能会严肃和庄重，而用同色相的深色，则轻松一些。

黑白灰运用，其实黑白灰是宝贝，万不可小看它们。

如果在用色上遇到麻烦，可以大面积的加白，灰；小面积加黑来调节其他颜色搭配不当。遇到使用纯度很高的颜色，比如纯蓝，纯黄等，这样的搭配会很鲜艳，视觉感觉比较兴奋。把这样的颜色明度抬高或降低，搭配上灰、白色，也是调节的方法。

1、色彩有冷暖的感觉。如儿童类站点不要使用冷色系，且色彩要丰富一些。

2、色彩有柔软和坚硬感。同色相，明度高，则有柔软感。明度低，则会有坚硬感。女性站点，适量选用柔美的淡粉色或高级灰，而男性类站点，就可以使用棕色，深蓝色。

3、从色相看，暖色给人的感觉华丽；从明度看，明度高的感觉华丽；从纯度看，纯度高的色彩给人的感觉华丽。由此首饰类站点可以使用高雅的咖啡和金黄色，而香水类站点可以用明度高的淡绿或浅蓝色。

4、色彩的联想。主要色相抽象的联想（省略具体的联想）： 红色：热情。橙色：温暖、欢乐。黄色：光明、快活。绿色：和平、新鲜。蓝色：安宁、平静、理智。紫色：优雅、高贵、庄重、神秘。黑色：恐怖、死亡。白色：纯洁、神圣、清净。灰色；谦逊等等。 如游戏站点，适合黑色，暗色比较神秘。旅游类站点，可以选用草绿搭配黄色。政府类站点，可以使用红色、蓝色。时装类站点，可以选择高级灰、紫色等，突出高雅氛围。校园类站点也适合绿色。科技类适合深蓝色。新闻类适合深红色，或黑色，搭配高级灰等等。

5、色彩明度的高低与声音的高低相关。强烈的色彩如亮黄色、鲜红色，具有尖锐、高亢的音乐感。暗浊色如海蓝色、深灰色等具有低沉浑厚的音乐感。现代音像艺术正是采用了视觉与听觉等多媒体相结合的方法，展现了丰富、新颖的视听效果。

6、根据色彩的味觉感。绿色、黄绿色是未成熟的果实色彩，有酸、涩的味感。橙色、浅黄色、浅棕色、粉红色使人想到了成熟的瓜果色彩而产生甜甜的味感。设计饮食类站点，就可以遵循以上原则。

用二分栏结构，假设 已有页面部分为：网页内容（3）、网页标头（1）、导航菜单（5）、侧栏（2）、页脚（4）。

1、网页内容，是信息存储空间，要求背景要亮，文字要暗，对比度要高。一般是白黑字，如果是黑底，也可以是灰字，可以用很淡的颜色来做，淡到让人可以忽略。

2、网页标头，是LOGO和主要信息放置的地方。一般要深色。具有较高对比度，以便用户能够非常方便地看到他在该站点的所在位置。标题通常与页面其它部分有不同的“风貌”，它可以使用与网页内容非常不同的字体或颜色组合。也可以采用网页内容的反色。

3、导航菜单所在区域。把菜单背景颜色设置暗一些，然后依靠较高的颜色对比度、比较强烈的图形元素或独特的字体将网页内容和菜单的不同目的准确地区分开。

4、侧栏，尽管不是所有网页都使用侧栏，它仍不失为显示附加信息的一个有用方式。它应与网页内容清楚地区分开，同时也要易于阅读。

5、页脚，这一项最不重要，不应该喧宾夺主。可以考虑和侧栏相同的颜色，或稍微压一下深一些的颜色。

6、在配色上使用一些比较跳跃的颜色，用来引导视线。如：http://www.biznew.com/灰棕色为主题色。用跳跃性的橙色来做导航、按钮，指引视线的去向。

红和绿，应用得几近完美。

相近的色相，明度高一些，加入大量的白，搭配得非常好看。

多色相的平衡。墨绿和黑色是主题。金黄色来引导视线。

金黄加绿，高雅华贵，美丽的秋天感觉。这个站点的配色，实在太温暖了。

类似的高阶调的颜色搭配，如果你接受不了，就适量加入一些黑色，或大量的白色调和一下。