网页设计中的色彩搭配原则

网页设计中色彩搭配的原则与技巧推荐度：
相关推荐

网页设计中的色彩搭配原则

　　色彩搭配既是一项技术性工作，同时它也是一项艺术性很强的工作，因此，设计者在设计网页时除了考虑网站本身的特点外，还要遵循一定的艺术规律，从而设计出色彩鲜明、性格独特的网站。下面小编为大家整理了网页设计中的色彩搭配原则，希望能帮到大家！

　　网页设计中的色彩搭配

　　自然界中有好多种色彩，比如玫瑰是红色的，大海是蓝色的，桔子是橙色的……但是最基本的有三种(红，黄，蓝)，其它的色彩都可以由这三种色彩调和而成。我们称这三种色彩为“三原色”。现实生活中的色彩可以分为彩色和非彩色。其中黑白灰属于非彩色系列。其它的色彩都属于彩色。任何一种彩色具备三个特征：色相，明度和纯度。其中非彩色只有明度属性。色相，指的是色彩的名称。这是色彩最基本的特征，是一种色彩区别于另一种色彩的最主要的因素。比如说紫色，绿色，黄色等等都代表了不同的色相。

　　明度，也叫亮度，指的是色彩的明暗程度。明度越大，色彩越亮，比如一些购物，儿童类网站，用的是亮丽的颜色，让人感觉绚烂多姿，生气勃勃;明度越低，颜色越暗，主要用于一些游戏类网站，充满神秘感;一些个人站长为了体现自身的个性，也可以运用一些暗色调来表达个人的一些孤僻，或者忧郁等性格。

　　纯度，指色彩的鲜艳程度，纯度高的色彩纯，鲜亮;纯度底的色彩暗淡，含灰色。

　　暖色，如黄色，橙色，红色，紫色等都属于暖色系列。暖色一般用于购物类网站用以体现商品的琳琅满目，用于儿童类网站表达活泼，温馨等效果。

　　冷色，如绿色，蓝色，蓝紫色等等都属于冷色系列。冷色一般应用于一些高科技，游戏类网站，主要表达严肃，稳重等效果。一个网站要想让人看上去舒适协调，除了文字、图片等内容的合理排版，恰当地进行色彩搭配是非常必要的。

　　色彩搭配既是一项技术性工作，同时它也是一项艺术性很强的工作，因此，设计者在设计网页时除了考虑网站本身的特点外，还要遵循一定的艺术规律，从而设计出色彩鲜明、性格独特的网站。

　　一个网站如果只运用一种颜色，会让人感觉单调，乏味;但是如果将所有的颜色都运用到网站中，就让人感觉轻浮，花哨。一个网站的用色必须要有自己独特的风格，这样才能显得个性鲜明，给浏览者留下深刻的印象。

　　网页设计虽然属于平面设计的范畴，但它又与其它平面设计不同，它在遵从艺术规律的同时，还考虑人的生理特点，色彩搭配一定要合理，给人一种和谐、愉快的感觉，避免采用纯度很高的单一色彩或者多种拼凑色彩，这样容易造成视觉疲劳。

　　通常认为一个页面尽量不要超过4种色彩，用太多的色彩让人感觉没有方向，没有侧重点。当主题色确定好，选择其它配色时，一定要考虑其它配色与主题色的关系，要体现什么样的效果。然后根据效果来决定哪种因素占主要地位，是明度，纯度还是色相。

　　尽管网页设计要避免采用单一色彩，以免产生单调的感觉，但可以通过调整色彩的饱和度和透明度使其产生变化，使网站“活”起来。

　　所谓相近色，就是色环中相邻近的颜色，例如绿色和蓝色，红色和黄色就互为相近色。采用相近色来设计网页可以使网页避免色彩杂乱，给人的视觉效果舒适、自然，易于达到页面的和谐统一。

　　互补色，是色环中相对的两种色彩。如红色跟绿色，蓝色和橙色等。合理使用互补色可以突出重点，产生强烈的视觉效果;在设计时一般以一种颜色为主色调，互补色作为点缀，从而起到画龙点睛的作用。

　　黑白灰是万能色，可以跟任意一种色彩搭配。当你为某种色彩的搭配苦恼的时候，不防试试用黑白灰。当你觉得两种色彩的搭配不协调，试试加入黑色，或者灰色，或许会有意想不到的效果。白色是网站用的最普遍的一种颜色。很多网站甚至留出大块的白色空间，作为网站的一个组成部分，这就是留白艺术。留白，给人一个遐想的空间，让人感觉心情舒畅;恰当的留白对于协调页面的均衡起到相当大的作用。

　　色彩的感染力是相当大的，世界上无所谓好看的色彩或不好看的色彩，只在乎设计师如何运用。大自然无形之手给我们展示一个色彩缤纷的世界，千变万化的色彩配搭令人着迷;同样，一个成功的色彩设计，它拥有生命力，可以感染观众情绪。为了网站的页面更美观，更舒适，更吸引他人，必须对色彩运用多作深入的了解和研究，合理恰当地运用与搭配页面各要素间的色彩。

　　网页设计中如何配色

　　有好多网页设计师都爱问这些问题，尤其是刚入行的新手，两个问题，一个配色，一个布局。

　　我希望大家不要从一开始就理解错误，一定记住，你是在做设计。行业和设计不冲突的。说这个配色，这个布局，这个标示就适合你们这个行业这类的话，我个人认为，只是说给普通客户听听罢了。脑子里时刻要有印象，你是做设计的，不是美工。但是百分之90的设计师，都变成美工了。社会需求吧。

　　首先，你要明白，大气不是大。布局的时候，分清主次，考虑一下用户的浏览习惯，考虑人的视觉焦点，规划一下整体感，比如logo ，banner和其他栏目这些要放的位置。

　　然后开始决定你的配色，你可以先用一些色块分布出来，然后你自己感觉一下，你的颜色科学不科学，能不能让大部分人接受。

　　网站的设计和平面的设计区别还是很大的，你做的时候要考虑到程序实现后的效果。

　　你可以先从这几个方面考虑。主色，布局，字体，对比。

　　头部简单，但是一定要注意细节，细节不是繁琐，切记不要为了细节而让细节的部分变的繁琐。

　　banner这个地方我个人认为就像是画龙点睛，这里能体现这个网站的主题内容，这里就要用到许多的平面设计能力。

　　做的时候要思路清晰，不要做一些没必要的东西，越做越繁琐。

　　你可以用到你学过的平面构成，立体构成，色彩构成等这些知识。

　　我建议做完以后，直接关机，不要去想，直接忘记，第二天打开，按照一个旁观者的角度，你在看一下。你就明白自己什么地方不足，或者什么地方好了。

　　具体的建议没有，就是一些方法，仅供你参考一下。

　　我觉得设计这个东西，根本没法教。能教的只是你如何去应用，设计还是要靠自己

　　(一)红色搭配：红色是非常容易吸引人注意力的颜色，能够给人以温暖热情的感觉，这是红色的优点，但是也有其致命的缺点，即容易引起视觉疲劳。红色在各种媒体中被广泛的运用，主要在于醒目且给人有活力、积极、热诚、温暖、积极向上的精神和形象。

　　红色的搭配主要是：(1)在红色中加入少量的黄，会使其热力强盛，趋于躁动和不安(2)在红色中加入少量的蓝，会使其热性减弱，更加文雅和柔和(3)在红中加入少量的白，会使其性格变的温柔，呈现含蓄、羞涩和娇嫩。

　　(二)黄色的色彩搭配：黄色通常呈现敏感和不安宁的视觉印象，这是它的缺点。但是黄色因有着金色的光芒，能够象征希望、权力和功名，还带有神秘的宗教色彩，有时候，黄色还能给人明亮、充满甜蜜和幸福感的感觉，很多设计师通常在作品中运用黄色来表现喜庆和华丽的感觉。

　　黄色的搭配主要是：

　　(1)在黄色中加入少量的蓝，呈现嫩绿色，去其高傲，成其平和、潮润的视觉效果

　　(2)在黄色中加入少量的红，呈现橙色，去其冷漠、高傲，成其分寸感极强的热情和温暖

　　(3)在黄色中加入少量的白，呈现柔和色彩，去其冷漠和高傲，成其含蓄、亲和。

　　(三)蓝色的色彩搭配：蓝色给人以冷漠，性格朴实而内向的感觉，但也呈现朴实、内向性格，可以为活跃、具有较强扩张力的色彩提供深远、广埔、平静的空间。此外，蓝色还可以淡化处理保持个性色彩，即便是在蓝色中分别加入少量的红、黄、黑、橙、白等色，均不会对蓝色的性格构成较明显的影响力。

　　蓝色的搭配主要是：

　　(1)蓝色中加入橙黄，将呈现甜美、亮丽和芳香

　　(2)蓝色中加入橙白，将凸显焦躁无力的橙色知觉。

　　(四)绿色的色彩搭配：绿色是黄蓝两色综合而成，将黄色的扩张感和蓝色的收缩感相中和，将黄色的温暖感与蓝色的寒冷感相抵消，因此，绿色是最平和、安稳、柔顺、恬静、潢足、优美的色彩。

　　绿色的搭配主要是：

　　(1)绿色中黄色较多时，呈现活泼、友善和幼稚的性格

　　(2)绿色中加入少量的黑，呈现庄重、老练和成熟

　　(3)在绿色中加入少量的白，呈现洁净、清爽和鲜嫩。

　　(五)紫色的色彩搭配。紫色在所有色彩中明度最低的一种颜色，这种低明度给人沉闷和神秘的感觉。

　　紫色的搭配主要是：

　　(1)在紫色中红的成份较多时，呈现压抑感和威胁感。

　　(2)紫色中加入白，可以去其沉闷的感官感受，呈现优雅、娇气，并充满女性的魅力。

　　(六)白色的色彩搭配。白色的色感光明，性格朴实、纯洁、快乐，又具有圣洁的不容侵犯的感觉，所以说如果在白色中加入其它任何色，都会影响其纯洁性，使其性格变的含蓄。

　　拓展：网页设计中用到的色彩对比

　　一个网页是由很多个不同元素构成的，这些元素的重要性都不同，有些元素需要特别突出、有些元素彼此之间存在着联系，而另外的元素之间则一点关联性都没有。如何去平衡元素中的等同和不同的元素特性，就显得特别重要，因为如果不能将这些元素在一个画面当中协调处理，这个画面便变得突兀。对比就是两个或更多个元素之间的不同。通过对比，设计师就可以创造出视觉趣味性，同时引导用户的注意力。

　　常见的对比有这么多的表现形式：

　　1) 色调上的明暗对比、冷暖对比等;

　　2) 形状上的大小对比、方圆对比、粗细对比、长短对比等;

　　3) 方向上的垂直对比、水平对比、倾斜对比等;

　　4) 数量上的疏密对比等;

　　5) 图片上的虚实对比、黑白对比等;

　　6) 事物的动静对比等。

　　对比的表现形式比较多，今天小编先来跟大家分享一下网页界面当中的——色彩对比。

　　不同的颜色可以表达不同的感受，颜色上的对比也有很多，这个跟色彩构成有很大的关系。颜色对比主要分色相对比、明度对比和纯度对比。

　　色相即各类颜色色彩的相貌称谓，任何黑白灰以外的颜色都有色相的属性。如朱红、普蓝、柠檬黄等。色相是色彩的首要特征，是区别各种不同色彩的最准确的标准。

　　明度指的就是色彩的亮度。比如：深黄、中黄、淡黄、柠檬黄等，这些黄颜色在明度上就不一样。颜色有深浅、明暗的变化，这些颜色在明暗、深浅上的不同变化，也就是色彩的明度变化。

　　纯度指的是色彩的鲜艳和深浅程度。纯度是色彩鲜艳度的判断标准，纯度最高的色彩就是原色，随着纯度的降低，色彩就会变暗、变淡。

　　一、色相对比。

　　两种以上色彩组合后，由于色相差别而形成的色彩对比效果称为色相对比。它是色彩对比的一个根本方面，其对比强弱程度取决于色相之间在色相环上的距离(角度)，距离(角度)越小对比越弱，反之则对比越强。

　　根据色相环可以看出色环上的颜色是多丰富多彩，随意抽取两个颜色，都能形成不一样的对比。因此色相对比又分很多，有补色对比、对比色对比、邻近色相对比等等。

　　1、互补色对比

　　在色相环的组成中，相隔 180 度的色彩我们称之为互补色：红与绿互补，黄与紫互补而蓝色与橙色互补。互补色的对比效果强烈、眩目、响亮、极有力，但也需要慎用，因为使用不当易产生幼稚、原始、粗俗、不安定、不协调等不良感觉。

　　2、邻近色相对比

　　邻近色对比好理解一些，好比黄色跟橙色可以称为邻近色，草绿和果绿也可称为邻近色。色相环上相邻的二至三色对比，色相距离大约30度左右，为弱对比类型。邻近色相对比效果感觉柔和、和谐、雅致、文静，但也会让人感觉单调、模糊、乏味、无力，所以必须调节明度差来加强效果。

　　3、对比色对比

　　色相对比距离约120度左右，为强对比类型，要比邻近色相对比鲜明、强烈、饱满。丰富，容易使人兴奋激动和造成视觉以及精神的疲劳。如黄绿与红紫色对比等，但是颜色之间协同统一的工作也比较难做。这种对比不容易单调，但一般需要采用多种调和手段来改善对比效果，不然就容易产生杂乱和过分刺激的效果。

　　4、零度对比

　　零度对比其实也分了几块，比如无彩色对比、无彩色与有彩色的对比、同种色相对比和无彩色与同种色相比四种，这块只要理解下无彩色的概念即可。

　　无彩色指的就是没有色相的颜色，前面小编说的颜色都有色相，但黑白灰这三种是没有色相的，所以也被称为无彩色。

　　无彩色对比：如黑与白、黑与灰、中灰与浅灰，或黑与白与灰、黑与深灰与浅灰等。

　　无彩色与有彩色的对比：如黑与黄、白与蓝等。

　　同种色相对：如蓝与浅蓝(蓝+白)色对比，橙与咖啡(橙+灰)或绿与粉绿(绿+白)与墨绿(绿+黑)色等对比。

　　无彩色与同种色相比：如白与深蓝与浅蓝、黑与桔与咖啡色等对比。

　　二、明暗对比。

　　两种以上色相组合后，由于明度不同而形成的色彩对比效果称为明度对比。它是色彩对比的一个重要方面，是决定色彩方案感觉明快、清晰、沉闷、柔和、强烈、朦胧与否的关键。

　　三、纯度对比。

　　纯度指的就是饱和度，柠檬黄的纯度是比较高的，当加入一点红色之后就变成橙色，因而柠檬黄和橙色就形成了纯度上的对比。两种以上色彩组合后，由于纯度不同而形成的色彩对比效果称为纯度对比。它是色彩对比的另一个重要方面，但因其较为隐蔽、内在，故易被忽略。在色彩设计中，纯度对比是决定色调感觉华丽、高雅、古朴、粗俗、含蓄与否的关键。

【网页设计中的色彩搭配原则】上海花千坊相关的文章：