彩搭配原则

1.色彩的鲜明性：

    如果一个网站的色彩鲜明，很容易引人注意，会给浏览者耳目一新的感觉。

2.色彩的独特性：

    要有与众不同色彩，网页的用色必须要有自己独特的风格，这样才能给人浏览者留下深刻的印象。

3.色彩的艺术性：

    网站设计是一种艺术活动，因此必须遵循艺术规律。按照内容决定形式的原则，在考虑网站本身特点的同时，大胆进行艺术创新，设计出既符合网站要求，又具有一定艺术特色的网站。

4.色彩搭配的合理性：

    色彩要根据主题来确定，不同的主题选用不同的色彩。例如，用蓝色体现科技型网站的专业，用粉红色体现女性的柔情等。

网页美工设计中，最常用的几个颜色为蓝色、绿色、橙色，以及暗红色。

蓝色多与白、橙搭配，蓝为主调。白底，蓝标题栏，橙色按钮或ICON做点缀；蓝天白云，沉静整洁的感觉。

绿色多与白、兰两色搭配，绿为主调。白底，绿标题栏，兰色或橙色按钮或ICON做点缀，绿白相间，雅致而有生气。

橙色多与白、红搭配，橙为主调。白底，橙标题栏，暗红或桔红色按钮或ICON做点缀，橙色活泼热情，标准的`商业色调，因此多用于商业网站的网页美工设计。

暗红色显得宁重、严肃、高贵，需要配黑和灰来压制刺激的红色，常以暗红为主调。黑或灰底，暗红标题栏，文字内容背景为浅灰色。

• 色彩的鲜明性：如果一个网站的色彩鲜明，很容易引人注意，会给浏览者耳目一新的感觉。

• 色彩的独特性：要有与众不同色彩，网页的用色必须要有自己独特的风格，这样才能给人浏览者留下深刻的印象。

• 色彩的艺术性：网站设计是一种艺术活动，因此必须遵循艺术规律。按照内容决定形式的原则，在考虑网站本身特点的同时，大胆进行艺术创新，设计出既符合网站要求，又具有一定艺术特色的网站。

• 色彩搭配的合理性：色彩要根据主题来确定，不同的主题选用不同的色彩。例如，用蓝色体现科技型网站的专业，用粉红色体现女性的柔情等。

网页配色很重要，网页颜色搭配的是否合理会直接影响到访问者的情绪。好的色彩搭配会给访问者带来很强的视觉冲击力，不恰当的色彩搭配则会让访问者浮躁不安。

• 同种色彩搭配：同种色彩搭配是指首先选定一种色彩，然后调整其透明度和饱和度，将色彩变淡或加深，而产生新的色彩，这样的页面看起来色彩统一，具有层次感。

• 邻近色彩搭配：邻近色是指在色环上相邻的颜色，如绿色和蓝色、红色和黄色即互为邻近色。采用邻近色搭配可以里是网页避免色彩杂乱，易于达到页面和谐统一的效果。

• 对比色彩搭配：一般来说，色彩的三原色(红、黄、蓝)最能体现色彩间的差异。色彩的强烈对比具有视觉诱惑力，能够起到几种实现的作用。对比色可以突出重点，产 生强烈的视觉效果。通过合理使用对比色，能够使网站特色鲜明、重点突出。在设计时，通常以一种颜色为主色调，其对比色作为点缀，以起到画龙点睛的作用。

• 暖色色彩搭配：暖色色彩搭配是指使用红色橙色黄色集合色等色彩的搭配。这种色调的运用可为网页营造出稳性、和谐和热情的氛围。

• 冷色色彩搭配：冷色色彩搭配是指使用绿色、蓝色及紫色等色彩的搭配，这种色彩搭配可为网页营造出宁静、清凉和高雅的氛围。冷色点色彩与白色搭配一般会获得较好的视觉效果。

• 有主色的混合色彩搭配：指以一种颜色作为主要颜色，同色辅以其他色彩混合搭配，形成缤纷而不杂乱的搭配效果。

• 文字与网页的背景色对比要突出：文字内容的颜色与网页的背景色对比要突出，底色深，文字的颜色就应浅，以深色的背景衬托浅色的内容(文字或图片);反之，底色淡，文字的颜色就要深些，以浅色的背景衬托深色的内容(文字或图片)。

在您的网站上使用颜色的3个步骤

• 选择主色为品牌颜色

• 选择1到2个辅助色颜色为您的网站创建一个配色方案

• 选择背景颜色来完成设计

1、选择你的网站主色

当人们访问你的网站时，主色将有助于让人产生某些情绪或感觉，就像红色：激情，兴奋，勇气，主色是您希望观众在想到您时记住的颜色，如果您已经有了logo，请确保logo的主要颜色之一是使用主色。

如果没有主导品牌的颜色，怎么选择颜色呢？那我们就要先创造一个品牌的颜色，如何创造品牌的颜色，那我们就要先了解颜色的含义，不同的颜色能带给人不同的感觉体验，大公司不会意外地挑选他们的品牌颜色，品牌颜色被选择作为其品牌和营销举措的一部分，不同的颜色有吸引特定类型的购物者的能力，甚至可以改变消费者的行为。我们需要定位我们的市场和用户人群以及我们的公司品牌理念或者想要给用户传达的我们的品牌概念，由此来选择我们的品牌颜色，那我们的网站主色也就源于我们的品牌颜色（logo颜色）。

下面给出一张图简单解释不同颜色给人带来的不同感觉:

怎么在你的网站里面使用主色?

只有在希望网站访问者注意的有限数量的地方使用您的主色,或者希望访问者采取某些措施的地方（例如拨打电话号码，填写联系表单，请注册 通讯等）,一般你的主色要够突出，可以真实的强调出你想要访客关注的地方。

2、选择你的辅助色

整个网站上只有1种颜色显得比较单调，为了使网站的设计更有趣（和专业），需要用到辅助色，以突出网站的值得注意的部分，如报价，按钮或字幕。

颜色混合和搭配是很多人头痛的点，因为不太容易或直观地知道哪些颜色很好地融合在一起，对色彩理论的没有很好的理解，就会大量的试错。怎么能轻松的选择好辅助色呢？只要你拥有主色（不知道怎么拥有主色的看序列一的内容），通过使用颜色匹配工具，如Adobe Color CC工具，很容易找到你的辅助颜色。

怎么在你的网站里使用辅助色？

可以使用互补的辅助色来突出显示网页上的辅助信息，虽然这些内容不是网页的主要焦点，但仍然希望它们脱颖而出（副标题，辅助按钮，信息框，背景颜色等），尝试限制只有1或2辅助色。（如果辅助颜色太多，他们会产生太多的焦点，可能会让网站的访问者混淆视线）。

3、选择你网站的背景颜色

如果希望网站访问者能够轻松浏览网站，不想过于粗重或明亮的背景颜色吸收您的内容，想让访客的眼睛瞥见您想要说的重要内容，那么选择一个正确的背景颜色很重要。

类型一 ： 内容密集信息网站和电子商务网站

这些类型的网站的目的是促进想法或产品，重点是内容或产品，而不是网站的设计， 背景颜色只是帮助使内容更加可见和可读的背景。

用于信息密集型和电子商务网站的最佳配色方案是白色或浅色背景，具有强大的显性和强调色彩。

大胆的主色和辅助色给予网站个性和焦点，而纯平的背景颜色可使您的访问者专注于您的内容或产品。

类型二 ：企业/商业网站

企业/商业网站通常有两个目的：促进品牌或其服务，根据业务网站要关注的目的，网站的背景颜色将会有所不同。

• 推广品牌

当您要建立强大的品牌标识时，您应该使用您的主流或品牌颜色的各种色调作为背景颜色。

这是因为颜色与品牌认知密切相关,当您将主流/品牌色彩的变化用作您的背景时，您将加强品牌，并使其更加难忘。

如果您有一个非常大胆的品牌颜色，使用它作为您的背景颜色可能太压倒性，请考虑选择不那么强烈的品牌颜色， 使用Adobe Color CC工具生成不同色调和亮度的主色。

• 推广服务

如果您希望您的服务价值或您过去项目的投资组合成为焦点，请使用白色或中性背景颜色。

就像内容密集型和电子商务网站一样，不希望网站的背景颜色将焦点从您的内容或您要沟通的消息中脱离出来。

通过选择中性或白色背景，网站的内容自然会变得越来越受到关注。

类型三 ： 图形强化的时尚和创意网站

对于像时尚，设计，餐厅，美容和创意产业中使用的网站，应该使用什么背景图像或颜色，确实没有什么规则。 可以使用黑色的菜单栏显得更加有张力; 或者使用彩虹的所有颜色来创建一个触动人心的背景图像。

在这里你可以打破所有的规则，并使用任何你喜欢的颜色，只要你保持一个规则 - “不要让选择的背景使你的文本或内容难以阅读。

完美的背景颜色让网站的内容成为协调中心，同时与您的主色和辅助色色协调工作，并使访客在浏览您的网站时感觉良好。

如有背景色疑问，请使用白色或浅灰色作为背景颜色，虽然它可能不是最触动人心的颜色，但总是能将内容凸显出来。

结论 & 重点

为网站选择正确的颜色方案不应该基于你最喜欢或直觉的颜色，一个好的网站设计是把观众放在首位来设计的。

选择适合你的目标受众的颜色去设计网站，可以让访客产生难忘的意念，在竞争对手中脱颖而出。

选取配色方案不应该是随机的，相反，它应该是一系列有组织，客观的搭配：

• 将您的品牌与正确的主色匹配;

• 使用Adobe工具匹配主色与辅助色

• 匹配背景颜色和你的主色、辅助色。

1、统一与变化相结合 2、色彩要讲究平衡3、地纹色与图形色的有效搭配原则4、彩的节奏与韵律有效结合的原则5、

色彩鲜明、独特、艺术以及合理。

网页色彩设计的含义
 
（一)网页色彩设计的含义

网页的色彩设计是将两种或两种以上的色彩同时并置在同一网页的界面内、并置的色彩相互作用、相互影响，从而形成网页的整体环境的色彩关系与色彩印象的创意性审美活动。
 
(二)网页色彩设计的特征

从色彩感官刺激角度来说，网页的色彩设计主要在于色相的并置过程。但色彩的并置并不是那么简单的过程，而是需要色彩设计师从色彩学、色彩心理学以及计算机色彩形成的基本原理等请多方面进行理性地分析，然后制定出合理的设计方案。网页的色彩并不是简单的色彩合成，网页的色彩设计也不是仅仅为用户提供视觉刺激，而因为不同的人有不同的色彩审美观念，会因用户的年龄、性别、受教育水平等请多因素而影响到色彩的设计布局，设计师要充分考虑到这一点。网页的色彩设计不但是一门科学，而且是一门艺术，因而必须遵守其特定的设计规律。
 
首先，网页的色彩设计要遵从人的视觉习惯，在色彩搭配时应时刻注意眼睛的舒适性，不要用亮度太高或太低的色彩，以在特定的时间段内注视后不疲劳为宜。其次，在色彩设计的时候要尽量满足用户对色彩审美的需求，尽可能地为用户呈现出美观，符合用户需求的色彩配置。再次，网页的色彩设计是为传递网页信息服务的，即尽管色彩在网页中地位非常重要，但其终究还是一个配角，不能“抢了主要信息的风头”，因此，设计师在色彩选择和搭配的时候时刻要牢记色彩的配角地位。此外，色彩的选择与搭配仍然要注重关注主体用户对色彩的相关喜好。



二、色彩设计的基本原则

色彩对网页的设计而言，完全可以用一个中国的成语来概括赏心说目，这一词语从总体上就可以很好地概括出出网页色彩设计的一个基本原则:“赏心”和“悦目”，“说目”是网页色彩设计的初级层次，即网页色彩的设计首先应该适应和满足人的生理视觉系统的要求，这是设计的基础，只有在满足了视觉上的和谐、舒适，才能满足用户的“赏心”这一高级层次的需求，即在满足了生理视觉系统要求的基础上，方能进一步去探究色彩带给用户的心理感受。如何做到既“悦目”，又“赏心”呢?下面介绍一些能满足这两个基本的原则网页色彩设计策略。
 
(一)统一与变化相结合的原则

在网页的色彩设计中，统一与变化相结合的原则是指在具体设计的过程中，首先要注重整个页面的统一，没有统一就不能很好地体现出秩序感，没有秩序的网页就谈不上美，所以，要实现网页色彩的美，就首先要注重整个页面色彩的统一、协调。但需要注意的是，在一个页面中并不是越统一越好，如果过分统一，则可能会使得整个页面的色彩组合显得过分单调、枯燥和乏味，缺乏新鲜感。因此，在网页的设计中，在保障统一的前提下，注重色彩的变化，但这种变化在整个色彩的组合中应处于次要的地位，起到调节和点缀的作用，如果变化过多，往往会使得整个页面看起来杂乱，反而干扰了主题的表达。在页面的色彩设计中，统一与变化具体是通过色彩的色相、明度和纯度等的变化来实现的。但在具体的色彩设计过程中统一与变化的原则并不是一成不变的，而是在统一的大前提下，在局部的设计上做出适当的调整，从而使得一些设计体现出古典的韵味，有的设计显现出传统的风格，而有的则更多地展现出现代化的韵味与气息。因此，只要掌握统一与变化之间的比例关系，就能达到统一中有变化，变化中显现出秩序感。

(二)色彩的平衡原则

网页的色彩在设计的过程中，特别要注重色彩间的平衡，即具体参与构成色彩组合的各种色彩、图形以及其他诸多的要素，在画面结构中力争达到一种力的均衡状态时所形成的色彩关系。色彩的平衡主要可分对称式平衡和均衡式平衡两种。
 
1.对称式平衡。

对称式色彩平衡是指以网页的轴线为中心，通过两侧色彩要素的并列重复处理，以达到和谐统一的效果，同时显现出静态特征的色彩关系。对称式平衡有绝对对称和相对对称之分。绝对对称指的是在中轴线两侧的色使得画面显得拘谨呆板、生硬机械，因此，恰当的处理是极其重要的。相 彩要素要完全一致，具有大方、安定的艺术情趣，但如果处理不当，则会对对称式平衡则是指在中轴线两侧的色彩要素基本一致即可，即只要在小部分的位置略作变化的对称平衡方法，利用对称的构图格式，采取变换内容的方式，来实现整个页面的相对对称。其实，不但在页面色彩的设计中相对对称的平衡设计非非常重要，而且在实际的生活中，这种设计也是经常用到的，例如，中国传统文化中的对联的设计，采用的就是这种对称模式，即上下联无论是字数、字体，还是字义都是相似或相对的。这样的处理模式体现了大统一、小变化的相对对称的色彩搭配原则。

2、均衡式平衡

均衡式平衡是指在网页色彩的设计上尽管没有采用中轴式的左右或上下的对称式平衡模式，但是在色彩的搭配上却能做到视觉和心理上的平衡关系，即通过对色彩各个造型要素的有机组合，以达到视重稳定的平衡表现形式。均衡式平衡相对于对称式平衡而言更加活泼，富有变化性，也更具运动感。设计师在做的过程中往往会借助色彩的色相、明度以及纯度的变化，尤其是借助设计师自身对色彩的心理感知，体验色彩本身的轻重、前进与后退、冷与曖等，通过合理的搭配实现色彩间的平衡。例如，在具体的设计过程中，即使是同样大小的黑白两个图形，黑色就显得重，而白色则显得轻，前者所占面积小，后者则所占的面积相对较大，因此，要平衡二者的视觉重力关系，就要缩小黑色或者放大白色，而要平衡二者的视觉大小关系，则要放大黑色或缩小白色。

总而言之，页面色彩设计的平衡是不能单纯依靠数字的计算就能解决或完成的，关键在于设计师的个人感受以及艺术修养，最主要的是设计师能否在自身的感受与用户的感受之间架起沟通的桥梁，即设计师所感受到的正是用户所感受到的，这样色彩设计的意图才算达到了。
 
(三)地纹色与图形色的有效搭配原则

地纹色与图形色间的搭配主要在平面的视觉环境中使用，图形是指面的视觉环境中，所描绘的画面形象，又称为正形。而除去正形以外的那些形象则被称为负形，俗称地纹。二者所拥有的色彩，分别称为图形色和地纹色。图形与地纹是对象与背景的关系，即二者是同时并置的关系一图形和地纹是会同时出现在网页中的，图形色和背景色同样如此。图形色与地纹色搭配是否合理与整个页面是否具有整体感，是否主题明确有着密切的关系。在具体设计的过程中，有一些需要注意的:例如，在要求图形感强烈的画面中，就应该将图形色和地纹色之间的对比要明显，可借助调节明度的中调和长调、色相的补色和对比关系、纯度的强对比关系等来实现。而一般在主题形态要求多变的色彩构成中，图形色就需要尽可能丰富一些，而地纹色则相对要单一一些。另外，在处理图形色的面积和地纹色的面积时，二者间的差距尽量要大，要么将图形色的面积放大，这样主色出现后就会显得层次分明；要么，将图形色放小，但可通过鲜艳的颜色来烘托，而将地纹色的亮度可相应降低一些，拉开二者间的差距。如果图形色和地纹色间的面积相当，或者色彩的亮度等方面旗鼓相当的话，很容易在二者间造成色彩的抗衡，这样会对主题的表达造成干扰。

(四)色彩的节奏与韵律有效结合的原则

节奏和韵律是运动过程中有秩序的连续。原本是指音乐表演中所采用的有规律的强弱、长短现象；而韵律则原指诗词中的平仄格式和押韵规则；在色彩的设计中节奏和韵律则用来描述色彩组合的状态，色彩间交替出现的有规律的强弱、长短现象，以及色彩间的对比与协调关系。节奏侧重于指同一因素的反复交替，是同一色彩要素连续重复时所产生的运动感；韵律则变化较多，犹如诗歌的押韵。节奏和韵律你中有我，我中有你，简单地说，节奏是一种简洁、鲜明的韵律，而韵律则是一种复杂、含蓄的节奏。在色彩设计中，节奏和韵律是通过色彩的光源、色相、明度、纯度以及利用人们对色彩的心理感觉(如色彩的冷暖、色彩的轻重以及色彩的前进和后退等)等的有机结合，使其呈现出一定的条理感和秩序感。
 
色彩的节奏

在进行色彩设计时，色彩的节奏大致可以分为三种类型:重复的节奏、渐变的节奏以及多元的节奏。
 
(一)重复的节奏

重复的节奏是指在色彩的设计中将某一个或者多个要素的变化与对比设计成一种固定的形式，并使得这种形式在网页的画面中重复出现，这样就形成了色彩不断重复出现的节奏感，从而给人一种丰富而有序、稳定而有规律的视觉效果。一般而言，重复的节奏可以分为两种:连续的重复和交替的重复。连续的重复是利用同一色相、明度或纯度的色彩，或者利用同一种颜色的形状、同一种颜色的面积以及同一种色肌理等色要素，根据需要连续呈现多次之后所获得的节奏感。这种反复可以是一个色彩要素，也可以是几个小的色彩要素组成的色彩单元，这种连续的重复会带给人们一种极富规律的秩序美。交替的重复和连续的重复相比，是将两个或两个以上独立的色彩要素依据方向、位置以及色调等交替重复出现所形成的节奏，相对复杂一些，并且其变化也要遵循一定的格式和规律，其变化更具多样性。重复的节奏有利于加强重复色彩在用户心目中的印象。

(二)渐渐变的节奏

新变的节奏的色彩设计是将色彩中的色相、明度、纯度以及色块的形状、面积等要素按照一定的秩序进行变化，例如按照等差或等级级数进进行变化，这种变化可以是从大到小、或从小到大，也可以是从强到弱，或从弱到强，更可以是由浅到深，或由深到浅……?从而形成一种逐渐过渡的节奏感。按等差级数变化所形成的节奏感一般缓慢而平滑，而按等级级数变化所形成的节奏感则一般跳跃性较强，渐变的意也更加浓烈，但比较容易让人产生单调之感。因此，在网页的设计中如果需要借用渐变的节奏来体现某一主题，可以根据需要灵活选择这两种渐变模式。
 
(三)多元的节奏

多元的节奏是指在色彩的设计中利用多种重复或渐变节奏组合而形成的节奏感。例如，有效利用色彩的冷暖、明明暗、形状等的起伏、方向强弱等的变化，这种变化会带给用户视觉上的较强的节奏感。这种节奏的变化相对比较复杂，是多种色彩要素共同作用的结果，不但层次丰富，而且形式复杂，色彩间的相百影向和配合更为明导。多元的节春的最大特点在于运动感强，给人生机勃勃之感，充满着个性。

(四)色彩的韵律

色彩的韵律是在节奏感之上获得的一种比节奏境界更高的、重复体现色彩设计师情感和思想的一种设计模式，这种韵律感一般会贯穿整个页面，通过设计师的精心设计，让用户明确体会到设计师的创作意图以及感受到设计师所要传到给自己的信息。因此，节奏是细节、是局部，而韵律则是整体、是全局。节奏为韵律服务，韵律引导节奏的表达。
 
(五)色彩的简单化原则

在有限的网页页面如果色彩太过于丰富，用户会感到一种无形的压力，感觉到纷乱无序，让人应接不暇，以至于有厌倦之感。因此，与其将众多的色彩色块组合起来，如果每个组成色块的质量，还还不如将这些色块加以简单化、统一化，反而会给用户更加强的视觉冲击力，也会留给用户更深的印象。在一个页面中，色彩尽管在给用户第一印象的传递中具有非常重要的作用，但是色彩终究是配角，因此，简单的色彩反而更具感染力，能使效果更集中、更强烈、更醒目，也更容易让人记忆。色彩的简单化可以通过尽量色彩的使用，以最单纯的色彩设计关系来体现色彩效果。

(六)色彩的凸显原则

如果说色彩的简单化是对色彩选择中过分选用色彩的限制的话，那么，色彩的凸显原则就是对色彩选择中过分单一化的一种限制，因此，是为了避免色彩过分单一，而采取某种色彩刺激手段，从而吸引用户的 色彩的简单化与凸显二者是相互制约的关系。具体来讲，色彩的凸显就关注和兴趣。例如，在网页的色彩设计中往往会采用黑与白、冷与暖、大与小、比例、形状以及面积之间的对比关系，以实现在整个页面中对这一部分的凸显，即可以在明亮的背景上用暗色的对作为凸显和强调在暖色的背景上选用冷色的对象作为凸显，在大面积的背景上用小面积的对象作为凸显和强调等。

(七)色彩的系统化原则

网站建设色彩设计应该遵循系统化的原则，色彩的系统化追求的是色间关联性，即页面多种色彩间如何做到相互呼应，做到“你中有我，我中有你”，要做到这一点的关键点在于色彩间要有共性。这样，页面总体的风格就很容易被用户感受到，用户也能感受到一种整体感，即便是页面中的某一色彩单元也能给人留下深刻的印象。

注意层次和舒适性

  一定要注意颜色的搭配过程中的层次性，这样才可以避免视觉效果太过压抑或者是严重的刺激性，同时也要保证在浏览网站时的舒适性，如果颜色搭配太多凌乱或者是颜色太过艳丽，会让访客感觉到非常压抑。

避免使用单色

  网站设计要避免采用单一的色彩，以免产生单调的感觉。网页设计不仅色彩要漂亮，还要考虑色彩搭配的合理性，给人一种和谐、愉快的感觉，纯度很高的单一色彩容易造成视觉疲劳。

色彩的独特性

  在网页设计的时候，要有不同的色彩搭配，网页在用色方面，要有自己的风格，这样才能给读者留下深刻的印象。

1.文章主题色调是要以冷色调为主还是要以暖色调为主
2.运用上要注重主次分明，切忌色彩覆盖文章内容，不能够让色彩“抢了主要信息的风头”
3.在颜色的排班上切忌过分夸张，过分统一，过分单调
4.要注重色彩的过渡，变化与比例
5.恰当利用多元色调，如渐变色，来使视觉得到色彩的刺激
6.任何一种彩色具备三个特征：色相，明度和纯度