网站配色方案实例

网站配色方案实例颜色的利用在网页制作中起着超级关键的作用，有很多网站以其成功的色彩搭配令人过目成诵。可是对于刚开始学习制作网页的人来讲，往往不容易驾驭好网页的颜色搭配。除学习各类色彩理论和方式之外笔者以为多学习一些著名网站的用色方式，对于咱们制作美丽的网页能够起到事半功倍的作用。所以，笔者总结了一些著名网站的颜色搭配方式，这些方式能够让咱们的学习少走弯路，快速提高咱们的网页制作水平。一、网页颜色原理和象征意义咱们所有网页上颜色，在HTML下看到的是以颜色英文单词或十六进制的表示方式（如#000000表示为黑色）。不同的颜色有着不同的含义，给人各类丰硕的感觉和联想。红色：热情、奔放、喜悦、庄重黄色：高贵、富有、灿烂、活泼黑色：严肃、夜晚、沉着白色：纯洁、简单、干净蓝色：天空、清爽、科技绿色：植物、生命、生机灰色：庄重、沉稳紫色：浪漫、富贵棕色：大地、厚朴二、网页颜色的利用风格不同的网站有着自己不同的风格，也有着自己不同的颜色。网站利用颜色可能分为几种类型：一、公司色在此刻企业中，公司的CI形象显得尤其重要，每一个公司的CI设计必然要有标准的颜色。比如新浪网的主色调是一种介于浅黄和深黄之间的颜色，同时形象宣传、海报、广告利用的颜色都和网站的颜色一致。再比如国富投资公司的主色调是C：100%,M：60%,Y：0%,K：0%。如此的颜色利用到网站上显得色调自然、底蕴深厚。二、 风格色许多网站利用颜色秉承的是公司的风格。比如海尔利用的颜色是一种中性的绿色,即充满朝气有不失自己的创新精神。女性网站利用粉红色的较多，大公司利用蓝色的较多……这些都是在突出自己的风格。3、适应色这些网站的颜色利用专门大一部份是凭自己的个人爱好,以个人网站较多利用,比如自己喜欢红色、紫色、黑色等,在做网站的时候就偏向于这种颜色。每一个人都有自己喜欢的颜色,因此这种类型称为适应色。三、 设计用色十例以下我将别离介绍十个配色较好的网站,大家能够学习和借鉴一下,培育对色彩的敏感和独到的审美能力。1）这是个大型的NBA网站。通常咱们常常看到的此类网站以白色为背景,可是那个网站却用灰黑色RGB为（48，48，48/#333333）（以下颜色都用RGB表示），文章题目用色为RGB为（203，201，153/#CCCC99），菜单利用的RGB为（112，119，112/#707770）。如此的配色能够显示独特的个性，又不失大型网站的风度。如图1图12）下面是一个娱乐类的综合性网站UG0,他的配色方案是背景色为黑色RGB为（0，0，0）中嵌套RGB（0，0，82），字体白色RGB（255,255,255），菜单为RGB（77,114,159）。如此的虽以黑蓝为主色调，可是配以漂亮的图片，给人的感觉是生机盎然，充满了互动色彩和青春气息。如图2。图2

下面的那个网站是赫赫出名的微软公司网站，微软不仅软件做的好，连网页制作也是世界一流。他的每一个网页都是制作的样板。从网页咱们就可以够看出微软公司的风格、作风，和雄厚的实力。背景颜色利用蓝色RGB为(0,151,254)，菜单为黑色RGB(0,0,11)，菜单为灰色RGB(200,200,200),字体为黑色RGB(0,0,0),如图3。iWTHm一 not..iWTHm一 not..UIVaiKL5*rm呻WIJfr审图3此刻介绍的网站相对简单，可是她的用色也别具匠心，此刻咱们来看一看，整体上利用的是白色RGB(255,255,255)，辅助色为RGB(79,88,95)，菜单色为RGB(48,64,64)和RGB(0,81,111)字体利用的是RGB(83,86,91)。虽然简单，但颜色搭配超级的科学合理。如图4图4下面的网站采用黄色调为主,很表现公司的个性,此刻咱们就来看一看她的颜色搭配。主色调为黄色RGB为(255,199,48/#FFC730)，辅助色调为RGB(49,102,46)字体为棕色RGB(153,103,0),中间再配以抽象的图片,显得个性十足但又不单调。如图5图5橘红色若是运用适当的话是一种超级利用于网页上的颜色。下面的那个网站就是一个超级著名的例子。他的主色调为RGB(255,151,0)辅助色调为RGB(255,103,4),菜单RGB为(252,200,0)。字体利用黑色RGB为(0,0,0)。此种配色显得主人较为前卫，色彩烈火，给人的震慑力较强。如图6

图6鲜红色也是一种震撼感很强的颜色，若是搭配不妥，也可能使网站没有风格和特点。下面的那个网站就是利用红色比较好的网站。咱们来看看他的颜色搭配。他利用的主色调是RGB(200,9,0),配以抽象的图形，文字利用的是RGB(213,229,167)显得美观而不失独特，大气而不逼人。如图7图7下面介绍的这种色调是咱们制作网页的时候不会经常常利用到的颜色,若是利用到你的网页中,肯定会给人线人一新的感觉。他的主色调为RGB(144,151,97)辅助色调为RGB(173,168,112)边饰为黑色RGB(0,0,0)字体为黑色RGB(0,0,0)。如此的搭配显得风格独特，颜色和谐而庄重。如图8图8下面的设计加倍的简单化,可是颜色的利用使网页并非呆板,反而让人感觉到一股浓浓的生活和家庭气氛，令人置身于美丽和爱中。他的主体是由两种颜色组成，别离是RGB(239,200,161)和RGB(201,254,200)。如此简单,可是却栩栩如生,跃然网上。如图9

图910）下面举出那个例子是想证明一个道理——只要你有足够的想象力，你就可以够设计出漂亮的网页。目前在网上超级流行一句话就是网页的搭配不要超过四种主要颜色，不然就有杂乱之感。下面的那个网站远远的超过了三种颜色，可是她并非失美丽。因此重要的仍是色彩的驾驭能力。下面那个例子的菜单就利用了7种颜色，可是咱们看到的网页并非杂乱，相反感觉作者很有创意。如图10）下面举出那个例子是想证明一个道理——只要你有足够的想象力，你就可以够设计出漂亮的网页。目前在网上超级流行一句话就是网页的搭配不要超过四种主要颜色，不然就有杂乱之感。下面的那个网站远远的超过了三种颜色，可是她并非失美丽。因此重要的仍是色彩的驾驭能力。下面那个例子的菜单就利用了7种颜色，可是咱们看到的网页并非杂乱，相反感觉作者很有创意。如图10if翩站设计图10网站设计中配色方案的利用不论你做什么样的设计，色彩都是一个不容轻忽的问题。色彩以一种“隐蔽”的方式转达的各类信息，这些信息会影响观看者的心理和感受，左右他们的判断和选择，色彩对于设计而言实在过重要。这篇文章就要比较系统地介绍一些在网页设计中如何利用色彩的入门知识。色彩是设计者的得力助手，前提是应用适当。对于网站设计而言，色彩的重要性尤其突出，不过常常被粗心的站长轻忽。咱们常常说“第一映像最重要”，于是设计网站时，设计者常常会花很多精力制作一个“富于冲击力”的LOG0或BANNER,固然，它们很重要。可是，访问者访问网站时的第一映像实际上并非来自这些LOGO或BANNER，而是——色彩！好了，在了解了色彩对于网站设计的重要性以后，咱们开始探访色彩的奥秘。色彩入门第一让咱们熟悉一下色彩的一些大体概念。三原色一切颜色都来自三原色：红、黄、蓝。

在那个圆环中，相邻的两个原色相混合能够取得另外三个比较重要的颜色（下文将其称为二级原色）：红+黄=橙，红+蓝=紫，蓝+黄=绿厂貝百呎和陨岂羽口厂貝百呎和陨岂羽口让咱们再深切一步，三原色和三种二级原色能够进一步混合取得更多的颜色，别离是橙红色、紫红色、蓝紫色、蓝绿色、橘黄色和黄绿色。这六种颜色能够称为三级原色。橘黄橘黄依照一样的方式不断进行下去，那个圆环中颜色之间的分隔线就会消失，取得下图所示的“色彩圆环”，在一些画图程序的调色板中咱们能够看到如此的色彩圆环。的“色彩圆环”，在一些画图程序的调色板中咱们能够看到如此的色彩圆环。可是那个圆环仍然没有涵盖所有的颜色，对于圆环中的每一种颜色还有饱和度、亮度和灰度等的转变。也就是说，将上述圆环中的任意一种颜色和黑色、白色、灰色依照不同比例混合就可以够取得更多的颜色，下面将详细介绍。常用的色彩术语饱和度某种颜色的饱和度是指这种颜色所包括的大体颜色的多少。例如RGB值为（0，0，255）的蓝色是纯蓝色，他的饱和度是100%。随着饱和度的降低，颜色会愈来愈接近灰色。□□3sa«」」加上门□□3sa«」」加上门OK2O&40&60S80%100«□□阜0%30%40K60%809.100K灰度大体色彩和黑色进行不同程度的混合能够取得不同的灰度，例如OK20K40%OK20K40%604t304t100%亮度大体颜色和白色进行不同程度的混合能够取得不同的亮度，例如：:0%30%40%604tSOK100%色调大体颜色和灰色进行不同程度的混合能够取得不同的色调，例如色彩方案的种类不同网站应当利用不同的色彩方案，与站点的主题相吻合的色彩方案决不单单能够让网站“加倍好看”，更重要的是在访问者心目中成立对那个网站的感性熟悉。所以，色彩方案的选择决不能轻率，而且色彩方案绝对是网站建设的第一个步骤。若是选择色彩方案时过于轻率，乃至根本不对网站进行色彩方案的整体计划，你将不可能制作出一个真正优秀的网站。例如，一个销售婴儿用品的网站应当利用比较活泼的色彩方案，而一个艺术网站则应当利用比较执重的方案。依照色彩方案中色彩利用方式的不同，咱们能够将色彩方案划分成多种类型，单色方案、相似色方案、补色方案和三合一色方案。单色方案单色方案是指在网站设计中终止利用一种大体颜色，为避免单调，咱们能够通过调整这种大体颜色的灰度和亮度来取得更多的颜色，由于整个颜色方案中事实上只有一种基色，因此这种方案称为单色方案。例如：

逍挂甫*削:厂貝百呎曲预邑逍挂甫*削:厂貝百呎曲预邑在Photoshop的色彩选择窗口中，咱们能够如此进行成立单色方案。第一调整H（也就是Hue的缩写）后面的值来调整色调。注意，H的单位是度，也就是大体颜色在颜色环上所处位置的角度。设置好H的值以后，再调整B后面的数字调整亮度和S后面的数字调整饱和度。注意,其中B和S的单位是百分比，也就是向大体颜色中添加白色和黑色的百分比。如此就可以够取得一个单色方案了。下面来看两个利用单色方案的成功实例。单色方案实例之一：这是一个女性网站，因此其大体颜色为粉红色，并通过调整粉红色的饱和度取得了其余几种颜色。整体颜色趋于淡雅，访问者的注意力会很自然地被吸引到几幅展示其产品的图片上。单色方案实例之二：那个色彩方案利用的基色颜色较深，并通过修改其亮度取得其他两种颜色，并用最浅的颜色作为主体部份的背景，使其突出出来。总的来讲，单色方案是一种比较稳重的方案，或说比较保守的方案。单色方案给人整洁、经典的感觉，最适合于内容比较严肃的网站，比如政府网站，学术网站，企业网站，高雅艺术网站。特别值得一提的是，商业网站也比较适合利用此种颜色方案，因为这种方案能够给人一种稳固感，使访问者容易成立对网站的信赖感。固然，这种方案也有其灵活的一面，当利用较浅的基色时，这种颜色方案也能够用于时尚类网站，转达简约清雅的观念。相似色方案在色彩圆环上选择彼此相邻的几种颜色组成的配色方案就是相似色方案。例如橙色、橙红色和橙黄色就可以够组成一个相似色方案。由于相似色方案中包括了多种基色，若是再加上亮度和饱和度的转变，能够组成的颜色就超级多。□□ssnn■KQS□II■■區圍□口面是相似色方案的实例。bWJM4l^IIWmWW咋-mbwj+Vi俱rvrw-'ifrlasiwiwMiiiBUIUEVF-miminainnbWJM4l^IIWmWW咋-mbwj+Vi俱rvrw-'ifrlasiwiwMiiiBUIUEVF-miminainnmOHtAJH :倍前w"r err・gJTHlitiMfiAWM1■Mo?■■拔HUr>邛松as•t_J力盘ijn_r«u de」l d」丹JU J■■tiEUHhi*亦當枕■禮心芹cjEk 百—^a-O—£>.”巒：・卜*5 耳■exnx“h"1驴曲千寸■--isa曲瞬Hirevhskhititsim相似色方案实例一：那个网站利用了由橙黄色、