第2章 网页配色知识基础
网页设计——配色技巧
网页设计调色技巧
1、非色彩指的是黑色，白色和各种深浅不一的灰色。
2、亮度值范围是0~240，黄金分割比例是0.618，亮度值的黄金分割点是240*0.618=148.
底色亮度在0~92之间，那么它的对比色亮度值在底色亮度值加上148，只要保证这个亮度值不变，色相和饱和度可以任意调节，但为了保证色调统一，最好用同一色相的颜色。
Y=x+148(0=<x<=92),y代表对比色亮度值，x代表底色亮度值
如果底色亮度值在148~240之间，那么对比色亮度值就是底色亮度值减去148。
Y=x-148(148=<x<=240),y代表对比色亮度值，x代表底色亮度值
不要用底色亮度值在92~147之间的颜色作大面积背景色，因为那样会比较刺眼。
3、不要将所有颜色都用到，尽量控制在三种色彩以内，背景和前文的对比要大，绝对不要用花纹繁复的图案做背景，以便突出主要文字。
4、用同一种色彩这里指选定一种色彩然后调整透明度或者饱和度，将色彩变淡或加深，产生新的色彩，这样看起来色彩统一有层次感，通常选定一个主色调，在这个基础上调出深浅不一的色彩。
配出同一种色彩的方法：保证色调饱和度不变调节亮度值。
同一色系配色要领：只要保证亮度不变，色相可以任意调节，这样可以调出同一种感觉的色彩。
另外可以在调好的色彩中可以任意挑两种做渐变颜色，这样看起来立体感质感会很强，渐变颜色切记不要两个色系的颜色作渐变，如红色和绿色，蓝色和红色等。
[电脑基础知识]网页设计配色
![[电脑基础知识]网页设计配色](https://img.taocdn.com/s3/m/c0ffd640f90f76c661371ad8.png)
[电脑基础知识]网页设计配色一、网页设计配色系列简析--基础部分网页设计配色基础：RGB与HSB在实用美术中，常有"远看色彩近看花，先看颜色后看花，七分颜色三分花"的说法。
这说明，在任何设计中，色彩对视觉的刺激起到第一信息传达的作用。
因此，对色彩的基础知识的良好掌控，在网页设计中才能做到游刃有余。
为了使下面的网页配色分析更易于理解，我们先来了解色彩的RGB模式和HSB模式。
■ RGBRGB是表示红绿蓝又称为三原色光，英文为R(Red)、G(Green)、B(Blue)，在电脑中，RGB 的所谓"多少"就是指亮度，并使用整数来表示。
通常情况下，RGB各有256级亮度，用数字表示从0至255。
虽然数字最高是255，但0也是数值之一，因此共256级。
按照计算，256级的RGB色彩总共能组合出约1678万种色彩，即256×256×256＝16777216。
通常也被简称为1600万色或千万色。
也称为24位色(2的24次方)。
对于单独的R或G或B 而言，当数值为0时，代表这种颜色不发光；如果为255，则该颜色为最高亮度。
因此当RGB三种色光都发到最强的亮度，纯白的RGB值就为255,255,255。
屏幕上黑的RGB值是0,0,0。
R，意味着只有红色存在，且亮度最强，G和B都不发光。
因此最红色的数值是255,0,0。
同理，最绿色就是0,255,0；而最蓝色就是0,0,255。
黄色较特殊，是由红色加绿色而得就是255，255，0。
纯白色数值为R255,G255,B255纯黑色数值为R0,G0,B0红色数值为R255,G0,B0绿色数值为R0,G255,B0蓝色数值为R0,G0,B255黄色数值为R255,G255,B0RGB模式是显示器的物理色彩模式。
这就意味着无论在软件中使用何种色彩模式，只要是在显示器上显示的，图像最终就是以RGB方式出现。
■ HSB是颜色分为色相、饱和度、明度三个因素。
第2章网页布局与配色讲解
具有的属性，亮度关系是搭配色彩的基础。亮度在 三要素中具有较强的独立性，它可以不带任何色相 的特征而通过黑白灰的关系单独呈现出来。
11
2.2.2 216网页安全色
216网页安全颜色是指在不同硬件环境、不同操 作系统、不同浏览器中都能够正常显示的颜色集合， 这些颜色在任何终端浏览用户显示设备上的显示效果 都是相同的。所以使用216网页安全颜色进行网页配 色可以避免原有的颜色失真问题。
同色调和是单一颜色，只是深浅、色调和明暗度不 同。
21
2．近似色调和 近似色调和是使用邻近的颜色或者在色环上很接近的
第2章 网页布局与配色
在前面的章节中，已经了解建设网站的 流程，其中在设计之前要确定网站的布局。而 在布局之后，还包含网站的颜色等等。
网页设计已经渐渐走向成熟，一般在制 作网站之前，先要考虑网站的整体视觉效果。 在网站整体视觉效果中，主要是网页的色彩搭 配与网页布局。前者决定了浏览该网站的第一 印象；而后者则决定网站中的信息是否为合理 的安排。
而造型是创造出来的物体形象。这里是指网页的 整体形象，这种形象应该是一个整体，图形与文本的 接合应该是层叠有序。
1．矩形 矩形代表着正式、规则等。一般很多单位或者政
府网页，都是以矩形为整体造型。
6
2．圆形造型 圆形代表着柔和、团结、温暖、安全等，许多
时尚类和饮食类网站喜欢以圆形为网页整体造型。
3．三角形造型 三角形代表着力量、权威、牢固、侵略等，许
3
2.1.1 网页布局类型
网页设计也属于平面设计，所以平面设计中的构 图原理同样适用于网页设计。而在网页中，其布局可 以分成两种类型，一种是结构布局，另一种是艺术布 局。
网页设计的常用配色原理和技巧
网页设计的常用配色原理和技巧在网页设计中，配色是非常重要的一个部分。
合理的配色方案可以让网页看起来更加美观，有利于吸引用户的注意力，提升用户对网站的好感度和信赖感。
在这篇文章中，我们将介绍几种常用的网页设计配色原理和技巧，希望能对你的网页设计工作有所帮助。
1. 对比度原理对比度原理是指在网页中使用明亮和暗色彩之间的对比，使文字和图像更容易被用户辨认。
在进行对比度配色时，一般会选择一种明亮颜色与一种暗色颜色进行搭配。
明亮颜色可以让网页看起来更加生动活泼，而暗色彩则可以增强网页的深度和层次感。
2. 色轮原理色轮原理是基于彩色环来确定色彩搭配的原理。
色轮是一个由基本颜色按照一定的顺序排列而成的色彩图表。
在网页设计中，我们需要通过色轮的原理来确定网页的主色调和辅助色调。
一般而言，颜色环中的相邻颜色搭配更为和谐。
例如，在色轮中，黄色和橙色相邻，蓝色和绿色相邻，红色和紫色相邻。
3. 单色调配色原理单色调配色原理是指在网页设计中只使用一种颜色调来达到高水平的装饰效果。
例如，我们可以使用一种柔和的颜色调，比如灰色、米色或浅蓝色等来搭配，从而达到优雅、简洁的效果。
当然，在单色调配色中，需要注意的是添加一些不同明度和饱和度的热色彩或冷色彩。
4. 三色、五色、七色搭配原理三色、五色、七色搭配原理是指在网页设计中可以使用三种、五种或七种不同颜色来搭配，从而制作出更加绚丽多彩的网页。
在这个配色原理中，我们可以根据不同颜色调的明度、饱和度、纯度等因素来确定颜色的搭配顺序。
一般而言，五色配合是最为常见的一种搭配方案，主要是因为五种颜色可以覆盖到所有的基本色，同时又不至于显得过于花哨。
5. 反色搭配原理反色搭配原理是指在配色时，使用完全相反的两种颜色，例如黑色和白色、红色和绿色、蓝色和黄色等来搭配。
在网页设计中，反色搭配一般会产生一个强烈的对比效果，使得网页更加生动活泼。
6. 冷暖色调搭配原理冷暖色调搭配原理是指在搭配颜色时，利用冷色调和暖色调之间的关系来产生不同的效果。
网页配色设计
在搭配关系中，强烈的红色适合黑、白和不同深浅的灰； 与适当比例的绿组合富有生气，充满浓郁的民族韵味；与 蓝配合显得稳静、有秩序。
红色
橙色
橙色的波长在红与黄之间，具有红与黄之间的性质。 它处于最饱和状态时，它多与光明、华丽、富裕、 丰硕、成熟、甜蜜、快乐、温暖、辉煌、丰富、富 贵、冲动等千差万别的寓意联系在一起，并在不同 文化背景的作用下给人迥然各异的心理启迪。例如， 自然界中许多植物的果实。
2. CMYK色彩模式：是指墨水或颜料的三原色加上黑色这4 中颜色混合表现出的色彩，是主要用于出版印刷制作图 象的一种模式。
3. 索引色彩模式：是已经被限定在256个以内的一种模式， 主要在使用网页全色彩和制作的GIF图片时使用。
4. 灰色模式：是在制作黑白图片时使用的模式，主要用于 自然地处理黑、白、灰色图片。
• 网站色彩的统一可以建立在色类的比较上，也可以 建立在色彩的和谐上，但是建立在网站整体风格上 的色彩统一和鲜明的色彩个性上时，可以利用以下 几点：
6.4.1 利用色彩的特性及联想作用配色 6.4.2 色彩的联想作用和心理效果
2.4.1 利用色彩的特性及联想作用配色
首先，根据网站的目标而决定网页中的用色，其组合的使 用颜色都有一定的一贯性和共同点。另，最好考虑选择让 用户眼睛舒服的颜色。
配色 配色，关键要看网站的内容需求，而不是主观的意愿
和个人偏好。
2.3 如何调节不同板块和内容间的色彩
2.3 如何调节不同板块和内容间的色彩
2.3.1常用的搭配色彩的技巧
网站的标准色是一个色彩组合，这个色彩组合里包含若干中色 彩，这些色彩的搭配要讲究规律，下面是常用的搭配色彩的技 巧：
网页设计之色彩搭配
一、红色的色感温暖，性格刚烈而外向，是一种对人刺激性很强的色。
红色容易引起人的注意，也容易使人兴奋、激动、紧张、冲动、还是一种容易造成人视觉疲劳的色。
1、在红色中加入少量的黄，会使其热力强盛，趋于躁动、不安。
2、在红色中加入少量的蓝，会使其热性减弱，趋于文雅、柔和。
3、在红色中加入少量的黑，会使其性格变的沉稳，趋于厚重、朴实。
4、在红中加入少量的白，会使其性格变的温柔，趋于含蓄、羞涩、娇嫩。
二、黄色的性格冷漠、高傲、敏感、具有扩张和不安宁的视觉印象。
黄色是各种色彩中，最为娇气的一种色。
只要在纯黄色中混入少量的其它色，其色相感和色性格均会发生较大程度的变化。
1、在黄色中加入少量的蓝，会使其转化为一种鲜嫩的绿色。
其高傲的性格也随之消失，趋于一种平和、潮润的感觉。
2、在黄色中加入少量的红，则具有明显的橙色感觉，其性格也会从冷漠、高傲转化为一种有分寸感的热情、温暖。
3、在黄色中加入少量的黑，其色感和色性变化最大，成为一种具有明显橄榄绿的复色印象。
其色性也变的成熟、随和。
4、在黄色中加入少量的白，其色感变的柔和，其性格中的冷漠、高傲被淡化，趋于含蓄，易于接近。
三、蓝色的色感冷嘲热讽，性格朴实而内向，是一种有助于人头脑冷嘲热讽静的色。
蓝色的朴实、内向性格，常为那些性格活跃、具有较强扩张力的色彩，提供一个深远、广埔、平静的空间，成为衬托活跃色彩的友善而谦虚的朋友。
蓝色还是一种在淡化后仍然似能保持较强个性的色。
如果在蓝色中分别加入少量的红、黄、黑、橙、白等色，均不会对蓝色的性格构成较明显的影响力。
1、如果在橙色中黄的成份较多，其性格趋于甜美、亮丽、芳香。
2、在橙色中混入小量的白，可使橙色的知觉趋于焦躁、无力。
四、绿色是具有黄色和蓝色两种成份的色。
在绿色中，将黄色的扩张感和蓝色的收缩感相中庸，将黄色的温暖感与蓝色的寒冷感相抵消。
这样使得绿色的性格最为平和、安稳。
是一种柔顺、恬静、潢足、优美的色。
1、在绿色中黄的成份较多时，其性格就趋于活泼、友善，具有幼稚性。
网站色彩配色方法
网站色彩配色方法网站色彩配色方法一个人拥有自己的风格，称为个性。
一个网站有独特的色彩风格，可以吸引浏览者的注意，从而细细品味该站的内容。
所以，网页配色是非常重要的。
网页色彩是树立网站形象的关键之一。
网页颜色搭配的是否合理，直接影响到访问者的情绪。
好的色彩搭配，会给访问者带来强烈的视觉冲击力。
那么，具体到网页的背景、文字、图标、边框、超链接等，应该采用什么样的颜色，应该搭配什么颜色，才能最好地表达出网站的内涵呢？一、网页色彩基础知识首先，需要弄清楚什么是三元素，即：什么是同类色？什么是临近色？什么是对比色？什么是补色？这些都是色彩的基本概念，也是必须掌握的内容。
众所周知，Photoshop有一种HSB色彩模式，就是用色彩的三要素进行定义的。
色相是Hue，纯度是Saturation，明度是Brightness。
三元素指的是色相、纯度、和明度。
色相，指颜色的品相，如红色、绿色、蓝色。
纯度，指颜色的饱和度、鲜艳度；纯度越高，颜色就越鲜艳，否则颜色就越黯淡。
明度，指颜色的明亮程度。
亮度越高，就越接近白色；亮度越低，就越接近黑色。
其中，白色最亮，黑色最暗。
按照色彩在色轮上的位置不同，又可将色彩定义为同类色、邻近色、对比色、补色。
同类色是指两种颜色在色轮上位置的角度相差不超过15°；邻近色是指两种颜色在色轮上位置的角度相差不超过30°；对比色指两种颜色在色轮上位置的角度相差不超过120°；补色是指两种颜色在色轮上位置的角度相差为180°。
二、网络色彩的基本类型每个颜色都代表了一个概念，以及该色彩所表达的情感，如红色、黄色、蓝色、绿色、粉色、紫色等。
1.红色常见的红色有纯红、朱红、粉红、深红、浅红等。
红色是一种喜庆的颜色，是中国最传统的色彩。
例如，过年时的年画是红色的；古时状元及第的服饰也是红色。
红色象征着吉祥，代表着祝福。
但是，红色也代表着危险。
例如，医院的标识很多都是红色的，红绿灯的红灯就表示危险的信号。
网页配色基础.
《网页色彩设计概述》1.1.1色彩决定印象色彩是浏览者访问网页时目光无法回避的设计要素, 在浏览者观看网页时, 首先看到的就是网页的色彩搭配,在这一瞬间,对网页的整体印象就已经确定了下来, 因此网页的色彩效果不可轻视。
在不经意间, 浏览者对网页的印象就已经固定正如初次拜访客户时, 在互相介绍之前,通过这个人的衣着打扮、言谈举止就可以把我这个人的性格一样。
1.1.2 色彩印象无法更改色彩形成的印象非常稳固,不知不觉间,印入心灵的影像就被牢牢固定了。
1.1.3 色彩无处不在,具有多重效果插图的内容或标题和配色的印象一致时,就能发挥最大的效果。
配色无处不在, 它与文字和图像相互协调,发挥着综合性作用。
1.2 色彩概述光为何物?现代光学认为, 光是一种以电磁波形式存在的辐射能。
它主要包括宇宙射线、紫外线、可见光、波长时,其波谱称为“ 可见光谱” 。
而紫端波长(400nm 以外的紫外线、 X 线及红端波长(700nm 以外的红外线、电波等,则统称为“ 不可见光谱” 。
1.2.1 光的色彩色彩是由光的刺激而产生的一种视觉效应。
光是产生色的原因,色是眼睛感觉得结果。
光在物理学上市电磁波的一部分,其波长范围为 400nm — 700nm ,在此范围内的电磁波可以被人眼的视网膜所感知,称为可视光。
牛顿有名的色散实验得出了白色光是由七彩光混合而成的结论,而且发现并明确了光与色的关系,也反映出可见光中各色光具有不同的波长属性,如红光最长、绿光居中、紫光最短。
七色光中,当任一色光都不能再单独分解时,称为“ 单色光” ;反之,将这些上不同波长的色光复合而成的,故称“复合光” 。
除折射外,干涉、偏振及荧光等也可以发生分离色彩的物理现象。
1. 2.2 物体色物体本身是不会发光的。
物体之所以能被看到, 是因为光源色经物体表面吸收、反射,反映到视觉中的光色感觉。
物体在自然光照下,只反射其中一种波长的光, 而其他波长的光被全部吸收,这个物体就呈现出反射光的颜色。
网站配色
1、色彩入门1）、色彩的三大要素色相我们最常见的色谱“虹”就是把颜色按照“红橙黄绿青蓝紫”依次过渡渐变，色相两端分别是暖色、冷色中间为中间色或中型色。
明度明度就是色彩的明暗差别，如深红、大红以及粉红等。
饱和度饱和度是指色彩的鲜艳程度，也称色彩的纯度。
2）、色彩魔力色彩五颜六色、千变万化，我们平时所看到的白色光，经过分析在色带上可以看到，它事实上包括红、橙、黄、绿、青、蓝、紫等七色，各颜色间自然过渡。
其中，红、黄、蓝是三原色，三原色通过不同比例的混合可以得到各种颜色。
色彩有冷暖色之分，冷色(如蓝色)给人的感觉是安静、冰冷；而暖色(如红色)给人的感觉是热烈、火热。
冷暖色的巧妙运用可以让网站产生意想不到的效果。
色彩与人的心理感觉和情绪也有一定的关系，利用这一点可以在设计网页时形成自己独特的色彩效果，给浏览者留下深刻的印象。
一般情况下，各种色彩给人的感觉是：红色代表热情、活泼、热闹、温暖、幸福、吉祥橙色代表光明、华丽、兴奋、甜蜜、快乐黄色代表明朗、愉快、高贵、希望绿色代表新鲜、平静、和平、柔和、安逸、青春蓝色代表深远、永恒、沉静、理智、诚实、寒冷紫色代表优雅、高贵、魅力、自傲白色代表纯洁、纯真、朴素、神圣、明快灰色代表忧郁、消极、谦虚、平凡、沉默、中庸、寂寞黑色代表崇高、坚实、严肃、刚健、粗莽2、色彩分析研究色彩是为了使用色彩，也就是说最大限度地发挥色彩的作用。
色彩的意义与内容在艺术创造和表现方面是复杂多变的，但在欣赏和解释方面又有共通的国际特性，可见它在人们心目中不但是活的，也是一种很美的大众语言。
所以，通过对色彩的各种心理分析，找出它们的各种特性，可以做到合理而有效地使用色彩。
1）、红色系红色系是从色相环上的红紫色到朱红色之间的色彩。
它的刺激作用很大，具有很高的注目性和视认性。
大红色是暖色系里温度最高的色彩，红色系原色彩对人的心理能产生很大的鼓舞作用。
纯色使人产生如下心理感受：热的、活泼的、宽大的、引人注目、辣辣的、令人疲劳、不透明、健康的、血、热闹、圣诞节、太阳、口红、共产党、干燥、喜气洋洋、结婚、愉快、热情、热心、热爱、艳丽、危险、火灾、权势、活力、幸福、吉祥、丰富、野蛮、忠诚、大方、革命、暴力、残忍、贪婪、愤怒、浪漫、开放、庄重、公正、激昂、恐怖。
浅谈网页颜色的搭配技巧（前端必看）
浅谈⽹页颜⾊的搭配技巧（前端必看）⼀般来说，⽹页的背景⾊应该柔和⼀些、素⼀些、淡⼀些，再配上深⾊的⽂字，使⼈看起来⾃然、舒畅对于做⽹页的初学者可能更习惯于使⽤⼀些漂亮的图⽚作为⾃⼰⽹页的背景，但是，浏览⼀下⼤型的商业⽹站，你会发现他们更多运⽤的是⽩⾊、蓝⾊、黄⾊等，使得⽹页显得典雅，⼤⽅和温馨。
更重要的是，这样可以⼤⼤加快浏览者打开⽹页的速度。
⼀般来说，⽹页的背景⾊应该柔和⼀些、素⼀些、淡⼀些，再配上深⾊的⽂字，使⼈看起来⾃然、舒畅。
⽽为了追求醒⽬的视觉效果，可以为标题使⽤较深的颜⾊。
下⾯是我做⽹页和浏览别⼈的⽹页时，对⽹页背景⾊和⽂字⾊彩搭配积累的经验，这些颜⾊可以做正⽂的底⾊，也可以做标题的底⾊，再搭配不同的字体，⼀定会有不错的效果，希望对⼤家在制作⽹页时有⽤。
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″———配⿊⾊⽂字⽐较好看，⼀般作为正⽂浅绿⾊底配⿊⾊⽂字，或⽩⾊底配蓝⾊⽂字都很醒⽬，但前者突出背景，后者突出⽂字。
网页设计必备知识
2.1.1 网页页面元素种类
若由网页具体内容的类型来区分，页面元素 主要由文本、图像、表格、图层、音效、动 画、影片、特效等，设计者在网页已规划好 的版式区域中加入所需的元素并作进一步编 辑，以最精美的外观组合呈现网页整体效果。
页面元素则可分为网站Logo、按钮、导航、 搜索元件、联系信息、版权信息、信息栏横 幅、广告等。
2.1.3 网页多媒体元素的分类
网页中的多媒体元素可分为音频和视
频两种。 –音频格式主要包括WAV、MIDI、 MP3、WMA四种。 –网络视频格式包括ASF、RM、 RMVB、MOV等，此外MPEG、 AVI由于具备较高画质，常常作为 资源下载传播。
2.1.4 网页动画元素
在网页设计中只有两种多媒体动画素材，一种是作 为图像衍生格式的GIF文件，另一种则是具备影音效 果的Flash动画。下面分别介绍这种动画元素的特性 。 – 1) GIF动画图像 – GIF格式图像具有无损高压缩性和支持透明背景， 而除了这些优点，GIF图像还有一个突出的特点就 是具备动画效果。 – 2) Flash动画 – Flash动画具有体积小、兼容性强，同时支持互动 和影音效果等诸多优点，因此自面世以来就成为 一种流行的网络动画格式。
图8 标准五分栏·
图9 五分栏· 韩国短信商业站点
1.3
分栏式结构的变化
在新浪网二分栏框架的解析图(图10)上，我们 可以清楚地看到右列被分成了多个小的区域， 这些利用列宽而划分出的多个小区域，可以配 合网站内容放置不同的信息和功能区。并且能 灵活地处理页面元素，以活跃页面气氛。
图2.4 GIF动画原理
图2.5 网页中的Flash动画
2.2 网页设计规格
网页设计之色彩搭配
色彩使用技巧
• 确定主题色 一个网站不可能单一的运用一种颜色 ，让人感觉单调、乏味；但是也不可能 将所有的颜色都运用到网站中，让人感 觉轻浮，花哨。一个网站必须有一种或 两种主题色，不到于让客户迷失方向， 也不至于单调、乏味。所以确定网站的 主题色也是必需考虑的问题之一
色彩使用技巧
用一种色彩。这里是指先选定一种色彩，然后调整 透明度或者饱合度（将色彩加深或减淡），产生新 的色彩。用于网页。这样的页面看起来色彩统一， 有层次感
色彩使用技巧
• 用两种色彩。先选定一种色彩，然后先 择它的对比色。比如蓝色与黄色。这样 搭配可以使整个页面色彩丰富但不花哨
• 用一个色系。简单的来说就是一个感觉 的色彩，例如淡蓝，淡黄，淡绿，或者 土黄，土灰，土蓝。
• 用黑色各一种颜色。比如：大红的字体 配黑色的边框感觉很“跳”。
色彩使用忌讳
• 不要将所有颜色都用到，尽量控制在三 种色彩以内
红、绿、蓝三种波长的光是自然界所有颜色的基 础，光谱 中的所有颜色都是由这三种光的不同强 度构成。这三种光本身各自独立，其中任何一种 都不能由其余两种光混合产生。所以我们把这三 种颜色的光称为“色光三原色”“三原色”
色彩的分类
色彩的构成元素
色相 色彩的相貌，类似于人名，确切地表 示某种颜色色别的名称。如：中国红， 军绿色等
大公司的网站中颜色运用的例子
• Verizon公司
红色是Verizon的企业 品牌主色调，也是贯 穿整个网站的颜色。 红色有助于刺激用户 的兴奋性，展示出一 个出售让人兴奋和快 速更新的产品的公司 形象。白色背景的运 用与亚马逊类似，通 过一个整洁有序的界 面来帮助用户阅读这 个网站。
大公司的网站中颜色运用的例子
大公司的网站中颜色运用的例子
第2章 网站UI设计的色彩搭配
网站色彩的编排设计
使用基本色配色
下图所示的网站页面用绿色作为主色调，整个页面的配 色基本上都围绕着绿色，并通过卡通的形式来表现网站内容； 在页面中还搭配了强调色—橙色，使得页面的色彩鲜艳活泼， 给人一种活泼、愉悦的感觉。
网站色彩的编排设计
使用基本色配色
下图所示的网站页面使用像褪色的牛皮纸一样的卡其色 作为主色调，给人一种自然、传统的感觉，再搭配上中国传 统的皮影画和花纹效果，网站具有了中国特色和中国传统文 化的气息，整个页面看起来具有历史感。
色彩在各类网站中的表现力
个人网站
个人网站的用色一般比较个性化，充分体现网站拥有者 的个性和其审美情趣。
网站色彩的编排设计
网站色彩的4种功能角色
支配色
主色
融合色
强调色
网站色彩的编排设计
网页配色的基本方法
网页配色关系 文本配色 文本配色的平衡
网站色彩的编排设计
使用基本色配色
使用基本色配色是指在网站页面中 只使用一种色彩或几种类似色彩进行配 色，主体色也就是网站页面的代表色彩， 使用基本色配色有利于浏览者记住网站 的色彩形象。
网站色彩的编排设计
使用多色彩配色
下图所示的游戏活动页面以能让人感到愉悦的橙黄色为 主色调，搭配绿色、红色、蓝色、紫色等，应用的配色的饱 和度都很高，整个页面给人强烈的视觉冲击。
网站色彩的编排设计
使用多色彩配色
下图所示页面是一个汽车网站的活动页面，运用饱和度较 低的粉色、淡黄色作为页面背景色调，搭配饱和度较高的蓝 色、绿色、紫色等突出需要表现的内容，能够给人一种开心、 快乐的感受。
网站色彩的编排设计
使用多色彩配色
下图所示的网站是一个面向年轻人的时尚服饰品牌网站， 运用了明度和饱和度较高的色彩进行搭配，体现出时尚、年 轻、活力，也正好与品牌形象相契合。
网页设计配色基础知识学习
网页设计配色基础知识学习：RGB与HSB在实用美术中，常有"远看色彩近看花，先看颜色后看花，七分颜色三分花"的说法。
这也就说明，在任何设计中，色彩对视觉的刺激起到第一信息传达的作用。
因此，对色彩的基础知识的良好掌控，在网页设计中才能做到游刃有余。
为了使下面的网页配色分析更易于理解，我们先来了解色彩的RGB模式和HSB模式。
■ RGBRGB是表示红色绿色蓝色又称为三原色光，英文为R(Red)、G(Green)、B(Blue)，在电脑中，RGB的所谓"多少"就是指亮度，并使用整数来表示。
通常情况下，RGB各有256级亮度，用数字表示为从0、1、2至255。
虽然数字最高是255，但0也是数值之一，因此共256级。
按照计算，256 级的RGB 色彩总共能组合出约1678万种色彩，即256×256×256＝16777216。
通常也被简称为1600万色或千万色。
也称为24位色(2 的24次方)。
对于单独的R或G或B而言，当数值为0时，代表这种颜色不发光；如果为255，则该颜色为最高亮度。
因此当RGB三种色光都发到最强的亮度，纯白的RGB值就为255,255,255。
屏幕上黑的RGB值是0,0,0。
R，意味着只有红色存在，且亮度最强，G和B都不发光。
因此最红色的数值是255,0,0。
同理，最绿色就是0,255,0；而最蓝色就是0,0,255。
黄色较特殊，是由红色加绿色而得就是 255，255，0。
（详细分析请参考赵鹏所写的《电脑美术设计中的色彩模式详解》）纯白色数值为R255,G255,B255纯黑色数值为R0,G0,B0红色数值为R255,G0,B0绿色数值为R0,G255,B0蓝色数值为R0,G0,B255黄色数值为R255,G255,B0RGB模式是显示器的物理色彩模式。
这就意味着无论在软件中使用何种色彩模式，只要是在显示器上显示的，图像最终就是以RGB方式出现。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
古典风格页面
Adobe Dreamweaver CS3
2.2 按网站风格进行配色
2.2.5 科技金属风格
通常，人们将大都市中使用最多的单纯而又老练感觉的颜色称之 为现代色。
科技金属风格页面
Adobe Dreamweaver CS3
2.3 网站配色的一些参考
女性网站风格
纯度对比网页
Adobe Dreamweaver CS3
2.3 网站配色的一些参考
2.3.3 配色后的修饰
1．渐变修饰 ． 2．底图修饰 ． 3．点、线的修饰 ． 1．网页标题 ． 2．网页链接 ． 3．网页文字 ． 4．网页标志 ．
Adobe Dreamweaver CS3
The End
Adobe Dreamweaver CS3
2.1 网页配色基础
3．网页的色彩搭配 ． ● 用一种色彩 ● 用两种色彩 ● 用一个色系 ● 用黑色和一种彩色 2.1.2 RGB颜色和色环 颜色和色环
RGB是表示红色绿色蓝色称为三原色光，RGB颜色称为加成色。 色环是在彩色光谱中所见的长条形的色彩序列，将首尾连接在一 起。
Adobe Dreamweaver CS3
2.2 按网站风格进行配色
2.2.1 清爽风格
洁白的雪花、冰凉透明的冰块、清新的空气、晶莹的露珠等，会 让人感觉到纯洁和干净。
清爽风格的页面
Adobe Dreamweaver CS3
2.2 按，应该使用高彩度高亮度的鲜亮颜 色，而那些低彩度的生硬沉重颜色要尽量避免使用。
活泼风格的页面
Adobe Dreamweaver CS3
2.2 按网站风格进行配色
2.2.3 商业风格
在商业活动中，按一般流行的看法，灰色或黑色系列可以象征“ 职业”，因为这些颜色较不具个人主义，有中庸之感。
商业风格页面
Adobe Dreamweaver CS3
2.2 按网站风格进行配色
2.2.4 古典风格
2.3.1 按企业形象进行配色
网络形象设计必须能够代表企业形象，而且能够将网页的整体格 调深刻完整地烙在浏览者的脑海中，吸引浏览者回头。
新浪首页风格
联想公司首页风格
Adobe Dreamweaver CS3
2.3 网站配色的一些参考
2.3.2 按颜色对比进行配色
在一定条件下，不同色彩之间的对比会有不同的效果。在不同的 环境下，多色彩会给人一种印象，色彩单一给人另一种印象。
Adobe Dreamweaver CS3
第二章
网页配色知识基础
Adobe Dreamweaver CS3
2.1 网页配色基础 2.2 按网站风格进行配色 2.3 网站配色的一些参考
Adobe Dreamweaver CS3
2.1 网页配色基础
2.1.1 网页中颜色搭配与原理 1．色彩基本概念 ． ● 色相 ● 饱和度 ● 明度 2．色彩的三原色 ． ● 色环 ● 色彩的心理感觉