网页色彩的搭配.docx

1、网页色彩的搭配网页色彩的搭配 （专用教材）网页的色彩是树立网站形象的关键之一，色彩搭配却是网友们感到头疼的问题。网页的背景，文字，图标，边框，超链接.，应该采用什么样的色彩，应该搭配什么色彩才能最好的表达出预想的内涵呢？阿捷这里谈一些心得，希望对你有所启发。 首先我们先来了解一些色彩的基本知识：1、颜色是因为光的折射而产生的。2、红，黄，蓝是三原色，其它的色彩都可以用这三种色彩调和而成。网页html语言中的色彩表达即是用这三种颜色的数值表示例如：红色是color (255,0,0)十六进制的表示方法为(FF0000)白色为(FFFFFF), 我们经常看到的bgColor=#FFFFFF就是指背

2、景色为白色。 3、颜色分非彩色和彩色两类。非彩色是指黑，白，灰系统色。彩色是指除了非彩色以外的所有色彩。 4、任何色彩都有饱和度和透明度的属性，属性的变化产生不同的色相，所以至少可以制作几百万种色彩。网页制作用彩色还是非彩色好呢？根据专业的研究机构研究表明：彩色的记忆效果是黑白的3.5倍。也就是说，在一般情况下，彩色页面较完全黑白页面更加吸引人。我们通常的做法是：主要内容文字用非彩色(黑色)，边框，背景，图片用彩色。这样页面整体不单调，看主要内容也不会眼花。 非彩色的搭配 黑白是最基本和最简单的搭配，白字黑底，黑底白字都非常清晰明了。 灰色是万能色，可以和任何彩色搭配，也可以帮助两种对立的色彩

3、和谐过渡。如果你实在找不出合适的色彩，那么用灰色试试，效果绝对不会太差。 彩色的搭配 色彩千变万化，彩色的搭配是我们研究的重点。我们依然需要进一步学习一些色彩的知识。 一、色环。我们将色彩按红-黄-绿-蓝-红依次过度渐变，就可以得到一个色彩环。色环的两端是暖色和寒色，当中是中型色。 红.橙.橙黄.黄.黄绿.绿.青绿.蓝绿.蓝.蓝紫.紫.紫红.红 . 暖色系. 中性系. 寒色系. 中性系 二、色彩的心理感觉。不同的颜色会给浏览者不同的心理感受。 红色-是一种激奋的色彩。刺激效果，能使人产生冲动，愤怒，热情，活力的感觉。 绿色-介于冷暖两中色彩的中间，显得和睦，宁静，健康，安全的感觉。 它和金黄，

4、淡白搭配，可以产生优雅，舒适的气氛。 橙色-也是一种激奋的色彩，具有轻快，欢欣，热烈，温馨，时尚的效果。 黄色-具有快乐，希望，智慧和轻快的个性，它的明度最高。 蓝色-是最具凉爽，清新，专业的色彩。它和白色混合，能体现柔顺，淡雅，浪漫的气氛(象天空的色彩:) 白色-具有洁白，明快，纯真，清洁的感受。 黑色-具有深沉，神秘，寂静，悲哀，压抑的感受。 灰色-具有中庸，平凡，温和，谦让，中立和高雅的感觉。 每种色彩在饱和度，透明度上略微变化就会产生不同的感觉。以绿色为例，黄绿色有青春，旺盛的视觉意境，而蓝绿色则显得幽宁，阴深。网页色彩搭配的原理 1、色彩的鲜明性。网页的色彩要鲜艳，容易引人注目。2、

5、色彩的独特性。要有与众不同的色彩，使得大家对你的印象强烈。(参考设计思考第二篇网站CI的标准色彩一节) 3、色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。 4、色彩的联想性。不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，红色想到喜事等，选择色彩要和你网页的内涵相关联。网页色彩掌握的过程 随着网页制作经验的积累，我们用色有这样的一个趋势:单色-五彩缤纷-标准色-单色。一开始因为技术和知识缺乏，只能制作出简单的网页，色彩单一；在有一定基础和材料后，希望制作一个漂亮的网页，将自己收集的最好的图片，最满意色彩堆砌在页面上；但是时间一长，却发现色彩杂乱，没有个性和

6、风格；第三次重新定位自己的网站，选择好切合自己的色彩，推出的站点往往比较成功；当最后设计理念和技术达到顶峰时，则又返朴归真，用单一色彩甚至非彩色就可以设计出简洁精美的站点。网页色彩搭配的技巧 文章写到这里，有心急的网友要问了：“到底用什么色彩搭配好看呢？你能不能推荐几种配色方案？”别急，这里有一点技巧，可以帮助你迅速成为调色大师 1、用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，(说得通俗些就是将 色彩变淡或则加深)，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。2、用两种色彩。先选定一种色彩，然后选择它的对比色(在photoshop里按ctrl+shift+I)

7、。我的主页用蓝色和黄色就是这样确定的。整个页面色彩丰富但不花稍。3、用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。确定色彩的方法各人不同，我是在photoshop里按前景色方框，在跳出的拾色器窗中选择自定义，然后在色库中选就可以了。4、用黑色和一种彩色。比如大红的字体配黑色的边框感觉很跳。 在网页配色中，忌讳的是： 1.不要将所有颜色都用到，尽量控制在三种色彩以内。 2.背景和前文的对比尽量要大，(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。几种典型配色方案图例显示网站配色奥秘大公开曾经费尽心思想替网站设计一套令人眼睛为之一亮的色彩组合吗？或

8、者你一直不解为何银行、公司行号或金融机构的网站总是使用蓝色系？那么你来对地方了。虽然大部分的网站开发人员都很清楚网络所使用的色盘和计算色彩的 16 进位系统，但对色彩学和有效色彩组合背后所隐含的原理依然懵懵懂懂。几世纪以来，颜色本身就是一个难解的谜题。举例子来说，苏格拉底就曾经假设说火之源起，乃是因眼睛结合了对象本身的白(whiteness)所产生的颜色。之后，牛顿更探索光与色彩之间的关系；其后历经许多科学研究，终于在20世纪确认了光波与色彩感应之间的绝对关系。如今，色彩调和与色彩调性方面的研究信息，直接影响了艺术家、设计师和广告AE人员。本篇关于色彩理论的指南，旨在探索如何于网站上有效使用色

9、彩，同时也提供了许多色彩调和技巧，让您善用色彩来驾驭网站设计。 色彩学我们能看到颜色是靠三个元素相互作用而成：光源、物体的反射特性、以及人体视网膜和脑部视觉皮质区对光波的处理方式。不管我们使用哪种媒材来作业 - 绘画、印刷或网络 - 我们都得依赖上述过程才能有效使用颜色。色彩的排列 - 彩虹十七世纪末期，牛顿证明了色彩并非存在于物体本身，而是光作用的结果，且只要将可视光谱上的长短光波结合起来即可形成白光。这些可视光的波长可对应到七个不同的颜色：红、橙、黄、绿、蓝、靛、紫。牛顿在实验中所分离出来的可视光谱其实才占了所有电磁光谱的一小部分，整个光谱范围从分为短频、长波区（例如收音机调频）到高频、短

10、波区（例如 X 光）。可视光谱的区域是介于红外线与紫外线之间，波长约为 400nm (紫色) 到 700nm (红色) 之间。虽然牛顿证明这些光波结合在一起即形成白光，但其实只需要红、绿、蓝三光波就可以产生白光。光的吸收与反射当光波投射在物体身上后，该物质会传送、吸收或反射不同部分的光波。根据不同物体的特性以及它本身的原子构造，它可能反射了绿光但吸收了其它的波长。这时候人们的视网膜和脑部视觉皮质区会处理此一反射光，然后形成我们所看到的颜色。艺术家和设计师将颜色复制到画布或纸张上的时候，他们便是仿真此一过程，利用颜料吸收了某个部分的光波、反射出其它光波。例如要产生绿色，我们可使用会吸收红、蓝光波

11、的颜料即可。此一过程是所有绘画与印刷媒体的色彩模式基础。一切靠眼睛当然，不论是反射自物体或是发射自光源本身，我们处理光波的能力都是靠视网膜和脑部的视觉皮质区。视网膜内有三个接收器（或者说是锥细胞）可响应某些光波的频率。红色锥细胞能感应低频率的波长，绿色锥细胞反应的是中频率的波长，蓝色锥细胞反应的是高频率的波长。这些锥细胞的运作并非二元性的，而是类似频道一样，可将刺激分别传达至脑部的视觉皮质区，经过处理后才产生出我们所看到的颜色。为了产出特定颜色，艺术家/设计师们必须靠着增减光波的方式，让人体内的视觉接收器只反应到某些光波。至于应该用加法或减法原理，则要看你使用何种材质来表现你的作品了。色彩模式

12、与色彩管理设计师处理颜色的方法通常有两种：一、加色法，混合不同颜色的光波以形成白光；二、减色法，使用颜料来减少光波。传统的艺术家所使用的色盘和 CMYK 系统都是减色法模式。在网站上，我们所面对的是光的投射，而不是从物体上反射回来的光，所以使用的是加色法模式，我们称它为RGB。加色法在大自然中，我们所看到的光波是经过物体反射进入我们的视网膜，但产生色彩的方式不仅只这一种。例如，舞台灯光是利用白光穿过有色滤镜来产生不同的色光。计算机屏幕也是使用投射光波的方式，但不同的是它藉由让电子光枪发光投射到含磷的屏幕来产生色光。这些电子光枪可以发出三种颜色：红、绿、蓝。藉由这三种色光，计算机屏幕可制作出完整

13、的光谱。这就是大家所熟知的 RGB 色系。在 RGB 系统中，设计师也可以透过混合三原色的方式做出一个光谱。混合任两个原色，就会产生三个次原色：青、洋红、黄。如前面所说的，将光的三原色加在一起就可以做出白光。所以，如果一个 RGB 的值为 255,255,255 则表示为白色。如果完全拿掉这三原色的光 (RGB: 0,0,0) 则产生黑色。减色法RGB 模式的相反模式就是 CMYK 模式，也就是使用减少光波的方式来产生颜色。由于物体颜色来自于反射的光波，此一系统乃使用三原色来吸收物体的红、绿或蓝光。例如，如果你减少了红光，那么多余的绿色波和蓝色波就会产生青色。用来除去红光、反射绿、蓝光的颜料就

14、会显示青色。相同的，平面印刷设计师会使用洋红来吸收掉一部份的绿光，以及使用黄光来吸收掉一部份的蓝光。这样一来，我们很明显的可以知道 CYMK 模式中所使用的三原色就是 RGB 模式中的次颜色，反之亦同。再者，如果将红、绿、蓝光混合在一起形成白光，那么就表示将青、洋红、黄三色的颜料混合在一起就会产生黑色，因为三原色的光波都将被颜料所吸收了。然而受限于颜料和印刷系统的因素，混合青、洋红、黄并无法完全吸收掉所有的光波。因此实际上还必须加上一个黑色才能完成，所以就产生了 CMYK 里面的 K 元素了。色彩管理由于有这两套不同的复制颜色方式，设计师若必须同时创作数字与印刷影像可就伤脑筋了。除了对应加色法

15、和减色法之间的困难外，RGB 和 CMYK可使用的色彩范围差异也相当大。因此对跨媒体设计师而言，拥有一套可根据输出设备做色系转换的色彩管理系统可减轻不少头痛问题。色彩管理系统可包含在操作系统，某些应用软件之中。色彩调和 视觉设计最大的挑战之一便是找出有效的调和色彩，让色系既不过于单调，也不过于夸大。想了解色彩平衡之间的关系，可从了解色环开始着手。色环呈现出某一色彩模式中所有可能的色相每个色彩模式都包含了一组三原色，然后经由这一组三原色的相互混合而产生不同的颜色。在传统色彩学中，三原色指的是蓝、红、黄；而在 RGB 色彩模式中，色光的三原色是指红、绿、蓝。任何两个色光的组合会产生一组次颜色。三次

16、色则是混合了原色与次色，或者是混合两种次原色所产生。我们用色环来呈现颜色的逻辑性。你可以从下面的图中看出， RGB 的色环和传统艺术家们所使用的色环是很不一样的。同色调和：单一颜色，只是深浅、色调和明暗度不同。近似色调和：使用邻近的颜色或在色环上很接近的颜色做调和。互补色调和：使用色环上两个相对的颜色做调和。这样的颜色组合通常可以提供最大程度的对比感觉，但若过份使用使会流于夸大。对比色调和：使用一种颜色，再加上其互补色旁边的两个颜色做调和。对比色调和能提供比互补色调和较柔和的对比。 三角调和：使用色环上三个等距离颜色。双互补调和：使用两组 (共四色) 互补颜色。在探索色彩调和的时候，通常最好从

17、纯色下手，然后再尝试不同程度的渲染、色调和明暗度。接着你可使用网站仿真图先行测试某颜色组合的视觉特效。记得，对比的重要性不只是在于为了吸引人而设计；它也可能帮助或妨碍网站的阅读性。色彩所传达的意义 当我们在检视色彩的科学本质和色彩调和的美学考量时，我们发现感官在色彩运用上扮演了很重要的角色。除了感官反应与辨识调和色彩外，人类内在对色彩的反应还有更深层的一面。色彩能引发强烈的生理/心理共鸣，不管是正面或负面。当你在选定颜色组合时，请确定你所选择的颜色能引起适当的回响。 色彩的生理反应 虽然并没有直接证据显示色彩能引发特定反应，但是研究显示，某些颜色确实能够引起一些生理上的反应。例如，红色就是一种

18、非常刺激的颜色，往往会令人心跳加快、呼吸急促。所以，红色非常适合用在需要引起注意和强调的时候，但若用在背景颜色的时候可能显得过于强烈。相同地，黄色也能引起注意，但因为其反射性太强，容易造成眼睛的疲劳和不舒服。另外一方面，蓝色对神经系统具有放松的效果，且根据一些研究显示，以蓝色当背景还能增加生产力。但是，如果你的产品与食物有关，千万不要用蓝色作为背景颜色，因为蓝色可是会抑制人们的胃口喔。 色彩的象征 色彩所象征的意义有时候跟大自然中的事物有关。例如，天空与太阳的颜色所产生的联想举世接然。然而，大部分的色彩意义都跟民族文化有关，例如，政治、宗教、神话或社会结构等 - 这些因素可能会随着时间与地域的

19、不同而产生差异。若你设计的网站是针对国外地区，那你可千万得小心，同一颜色在不同文化可能会有南辕北辙的效果。另外，大部分的颜色都同时具有正面和负面的联想。你可以运用色彩的质量和饱和度的不同，或者是用混合两个颜色的方式来强调某个特别的涵义。 一般在西方的文化中，色彩所传达的涵义为： 红色：热情、浪漫、火焰、暴力、侵略。红色在很多文化中代表的是停止的讯号，用于警告或禁止一些动作。 紫色：创造、谜、忠诚、神秘、稀有。紫色在某些文化中与死亡有关。 蓝色：忠诚、安全、保守、宁静、冷漠、悲伤。 绿色：自然、稳定、成长、忌妒。在北美文化中，绿色代表的是行，与环保意识有关，也经常被连结到有关财政方面的事物。 黄

20、色：明亮、光辉、疾病、懦弱。 黑色：能力、精致、现代感、死亡、病态、邪恶。 白色：纯洁、天真、洁净、真理、和平、冷淡、贫乏。白色在中华文化中也代表着死亡的颜色。 选择最恰当的色彩组合 替网站选对颜色可不是一件容易的事；很多公司还特别聘请专业咨询人员，使其色彩组合能搭配、强化整体的品牌形象。但是，如果你自己就已经具有色彩调和感，并且了解某些颜色可能会引起什么样的反应，你只需照着你的方法进行，开发出有效的色彩组合。在你开始找寻对应的颜色之前，你必须先很清楚你网站所要传达的讯息和目标。一但你了解要传达的讯息后，就可开始进行调色工作了。在过程中，你免不了要不断地试验混合颜色，这是一个极具创意的过程。别

21、害怕使用大胆的颜色组合，但在将你的产品公诸于世之前，记得要经过充分的测试喔！ 色彩的使用技巧与指针 1. 了解你的网站所要传达的讯息和品牌。选择可以加强这些讯息的颜色。例如，如果在设计一个强调稳健的金融机构，那么就要选择冷色系、柔和的颜色，像是蓝、灰或绿。在这样的状况下，如果使用暖色系或活泼的颜色，可能会破坏了该网站品牌。 2. 了解你的读者群。文化差异可能会使色彩产生非预期的反应。同时，不同地区与不同年龄层对颜色的反应亦会有所不同。年轻族群一般比较喜欢饱和色，但这样的颜色却引不起高年龄层的兴趣。 3. 不要使用过多的颜色。除了黑色和白色以外，约选择四到五个颜色就够了。太多的颜色会导致混淆，也

22、会拉走读者的注意力。 4. 在阅读的部分使用对比色。颜色太接近无法产生足够的对比效果，也会妨碍观众阅读。白底黑字的阅读效果最好。 5. 用灰阶来测试对比。当你在处理黑色、白色和灰色以外的颜色的时候，有时候会很难决定每个颜色的相对值。为了要确认你的色盘能提供足够的对比，你可以建立一个仿真网站，并将它转换成灰阶即可。 6. 选择颜色要注意时效性。同一个色彩很容易就充斥着整个市场，且消费者很快的就对流行色彩感到麻木。但就另外一个角度来看，你可以使用几十年前的流行色彩，引起人们的怀旧之情。 7. 选择色盘时请考虑功能性的颜色。别忘了将关键信息部分建立功能性的颜色，例如标题和超级链接等。 8. 注意网站

23、色差问题。每一个网站开发人员都知道，即使是网络通用颜色在跨平台显示的时候都会有些不同。记得要校正你的 gamma 值，并在不同的作业平台上测试你的色盘。网页设计中的色彩比例这次我们将深入进去了解一下众多色彩在一起之后所存在的“比例”关系。我们在使用色彩的时候不可能把所有的色彩都做得一样大小，当然如果你是在排色谱，那是例外。我们在设计网页或是平面作品时我们大多会想好用什么色彩为主色，并找到相关的色彩为辅色。但是往往到实际工作的时候就主辅不分了，也不清楚什么是主什么是辅。结出做出来的东西，色彩杂乱，没有主次！学习设计的人都想做出好东西，但是往往却事与愿违，从手下出来的作品总是不能达到自己的要求。其

24、中对色彩比例的取舍上总是犹豫不决，结果往往是做出错误的判断。到底我们要怎么做才能做出漂亮的色彩呢。从比例的安排上可以帮助我们得到部分答案！下面看图：以下是一外国网站的截图，这个网站用的色彩不多，白色，黑色，橙红色。不用我说大家都知道什么色彩最多，什么彩色最少！白色最多，黑色其次，橙红色最少，但是大家有没有发现一个问题，最醒目的不是黑白色，而是橙红色。这至少证明了：色彩多并不一定醒目，色彩少反应容易吸引注意力。另也是因为黑白色都是无彩色，所以橙红就会显得更加的鲜艳。大家注意到了，这里的比例目测大约是白70%，黑22%，橙8%这里我们得到一个结论：越是鲜艳的色彩越是少用，所占的比例一定要少一点！那

25、什么样的色彩比较要大一点呢？我们可以看一上图与下面的图片，大家一定会有一个比较感性的认识。亚光色、无彩色的比例要战占得多一点。高亮色是不适合大面积出现的而高亮色最好是以很少的比例出现。网页文字颜色的搭配技巧对于做网页的初学者可能更习惯于使用一些漂亮的图片作为自己网页的背景，但是，浏览一下大型的商业网站，你会发现他们更多运用的是白色、蓝色、黄色等，使得网页显得典雅，大方和温馨。更重要的是，这样可以大大加快浏览者打开网页的速度。一般来说，网页的背景色应该柔和一些、素一些、淡一些，再配上深色的文字，使人看起来自然、舒畅。而为了追求醒目的视觉效果，可以为标题使用较深的颜色。下面是我做网页和浏览别人的网

26、页时，对网页背景色和文字色彩搭配积累的经验，这些颜色可以做正文的底色，也可以做标题的底色，再搭配不同的字体，一定会有不错的效果，希望对大家在制作网页时有用。BgcolorF1FAFA做正文的背景色好，淡雅BgcolorE8FFE8做标题的背景色较好BgcolorE8E8FF做正文的背景色较好，文字颜色配黑色Bgcolor8080C0上配黄色白色文字较好BgcolorE8D098上配浅蓝色或蓝色文字较好BgcolorEFEFDA上配浅蓝色或红色文字较好BgcolorF2F1D7配黑色文字素雅，如果是红色则显得醒目Bgcolor336699配白色文字好看些Bgcolor6699CC配白色文字好看些

27、，可以做标题Bgcolor66CCCC配白色文字好看些，可以做标题BgcolorB45B3E配白色文字好看些，可以做标题Bgcolor479AC7配白色文字好看些，可以做标题Bgcolor00B271配白色文字好看些，可以做标题BgcolorFBFBEA配黑色文字比较好看，一般作为正文BgcolorD5F3F4配黑色文字比较好看，一般作为正文BgcolorD7FFF0配黑色文字比较好看，一般作为正文BgcolorF0DAD2配黑色文字比较好看，一般作为正文BgcolorDDF3FF配黑色文字比较好看，一般作为正文浅绿色底配黑色文字，或白色底配蓝色文字都很醒目，但前者突出背景，后者突出文字。红色

28、底配白色文字，比较深的底色配黄色文字显得非常有效果。关于图片背景的研究在网页中，有一个好的背景往往能产生很特别的效果。但无缝的网页背景的制作，却着实让我费了不少脑筋，因为初始时，由于计算错误，背景总是不能很好的接合在一起，直到今天我在研究斜线背景才领悟了其中的道理。让我们来看看下面的斜线图片：图一：这是一个斜线背景，通过它可以得到非常漂亮的斜线背景。如下。要随意做出这样的斜线有什么窍门呢，通过我的观察，我发现了利用补充法可以的到很好的无缝背景。让我简单来做个说明：1、首先画出你想要的背景，然后开始定义文档，我做了两个实验都是10x10个象素，因为这样计算起来要简单的多。2、然后我开始画出一部分

29、斜线，我的想法是3个象素宽的斜线，间隔7个象素宽，现在我从文档的定部开始布局，为了方便布局和计算简单，我把网格打开，并设置它的间距和子网格为1个象素，接着我又设置矩形选框工具的样式为固定大小：1x1个象素，这样最上边的斜线很快就出来了。如下图：3、接下来要间格7个象素画另一条斜线了。这就是我们要做的关键了，要是我们只是简单的数够7个象素，然后开始画另一条斜线的话，我们会得到非常糟糕的结果。就是图片拼接错误。原因在什么呢？4、让我用详细的图片来说明如何画另一条斜线。如图：为了能清楚的看明白如何补充，我将原来的背景(10x10象素大小)填充成浅灰，并将画板扩展成17x17个象素的大小。现在在画板上

30、，红色的是表示黑色斜线应该连接的图案，为了补充连续背景缺少的元素，我们将红色的部分移动到右边来，也就是代表我们补充元素的灰色色块。只要定义好了开头，后面的象素就很好补充了。按照上面的思路，我又做了第二个实验，同样是10x10个象素的画板，看下图：效果图如下：按照我上面说的，我只画出了一部分我想要的背景，然后用补充法，完成了这个作品。如果大家还有兴趣，可以试着做其他的背景图片试试，会非常有趣的十种基本的配色设计颜色绝不会单独存在。事实上，一个颜色的效果是由多种因素来决定的：反射的光，周边搭配的色彩，或是观看者的欣赏角度。 有十种基本的配色设计，分别叫做：无色设计(achromatic)、类比设计(analogous)、冲突设计(clash)、互补设计(complement)、单色设计(monochromatic)、中性设计(neutral)、分裂补色设计(splitcomplement)、原色设计(primary)、二次色设计(secondary)以及三次色三色设计(tertiary)。1.无色设计：不用彩色，只用黑、白、灰色。2.冲突设计：把一个颜色和它补色左边或右边的色彩配合起来。3.单色设计：把一个颜色和任一个或它所有的明、暗色配合起来。4.分裂补色设计：把一个颜色和它补色任一边的颜色组合起来。5.二次色设计：把二次色绿、紫、橙