网页中最佳颜色搭配.docx

网页中最佳颜色搭配.docx

《网页中最佳颜色搭配.docx》由会员分享，可在线阅读，更多相关《网页中最佳颜色搭配.docx（10页珍藏版）》请在冰豆网上搜索。

网页中最佳颜色搭配

网页中最佳颜色搭配

一、色彩处理　　

色彩是人的视觉最敏感的东西。

主页的色彩处理得好，可以锦上添花，达到事半功倍的效果。

色彩总的应用原则应该是“总体协调，局部对比”，也就是：

主页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。

在色彩的运用上，可以根据主页内容的需要，分别采用不同的主色调。

因为色彩具有象征性，例如：

嫩绿色、翠绿色、金黄色、灰褐色就可以分别象征着春、夏、秋、冬。

其次还有职业的标志色，例如：

军警的橄榄绿，医疗卫生的白色等。

色彩还具有明显的心理感觉，例如冷、暖的感觉，进、退的效果等。

另外，色彩还有民族性，各个民族由于环境、文化、传统等因素的影响，对于色彩的喜好也存在着较大的差异。

充分运用色彩的这些特性，可以使我们的主页具有深刻的艺术内涵，从而提升主页的文化品位。

下面介绍几种常用的配色方案：

1.暖色调。

即红色、橙色、黄色、赭色等色彩的搭配。

这种色调的运用，可使主页呈现温馨、和煦、热情的氛围。

2.冷色调。

即青色、绿色、紫色等色彩的搭配。

这种色调的运用，可使主页呈现宁静、清凉、高雅的氛围。

3.对比色调。

即把色性完全相反的色彩搭配在同一个空间里。

例如：

红与绿、黄与紫、橙与蓝等。

这种色彩的搭配，可以产生强烈的视觉效果，给人亮丽、鲜艳、喜庆的感觉。

当然，对比色调如果用得不好，会适得其反，产生俗气、刺眼的不良效果。

这就要把握“大调和，小对比”这一个重要原则，即总体的色调应该是统一和谐的，局部的地方可以有一些小的强烈对比。

最后，还要考虑主页底色（背景色）的深、浅，这里借用摄影中的一个术语，就是“高调”和“低调”。

底色浅的称为高调；底色深的称为低调。

底色深，文字的颜色就要浅，以深色的背景衬托浅色的内容（文字或图片）；反之，底色淡的，文字的颜色就要深些，以浅色的背景衬托深色的内容（文字或图片）。

这种深浅的变化在色彩学中称为“明度变化”。

有些主页，底色是黑的，但文字也选用了较深的色彩，由于色彩的明度比较接近，读者在阅览时，眼睛就会感觉很吃力，影响了阅读效果。

当然，色彩的明度也不能变化太大，否则屏幕上的亮度反差太强，同样也会使读者的眼睛受不了。

二、网页色彩的搭配　　

网页的色彩是树立网站形象的关键之一，色彩搭配却是网友们感到头疼的问题。

网页的背景，文字，图标，边框，超链接...，应该采用什么样的色彩，应该搭配什么色彩才能最好的表达出预想的内涵呢？

阿捷这里谈一些心得，希望对你有所启发。

首先我们先来了解一些色彩的基本知识：

1.颜色是因为光的折射而产生的。

2.红，黄，蓝是三原色，其它的色彩都可以用这三种色彩调和而成。

网页html语言中的色彩表达即是用这三种颜色的数值表示例如：

红色是color（255,0,0）十六进制的表示方法为（FF0000）白色为（FFFFFF）,我们经常看到的"bgColor=#FFFFFF"就是指背景色为白色。

3.颜色分非彩色和彩色两类。

非彩色是指黑，白，灰系统色。

彩色是指除了非彩色以外的所有色彩。

4.任何色彩都有饱和度和透明度的属性，属性的变化产生不同的色相，所以至少可以制作几百万种色彩。

　网页制作用彩色还是非彩色好呢？

根据专业的研究机构研究表明：

彩色的记忆效果是黑白的3.5倍。

也就是说，在一般情况下，彩色页面较完全黑白页面更加吸引人。

　我们通常的做法是：

主要内容文字用非彩色（黑色），边框，背景，图片用彩色。

这样页面整体不单调，看主要内容也不会眼花。

●非彩色的搭配　

　黑白是最基本和最简单的搭配，白字黑底，黑底白字都非常清晰明了。

灰色是万能色，可以和任何彩色搭配，也可以帮助两种对立的色彩和谐过渡。

如果你实在找不出合适的色彩，那么用灰色试试，效果绝对不会太差。

●彩色的搭配　　

色彩千变万化，彩色的搭配是我们研究的重点。

我们依然需要进一步学习一些色彩的知识。

一.色环。

我们将色彩按"红->黄->绿->蓝->红"依次过度渐变，就可以得到一个色彩环。

色环的两端是暖色和寒色，当中是中型色。

（如下图）

红.橙.橙黄.黄.黄绿.绿.青绿.蓝绿.蓝.蓝紫.紫.紫红.红

|___________||____||_________||_________|||||

暖色系中性系寒色系中性系

二.色彩的心理感觉。

不同的颜色会给浏览者不同的心理感受。

红色---是一种激奋的色彩。

刺激效果，能使人产生冲动，愤怒，热情，活力的感觉。

绿色---介于冷暖两中色彩的中间，显得和睦，宁静，健康，安全的感觉。

它和金黄，淡白搭配，可以产生优雅，舒适的气氛。

橙色---也是一种激奋的色彩，具有轻快，欢欣，热烈，温馨，时尚的效果。

黄色---具有快乐，希望，智慧和轻快的个性，它的明度最高。

蓝色---是最具凉爽，清新，专业的色彩。

它和白色混合，能体现柔顺，淡雅，浪漫的气氛（象天空的色彩:

）

白色---具有洁白，明快，纯真，清洁的感受。

黑色---具有深沉，神秘，寂静，悲哀，压抑的感受。

灰色---具有中庸，平凡，温和，谦让，中立和高雅的感觉。

每种色彩在饱和度，透明度上略微变化就会产生不同的感觉。

以绿色为例，黄绿色有青春，旺盛的视觉意境，而蓝绿色则显得幽宁，阴深。

●网页色彩搭配的原理

1.色彩的鲜明性。

网页的色彩要鲜艳，容易引人注目。

2.色彩的独特性。

要有与众不同的色彩，使得大家对你的印象强烈。

（参考设计思考第二篇网站CI的标准色彩一节）

3.色彩的合适性。

就是说色彩和你表达的内容气氛相适合。

如用粉色体现女性站点的柔性。

4.色彩的联想性。

不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，红色想到喜事等，选择色彩要和你网页的内涵相关联。

●网页色彩掌握的过程　

　随着网页制作经验的积累，我们用色有这样的一个趋势:

单色->五彩缤纷->标准色->单色。

一开始因为技术和知识缺乏，只能制作出简单的网页，色彩单一；在有一定基础和材料后，希望制作一个漂亮的网页，将自己收集的最好的图片，最满意色彩堆砌在页面上；但是时间一长，却发现色彩杂乱，没有个性和风格；第三次重新定位自己的网站，选择好切合自己的色彩，推出的站点往往比较成功；当最后设计理念和技术达到顶峰时，则又返朴归真，用单一色彩甚至非彩色就可以设计出简洁精美的站点。

○网页色彩搭配的技巧　

　文章写到这里，有心急的网友要问了：

“到底用什么色彩搭配好看呢？

你能不能推荐几种配色方案？

”别急，这里有一点技巧，可以帮助你迅速成为调色大师:

）

1.用一种色彩。

这里是指先选定一种色彩，然后调整透明度或者饱和度，（说得通俗些就是将色彩变淡或则加深），产生新的色彩，用于网页。

这样的页面看起来色彩统一，有层次感。

2.用两种色彩。

先选定一种色彩，然后选择它的对比色（在photoshop里按ctrl+shift+I）。

我的主页用蓝色和黄色就是这样确定的。

整个页面色彩丰富但不花稍。

3.用一个色系。

简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。

确定色彩的方法各人不同，我是在photoshop里按前景色方框，在跳出的拾色器窗中选择"自定义"，然后在"色库"中选就可以了:

）

4.用黑色和一种彩色。

比如大红的字体配黑色的边框感觉很"跳"。

在网页配色中，忌讳的是：

1.不要将所有颜色都用到，尽量控制在三种色彩以内。

2.背景和前文的对比尽量要大，（绝对不要用花纹繁复的图案作背景），以便突出主要文字内容

网页颜色怎么搭配（网页颜色搭配技巧）网页颜色搭配表（网页设计颜色搭配）

对于做网页的初学者可能更习惯于使用一些漂亮的图片作为自己网页的背景，但是，浏览一下大型的商业网站，你会发现他们更多运用的是白色、蓝色、黄色等，使得网页显得典雅，大方和温馨。

更重要的是，这样可以大大加快浏览者打开网页的速度。

　　一般来说，网页的背景色应该柔和一些、素一些、淡一些，再配上深色的文字，使人看起来自然、舒畅。

而为了追求醒目的视觉效果，可以为标题使用较深的颜色。

下面是我做网页和浏览别人的网页时，对网页背景色和文字色彩搭配积累的经验，这些颜色可以做正文的底色，也可以做标题的底色，再搭配不同的字体，一定会有不错的效果，希望对大家在制作网页时有用。

BgcolorΚ″#F1FAFA″———做正文的背景色好，淡雅

BgcolorΚ″#E8FFE8″———做标题的背景色较好

BgcolorΚ″#E8E8FF″———做正文的背景色较好，文字颜色配黑色

BgcolorΚ″#8080C0″———上配黄色白色文字较好

BgcolorΚ″#E8D098″———上配浅蓝色或蓝色文字较好

BgcolorΚ″#EFEFDA″———上配浅蓝色或红色文字较好

BgcolorΚ″#F2F1D7″———配黑色文字素雅，如果是红色则显得醒目

BgcolorΚ″#336699″———配白色文字好看些

BgcolorΚ″#6699CC″———配白色文字好看些，可以做标题

BgcolorΚ″#66CCCC″———配白色文字好看些，可以做标题

BgcolorΚ″#B45B3E″———配白色文字好看些，可以做标题

BgcolorΚ″#479AC7″———配白色文字好看些，可以做标题

BgcolorΚ″#00B271″———配白色文字好看些，可以做标题

BgcolorΚ″#FBFBEA″———配黑色文字比较好看，一般作为正文

BgcolorΚ″#D5F3F4″———配黑色文字比较好看，一般作为正文

BgcolorΚ″#D7FFF0″———配黑色文字比较好看，一般作为正文

BgcolorΚ″#F0DAD2″———配黑色文字比较好看，一般作为正文

BgcolorΚ″#DDF3FF″———配黑色文字比较好看，一般作为正文

　　浅绿色底配黑色文字，或白色底配蓝色文字都很醒目，但前者突出背景，后者突出文字。

红色底配白色文字，比较深的底色配黄色文字显得非常有效果。

　　此文只是起一个“抛砖引玉”的作用，大家可以发挥想象力，搭配出更有新意、更醒目的颜色，使网页更具有吸引力

==================

　　如今，互联网越来越走近我们的生活，网上冲浪也渐渐成为我们生活不可缺少的一部分。

网络世界五彩缤纷，涌现出大量优秀精美的网页。

大量网络信息的呈现，无非就是通过文本、图像、Flash动画等，其中，文本是网页中最为重要的设计元素。

对于网页设计初学者而言，了解和掌握网页设计中的文字排版设计就显得尤为重要，下面笔者想谈谈一己之见。

文字的格式化

字号、字体、行距

　　字号大小可以用不同的方式来计算，例如磅#quotel.quoter#或像素（Pixel）。

因为以像素技术为基础单位打印时需要转换为磅，所以，建议采用磅为单位。

　　最适合于网页正文显示的字体大小为12磅左右，现在很多的综合性站点，由于在一个页面中需要安排的内容较多，通常采用9磅的字号。

较大的字体可用于标题或其他需要强调的地方，小一些的字体可以用于页脚和辅助信息。

需要注意的是，小字号容易产生整体感和精致感，但可读性较差。

　　网页设计者可以用字体来更充分地体现设计中要表达的情感。

字体选择是一种感性、直观的行为。

但是，无论选择什么字体，都要依据网页的总体设想和浏览者的需要。

例如：

粗体字强壮有力，有男性特点，适合机械、建筑业等内容；细体字高雅细致，有女性特点，更适合服装、化妆品、食品等行业的内容。

在同一页面中，字体种类少，版面雅致，有稳定感；字体种类多，则版面活跃，丰富多彩。

关键是如何根据页面内容来掌握这个比例关系。

　　从加强平台无关性的角度来考虑，正文内容最好采用缺省