网页设计配色基础应用及实战(实用).doc

1网页设计配色基础、应用及实战HTTP//DESIGNYESKYCOM/HOMEPAGE/43/2538543SHTML【专栏作者简介】黎芳科班艺术设计专业高材生，从事网页设计近十年；曾长期从事企业策划工作；长期分析研究网页设计、配色；2000年曾在天极设计在线（DESIGNYESKYCOM）、电脑报发表过数篇文章，2001年开始在蓝色经典论坛任艺术设计版主IDREDFALL；2004年开始做自由职业、自由撰稿人；2005编著网页设计与配色实例分析一书。2006年首都师大讲师；目前在着手写第二本书。EMAILREDLIFANG163COM注本专题部分理论节选于本文作者黎芳REDFALL的网页设计与配色实例分析一书的第二部分第五章，由希望电子出版社出版。网上购买CHINAPUB2【专题提纲】一、网页设计配色系列简析基础部分第一节RGB与HSB第二节色彩三属性第三节常用色彩的基本概念二、网页设计配色系列简析应用部分第一节色调第二节色彩的对比第三节色彩的调和第四节红色系第五节橙色系第六节－黄色系第七节－绿色系第八节－蓝色系第九节－紫色系第十节－黑色系第十一节－灰色系NEW第十二节－白色系（以下内容待续）第十三节－色彩应用于网页中的功能第十四节－色彩搭配技巧3三、网页设计配色系列简析实战部分第一节网页设计配色系列分析实战部分－欧美网站第二节网页设计配色系列分析实战部分－韩国网站第三节网页设计配色系列分析实战部分－中国网站附网页设计与配色实例分析内容提要本书精心收集并整理了数百个国外优秀网站的网页，将设计理念与技巧进行全新的归纳、总结、分析，同时结合自己以往的创作经验写成此书。本书内容分三大部分网页设计、网页配色和网站分析，分别阐述了网页设计的原则、框架、元素、风格以及网页配色的基础知识、具体运用和实用方案等，并针对各类网站的特点，着重分析了在设计中的方向和不同侧重。本书特点画面精美，内容丰富，文字生动，引人入胜。读者对象从事网页设计、网站制作以及平面设计的广大从业人员，高等美术院校电脑美术专业师生，社会各类网页设计培训班。配套光盘内容为书中部分网页文件、网页及软件界面收藏、数以千计的各类资源、优秀网站地址等等。4网页设计配色基础RGB与HSB在实用美术中，常有“远看色彩近看花，先看颜色后看花，七分颜色三分花“的说法。这也就说明，在任何设计中，色彩对视觉的刺激起到第一信息传达的作用。因此，对色彩的基础知识的良好掌控，在网页设5计中才能做到游刃有余。为了使下面的网页配色分析更易于理解，我们先来了解色彩的RGB模式和HSB模式。■RGBRGB是表示红色绿色蓝色又称为三原色光，英文为RRED、GGREEN、BBLUE，在电脑中，RGB的所谓“多少“就是指亮度，并使用整数来表示。通常情况下，RGB各有256级亮度，用数字表示为从0、1、2至255。虽然数字最高是255，但0也是数值之一，因此共256级。按照计算，256级的RGB色彩总共能组合出约1678万种色彩，即256256256＝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。黄色较特殊，是由红色加绿色而6得就是255，255，0。（详细分析请参考赵鹏所写的电脑美术设计中的色彩模式详解）纯白色数值为R255,G255,B255纯黑色数值为R0,G0,B0红色数值为R255,G0,B0绿色数值为R0,G255,B0蓝色数值为R0,G0,B255黄色数值为R255,G255,B07RGB模式是显示器的物理色彩模式。这就意味着无论在软件中使用何种色彩模式，只要是在显示器上显示的，图像最终就是以RGB方式出现。■HSB是颜色分为色相、饱和度、明度三个因素。英文为HHUE、S（SATURATION）B（BRIGHTNESS饱和度高色彩较艳丽。饱和度低色彩就接近灰色。亮度高色彩明亮，亮度低色彩暗淡，亮度最高得到纯白，最低得到纯黑。一般浅色的饱和度较低，亮度较高，而深色的饱和度高而亮度低。网页设计配色基础色彩三属性与实例剖析许多初学者对色彩的属性和原色概念模糊，容易混淆，下面我们就先从几个概念入手。今天介绍色彩的三个属性。颜色可以分为非彩色和彩色两大类。非彩色指黑色、白色和各种深浅不一的灰色，而其他所有颜色均属于彩色。从心理学和视觉的角度出发，彩色具有三个属性色相、明度、纯度（彩度）。8基本色相环■色相（HUE）也叫色调，指颜色的种类和名称，是指颜色的基本特征，是一种颜色区别于其他颜色的因素。色相和色彩的强弱及明暗没有关系，只是纯粹表示色彩相貌的差异。如红、黄、绿、蓝、紫等为不同的基本色相。■明度（VALUE）也叫亮度，指颜色的深浅、明暗程度，没有色相和饱和度的区别。不同的颜色，反射的光量强弱不一，因而会产生不同程度的明暗。非色彩的黒、灰、白较能形象的表达这一特质。明度的递增→明度网页例图HTTP//WWWONCEUPONAFORESTCOM9明度分析从上图网页所选取的4个主要色块的RGB数值来看，这4块色彩组合显示的RGB数值很高，接近于最高值255。RGB相互间的数值相近，由于有RG的高数值与B高数值混合，整个网页给人的感觉非常协调，柔和雅致，心情愉悦。结论RGB同时呈现相近的高数值时，相近等量的色彩相互混合，页面呈高明度灰色段，协调的柔和状态，令人遐想，对视觉刺激是缓慢的，适合长时间观看。但由于数值接近，因此色阶平稳，同时存在着不够醒目的状态。■纯度CHROMA）也叫饱和度，指色彩的鲜艳程度。原色最纯，颜色的混合越多10则纯度逐渐减低。如某一鲜亮的颜色，加入了白色或者黑色，使得它的纯度低，颜色趋于柔和、沉稳。加入黑色的纯度变化和加入白色的纯度变化→纯度网页例图HTTP//WWWMINIMALWEBDE纯度分析上图网页中选取了主要的两种色系为组合。运用HBS数值模式更易于理解分析该网页的纯度情况。11我们看到蓝色S数值呈现99％具有相当高的饱和度，B明度为79，玫瑰色S饱和度数值为85，B明度为97％。当饱和度和明度同时呈最高值时，色彩对视觉的刺激强度到达最高状态。由于蓝色的明度稍低，饱和度较高，而玫瑰色的明度较高，该颜色纯度随之加强，因此玫瑰色相对蓝色对人的视觉刺激更强烈。结论HSB模式中S和B呈现的数值越高，饱和度明度越高，页面色彩强烈艳丽，对视觉刺激是迅速的，醒目的效果，但不易于长时间的观看。以上两种颜色的S数值接近，是强烈的状态。H显示的度是代表在色轮表里某个角度所呈现的色相状态，相对于SB来说，意义不大。常用配色基本概念及精彩相关实例剖析在实用美术中，常有“远看色彩近看花，先看颜色后看花，七分颜色三分花“的说法。这也就说明，在任何设计中，色彩对视觉的刺激起到第一信息传达的作用。因此，对色彩的基础知识的良好掌控，在网页设计中才能做到游刃有余。前面我们介绍了常用的电脑色彩模式