- 相关推荐
网页设计色彩搭配的基本知识
色彩，是最先也是最持久地给浏览者以网站形象的因素。下面是小编为大家整理的网页设计色彩搭配的基本知识，欢迎参考~
网页设计色彩搭配的基本知识
一、确定主体色
遵循主从关系，这是最稳定的处理色彩原则。
其实红、黄、绿、蓝、紫等每一个字都代表一类具体的颜色，也就是色相了，它是指色彩的相貌，是区别色彩种类的名称。在页面上，除白色为背景外大 量使用的颜色，就是这个网页的主体颜色。如果在同一个页面内运用了多种颜色，把握不好的话，就无法确定哪个是主体色。因为其他的颜色面积不能过大，遵循主 从关系。
二、相近色
选择色彩相近的颜色，非常容易搭配。
解释一下：假设在红色里面加白，红色就会越来越亮，明度提高。而加黑，红色就越来越暗。明度降低。那么色彩的明度就是指任何一种色彩的明暗程度。
假设在蓝色里面加了黑、白、灰，或另一种颜色，就会使得蓝色不纯，不再鲜艳。那么色彩的纯度就是指彩色系中每个色彩的鲜艳程度。
同色彩系(同色相)，明度不同或纯度不同的几种颜色容易搭配，比如挑几种深浅不同的绿色来搭配，一般页面不会有太大问题;同一页面尽量不要多出 4种颜色。超级连接的色彩搭配也是遵循以上的原则。而文字颜色的搭配，则要与背景分离。有个小方法：打开Dreamweaver的颜色盒。如果 它们6色为一组的话，每组都是很不错的配色方案，但是都比较高调。其实如果搭配颜色的时候遇到麻烦，就可以在颜色面板中，调入不同的几种色系，看看它们相 邻的颜色，或隔几种色来搭配，找合适你页面的颜色绝对不难。
三、色彩均衡
它是比较保险的配色互补原则。多种颜色同时存在的时候不容易把握好，一定要调和统一。
比如利用色彩错视现象，其中的重量错视在实用设计时用处很多。也就是明度高的浅亮色看起来较轻，明度低的深暗色则较重。
那么在网页设计中，如果运用了较多明度较高的颜色。比如中左边是比较浅的颜色或亮的颜色，就可以用黑色，或同色相的深色小面积压一下，点缀 一下，使得页面不要太轻，达到色彩重量的平衡。平衡的颜色较符合多数人的色彩心理。根据你的情况，如选用黑色，可能会严肃和庄重，而用同色相的深色，则轻 松一些。
四、黑白灰运用
其实黑白灰是宝贝，万不可小看它们。
如果在用色上遇到麻烦，可以大面积的加白，灰;小面积加黑来调节其他颜色搭配不当。遇到使用纯度很高的颜色，比如纯蓝，纯黄等，这样的搭配会很鲜艳，视觉感觉比较兴奋。把这样的颜色明度抬高或降低，搭配上灰、白色，也是调节的方法。
五、色彩心理与情感
选择适合内容风格的颜色。
1.色彩有冷暖的感觉。如儿童类站点不要使用冷色系，且色彩要丰富一些。
2.色彩有柔软和坚硬感。同色相，明度高，则有柔软感。明度低，则会有坚硬感。女性站点，适量选用柔美的淡粉色或高级灰，而男性类站点，就可以使用棕色，深蓝色。
3.从色相看，暖色给人的感觉华丽;从明度看，明度高的感觉华丽;从纯度看，纯度高的色彩给人的感觉华丽。由此首饰类站点可以使用高雅的咖啡和金黄色，而香水类站点可以用明度高的淡绿或浅蓝色。
4.色彩的联想。主要色相抽象的联想(省略具体的联想)：
红色：热情。橙色：温暖、欢乐。黄色：光明、快活。绿色：和平、新鲜。蓝色：安宁、平静、理智。紫色：优雅、高贵、庄重、神秘。黑色：恐怖、死亡。白色：纯洁、神圣、清净。灰色;谦逊等等。
如游戏站点，适合黑色，暗色比较神秘。旅游类站点，可以选用草绿搭配黄色。政府类站点，可以使用红色，蓝色。时装类站点，可以选择高级灰、紫色等，突出高雅氛围。校园类站点也适合绿色。科技类适合深蓝色。新闻类适合深红色，或黑色，搭配高级灰等等。
5.色彩明度的高低与声音的高低相关。强烈的色彩如亮黄色、鲜红色，具有尖锐、高亢的音乐感。暗浊色如海蓝色、深灰色等具有低沉浑厚的音乐感。现代音像艺术正是采用了视觉与听觉等多媒体相结合的方法，展现了丰富、新颖的视听效果。
6.根据色彩的味觉感。绿色、黄绿色是未成熟的果实色彩，有酸、涩的味感。橙色、浅黄色、浅棕色、粉红色使人想到了成熟的瓜果色彩而产生甜甜的味感。设计饮食类站点，就可以遵循以上原则。
六、页面的色彩分配
1.网页内容，是信息存储空间，要求背景要亮，文字要暗，对比度要高。一般是白黑字，如果是黑底，也可以是灰字，可以用很淡的颜色来做，淡到让人可以忽略。
2.网页标头，是LOGO和主要信息放置的地方。一般要深色。具有较高对比度，以便用户能够非常方便地看到他在该站点的所在位置。标题通常与页面其它部分有不同的"风貌"，它可以使用与网页内容非常不同的字体或颜色组合。也可以采用网页内容的反色。
3.导航菜单所在区域。把菜单背景颜色设置暗一些，然后依靠较高的颜色对比度、比较强烈的图形元素或独特的字体将网页内容和菜单的不同目的准确地区分开。
4.侧栏，尽管不是所有网页都使用侧栏，它仍不失为显示附加信息的一个有用方式。它应与网页内容清楚地区分开，同时也要易于阅读。
5.页脚，这一项最不重要，不应该喧宾夺主。可以考虑和侧栏相同的颜色，或稍微压一下深一些的颜色。
6.在配色上使用一些比较跳跃的颜色，用来引导视线。如：灰棕色为主题色。用跳跃性的橙色来做导航、按钮，指引视线的去向。
企业网站建设各页面色彩布局搭配技巧
网页视觉水平主要由形式（或布局）、色彩、图片和文本信息组成，设计师通常更关注形式，因为视觉冲击、设计差异或创新主要依赖于形式呈现，色彩主要影响整体印象、设计质量和观众情绪。
一、色彩在精不多
在企业网站页面上，如果色彩过于复杂，会给人一种令人眼花缭乱、头晕的感觉，肯定会让客户失去持续阅读文章的细心。因此，企业网站建设的色彩应该是一致的，如果可以的话，试着应用一种色彩，如果色彩太简单，简单，可以适当地恢复色彩的清晰度，不一样色彩的清晰度在企业网站页面的整体规划不仅不容易使网站页面看起来冗长，而且会改善网站页面的纹理。除了调整色彩的清晰度外，还可以使用不一样的图形来消除单一色彩的缺点。
二、类似色的搭配
简单地说，它是相似色彩之间的搭配，在主题色彩的左右距离选择两种相邻的色彩。类似的色彩是常见的色彩，如黄色，给用户一种愉快的感觉，黄色的对比度相对较低，很容易产生和谐的美。
三、亮度对比分析
亮度就是指色彩的亮度。亮度越大，色彩就越亮。网站设计中亮度较低的色彩更容易混合色彩。亮度对比度就是指由不一样色彩之间的亮度差产生的对比，也是网页页面产生适当黑、白、灰效果的主要手段。
四、页面布局
网页的布局应该足够合理，具有一定的层次感，有序的展示，合理的内容分布。内容的设计充满了这种一定的层次感，当用户看起来更舒适时。
网页设计的色彩搭配技巧
网页色彩搭配方法：
1.同种色彩搭配;
2.邻近色彩搭配;
3.对比色彩搭配;
4.暖色色彩搭配。
1、网页设计的色彩搭配技巧
1、同种色彩搭配：同种色彩搭配是指首先选定一种色彩，然后调整其透明度和饱和度，将色彩变淡或加深，而产生新的色彩，这样的页面看起来色彩统一，具有层次感。
2、邻近色彩搭配：邻近色是指在色环上相邻的颜色，如绿色和蓝色、红色和黄色即互为邻近色。采用邻近色搭配可以使网页避免色彩杂乱，易于达到页面和谐统一的效果。
3、对比色彩搭配：一般来说，色彩的三原色(红、黄、蓝)最能体现色彩间的差异。色彩的强烈对比具有视觉诱惑力，能够起到很多的作用。对比色可以突出重点，产生强烈的视觉效果。通过合理使用对比色，能够使网站特色鲜明、重点突出。在设计时，通常以一种颜色为主色调，其对比色作为点缀，以起到画龙点睛的作用。
4、暖色色彩搭配：暖色色彩搭配是指使用红色橙色黄色集合色等色彩的搭配。这种色调的运用可为网页营造出温馨、和谐和热情的氛围。
5、冷色色彩搭配：冷色色彩搭配是指使用绿色、蓝色及紫色等色彩的搭配，这种色彩搭配可为网页营造出宁静、清凉和高雅的氛围。冷色调色彩与白色搭配一般会获得较好的视觉效果。
6、有主色的混合色彩搭配：有主色的混合色彩搭配是指以一种颜色作为主要颜色，同色辅以其他色彩混合搭配，形成缤纷而不杂乱的搭配效果。
7、文字与网页的背景色对比要突出：文字内容的颜色与网页的背景色对比要突出，底色深，文字的颜色就应浅，以深色的背景衬托浅色的内容(文字或图片)。反之，底色淡，文字的颜色就要深些，以浅色的背景衬托深色的内容(文字或图片)。
2、网页设计色彩搭配原则
在选择网页色彩时，除了考虑网站本身的特点外还要遵循一定的艺术规律，从而设计出精美的网页。
1、色彩的鲜明性：如果一个网站的色彩鲜明，很容易引人注意，会给浏览者耳目一新的感觉。
2、色彩的独特性：要有与众不同色彩，网页的用色必须要有自己独特的风格，这样才能给浏览者留下深刻的印象。
3、色彩的艺术性：网站设计是一种艺术活动，因此必须遵循艺术规律。按照内容决定形式的原则，在考虑网站本身特点的同时，大胆进行艺术创新，设计出既符合网站要求，又具有一定艺术特色的网站。
4、色彩搭配的合理性：色彩要根据主题来确定，不同的主题选用不同的色彩。例如，用蓝色体现科技型网站的专业，用粉红色体现女性的柔情等。
3、网页设计配色技巧
1. 彩色和非彩色选用技巧
网页制作是选用彩色还是非彩色好，根据专业研究表明：
彩色的记忆效果是黑白的3.5倍。也就是说，一般彩色页面较完全黑白页面更加吸引人。
(1)主要内容文本用非彩色(白色、黑色或灰色)。
(2)边框、背景或修饰图片用彩色。
这样页面整体不单调，同时主要内容也不会影响视觉效果。
2.非彩色搭配技巧
黑白是最基本和最简单的搭配，白字黑底，白底黑字都非常清晰明了。
灰色是通用色，可以和任何彩色搭配，也可以帮助两种对立的色彩和谐过渡。
3.同色搭配技巧
同色搭配是指先选定一种色彩，然后调整该色彩透明度或饱和度(就是将色彩变淡或则加深)，产生新的色彩，分别应用于网页各个元素上。这样的页面看起来色彩统一，富有层次感。
4.多色搭配技巧
用相反色彩。先选定一种色彩，然后选择它的相反色，在Photoshop 中按Ctrl+Shift+I组合键可以快速制作反色。这样整个页面色彩丰富而不花俏。
用同一色系。同一色系就是感觉比较接近的色彩，例如淡蓝、淡黄、浅绿或者土黄。确定色彩的方法为：首先在Photoshop里单击工具箱中的前景色方框，然后在打开的“拾色器”对话框中选择“颜色库”，最后在颜色列表中选择相邻颜色应用即可。
【网页设计色彩搭配的基本知识】相关文章：
室内设计色彩搭配的常识04-17
服装色彩基本知识11-23
家居色彩搭配禁忌12-06
色彩搭配在平面设计中的运用12-24
服装色彩搭配技巧大全12-03
色彩搭配原理和技巧12-28
服装搭配色彩学05-26
新家色彩搭配有哪些关键点08-19
色彩搭配技巧的色相、明度与纯度解析09-14
现代简约风格色彩搭配方法03-09