网页设计配色应用实例剖析
网页设计,色彩搭配分析
在网页设计中，对目前的网站配色(Landscape of color)认真琢磨一下还是非常有趣的。
大多数网站或多或少相同，但是颜色的设计搭配却是一个非常给力的工具。
我并不想尝试去阐述一些具有革命性的东西或者是特别的发现。
但如果大部分网站都采用同样的配色方案，那对颜色意味着什么呢？实际上，远超出你的想象。
幻想一下整个世界的每一个网站都是非常漂亮和五彩缤纷的，但它同时也意味着千篇一律。
这就像你文章中每一个段落的粗体。
因此，当配色方案比较柔和的时候，它允许有更多的机会。
关注你想要的任何东西许多网站都有一个基本的灰度配色方案-白色的背景和黑色的字体。
(网页中)想让你看到的部分会赋予颜色作为强调。
这就是为什么网页不会充满颜色—它们使用在想让你看到的按钮，标题或者链接上面。
Vibrant ，当你第一次登陆它们的主页，主页的背景和图片是黑白的，网站标志，可点击的按钮和汉堡菜单是亮黄色，这些可以很快的（在灰度背景中）脱颖而出，吸引你的注意力。
另一个例子是Takeit; 当你第一次登录他们的主页就看一个大大的蓝色背景。
然而，其他的都是白色的。
最前面并且居中的大标题会让你的注意力集中在中间。
同时，你的眼睛在很短的时间内就能注意尺寸较小但是仍然明显的APP商城的按钮。
你可以从中研究一下是颜色如何引导用户的注意力的。
创造个性颜色是非常奇妙的，因为它可以展现一个网站或者品牌的语气和情绪。
Beagle （很遗憾，译者访问的时候，网站已经不在了）提供创建项目简介的服务，他们的网站使用了较轻的茶色。
当你向下滚动他们的主页时，你会看到棕色,炭色，绿色，甚至粉红色这样一些愉快的色调。
世俗的色调（earthly tones）看起来专业和优雅，给人对于其所代表的公司（留下）一个非常好的印象。
An Interesting Day网站它特指“在奥斯陆峡湾（Oslofjord）的一个小岛上举办的一个不可思议的，为期一天的会议”（“a weird, one-day conference on a tiny island in the Oslofjord”）。
网页色彩搭配分析
网页色彩搭配内涵一、红色的色感温暖，性格刚烈而外向，是一种对人刺激性很强的色。
红色容易引起人的注意，也容易使人兴奋、激动、紧张、冲动、还是一种容易造成人视觉疲劳的色。
1、在红色中加入少量的黄，会使其热力强盛，趋于躁动、不安。
2、在红色中加入少量的蓝，会使其热性减弱，趋于文雅、柔和。
3、在红色中加入少量的黑，会使其性格变的沉稳，趋于厚重、朴实。
4、在红中加入少量的白，会使其性格变的温柔，趋于含蓄、羞涩、娇嫩。
二、黄色的性格冷漠、高傲、敏感、具有扩张和不安宁的视觉印象。
黄色是各种色彩中，最为娇气的一种色。
只要在纯黄色中混入少量的其它色，其色相感和色性格均会发生较大程度的变化。
1、在黄色中加入少量的蓝，会使其转化为一种鲜嫩的绿色。
其高傲的性格也随之消失，趋于一种平和、潮润的感觉。
2、在黄色中加入少量的红，则具有明显的橙色感觉，其性格也会从冷漠、高傲转化为一种有分寸感的热情、温暖。
3、在黄色中加入少量的黑，其色感和色性变化最大，成为一种具有明显橄榄绿的复色印象。
其色性也变的成熟、随和。
4、在黄色中加入少量的白，其色感变的柔和，其性格中的冷漠、高傲被淡化，趋于含蓄，易于接近。
三、蓝色的色感冷嘲热讽，性格朴实而内向，是一种有助于人头脑冷嘲热讽静的色。
蓝色的朴实、内向性格，常为那些性格活跃、具有较强扩张力的色彩，提供一个深远、广埔、平静的空间，成为衬托活跃色彩的友善而谦虚的朋友。
蓝色还是一种在淡化后仍然似能保持较强个性的色。
如果在蓝色中分别加入少量的红、黄、黑、橙、白等色，均不会对蓝色的性格构成较明显的影响力。
1、如果在橙色中黄的成份较多，其性格趋于甜美、亮丽、芳香。
2、在橙色中混入小量的白，可使橙色的知觉趋于焦躁、无力。
四、绿色是具有黄色和蓝色两种成份的色。
在绿色中，将黄色的扩张感和蓝色的收缩感相中庸，将黄色的温暖感与蓝色的寒冷感相抵消。
这样使得绿色的性格最为平和、安稳。
是一种柔顺、恬静、潢足、优美的色。
1、在绿色中黄的成份较多时，其性格就趋于活泼、友善，具有幼稚性。
网页设计配色应用实例剖析精品PPT课件
• 黑色白色属于没有色相和饱和度、只在明度两极 的非色彩。两种极端强烈对比的只在明度上有区 别的颜色，与前面我们所说的三原色、对比色的 对比还是有较大区别的。
• 该页面只有两种非色彩搭配，即黑色白色，衬映 得该页面的设计元素也非常干净简练，旁边点缀 大小得当的文字元素减小该页面有可能因此产生 的单调感觉。
• 点睛色橙色和白色点缀下打破了平面平淡 的配色格局，眼前顿时一亮的感觉。
• 结论：
• 灰色调非色彩所构成的页面颇具有独 特的魅力，整个页面呈现出平稳缓和的气 质。两个点睛色橙色和白色起到调动配色 页面的作用。
• 灰色应用（同类灰色＋多种颜色）网页例图：
黑色系
• 黑色是暗色，是纯度、色相、明度最低的非彩色。象征着 力量，有时感觉沉默、虚空，有时感觉庄严肃穆，有时又 意味着不吉祥和罪恶。自古以来，世界各族都公认黑色代 表死亡、悲哀黑色具有能吸收光线的特性，别有一种变幻 无常的感觉。
• 对于单独的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。黄色较特殊，是由红色 加SB模式的B也能看出浅灰色在明度上较高，部 分渐变的深灰色在页面上所占用的面积也不少，
另一点睛色黑色的作用就是使明度色阶跨度加深、 明确，整个页面呈现灰蒙蒙的感觉得以减弱。
• 结论：
网页配色之颜色设计-----紫色系
网页设计配色应用实例剖析—紫色系（1）贝塔网络发布时间：2007-12-18 13:01:27评论：0 点击：41 紫色是一种在自然界中比较少见的颜色。
象征着女性化，代表着高贵和奢华、优雅与魅力，也象征着神秘与庄重、神圣和浪漫。
另一方面又有孤独等意味。
紫色在西方宗教世界中是一种代表尊贵的颜色，大主教身穿的教袍便采用了紫色。
紫色的明度在有彩色的色度中是最低的。
紫色的低明度给人一种沉闷、神秘的感觉。
在紫色中红的成份较多时，显得华丽和谐。
紫色中加入少量的黑，沉重、伤感、恐怖、庄严的感觉。
紫色中加入白，变得优雅、娇气，并充满女性的魅力。
紫色通常用于以女性为对象或以艺术作品介绍为主的站点，但很多大公司的站点中也喜欢使用包含神秘色彩的紫色，但都很少做大面积使用。
不同色调的紫色可以营造非常浓郁的女性化气息，在白色的背景色和灰色的突出颜色的衬托下，紫色可以显示出更大的魅力。
下面我们根据紫色系不同属性的邻近色、高纯度低纯度配色、相对对比色等色彩搭配做不同的举例分析。
→ 紫色高纯度网页例图：http:// 紫色系分析：（高纯度对比：同类紫色+同类对比色）紫色的HSB数值H色相为300度时是正紫色。
上图的HSB模式S数值显示，上组颜色饱和度基本都比较高，加上部分较高的明度组合，使该页面异常奢华艳丽。
辅色调之一的黄色是紫色强度最高的对比色，主、辅色面积的大小不同是形成视觉冲击力最大的主要原因。
值得一提的是右下脚的浅蓝色的运用，它在整个页面配色上是很谦逊的角色，但却既突出上面的文字内容，又不张扬的压抑住其他颜色的配色，属于丰富于页面的辅助作用。
如果把它试换成别的颜色似乎还是没有这个浅蓝色效果好。
另一辅助色浅紫红色又称粉红色，粉红色主要用于包含少女在内的女性站点。
因为从明亮到浅白色调的粉红色能够表现出可爱、乖巧的感觉，这里只做少量运用。
其他点睛色使用得虽多但面积很小，主要是主色调紫色附近的过渡色，例如群青、青莲、玫瑰、红色等点缀，闪亮耀眼，增强页面的视觉感染力，有渲染出华丽凸显现代气息的作用。
电子商务网站建设色彩分析
辅助色只在明度上降低，让页面多了些层次感、 空间感。白色块面增强了视觉节奏感.
点睛色恰到好处体现"点睛"这一妙笔，极尽诱惑 力，整个页面顿时生动提神起来，增强了页面主 题的表达力。
网 页 色 彩 设 计 实 例 分 析
蓝色系实例
GO
橙色系实例
GO
绿色系实例
GO
请在任意处单击观看详细内容
蓝色系实例分析
蓝色是色彩中比较沉静的颜色。象征着永恒与深邃、 高远与博大、壮阔与浩渺，是令人心境畅快的颜色。
蓝色是冷色调最典型的代表色，是网站设计中 运用得最多的颜色，也是许多人钟爱的颜色。
蓝色系实例2:蓝色浅蓝色网页
橙色系实例1:橙色网页
互动1:该网页中主 互动2:该网页中辅 色调是什么色 ? 互动3:该网页中点 色调是什么色? 睛色是什么色 ? 互动 4:试述该网页 的特色?
点睛色
辅色调
主色调
请在任意处单击观看详细内容
结论： 主色调正橙色,整个页面的视觉刺激耀眼强烈。 选取了三种面积相当又使用最少的颜色为点睛色， 使页面生动的同时又运用于导航位置，从而达到 突出主题的效果。
绿色系实例1:绿色网页
主色调 点睛色
互动1:该网页中主 互动2:该网页中辅 色调是什么色 ? 互动3:该网页中点 色调是什么色? 睛色是什么色 ? 互动 4:试述该网页 的特色?
辅色调
辅色调
请在任意处单击观看详细内容
结论：
主、辅色调属同类色，仅有明度变化，明显体现 出页面的色彩层次感来。达到充分展现产品主题 的目的。
点睛色 辅色调 背景色 辅色调 互动1:该网页中主 互动2:该网页中辅 色调是什么色 ? 互动3:该网页中点 色调是什么色? 睛色是什么色 ? 互动 4:试述该网页 的特色?
网页设计中橙色系运用案例分析
网页设计中橙色系运用案例分析网页设计中橙色系运用案例分析橙色在网页中的使用范围非常广泛，可以通过变换色调营造出不同分气氛，不仅仅能表现出青春活力，也能达到一个稳重的效果。
橙色的波长居于红和黄之间，具有健康、富有活力、勇敢自由等象征意义，为了让大家对橙色有更好的理解，下面分别对不同类型网页进行分析。
橙色又称之为橙黄或者是橘色，它的穿透力仅次于红色，色感较红色更暖。
在网页设计中橙色是十分活泼的色彩，给人以华贵而温暖、兴奋而热烈、欢乐与活力的感觉，也是令人振奋的颜色。
一.食品饮食类网页设计案例分析推荐案例：橙色+黄色+深橙色整个页面以橙色为主，通过不同明度和纯度的“黄”进行调和，页面非常融洽而不显单调。
很好的突出了的图片，食品图片色调也是相近的，故不会非常的突兀。
而利用白色将网页分层，有层次感。
二.娱乐类网页案例分析推荐案例：深橙色+土黄色+黄色整个页面是利用深橙和浅黄色的搭配来展现的，使页面看起来更加的温暖，深色的铺垫，黄色的'文字，达到一种突出而不突兀的视觉效果，赋予了网站生命力。
三.电子商务网站案例分析推荐案例：橙色+卡其色+绿色这一个案例使用的颜色相对较多，而橙色的导航辅佐明度较高的卡其色，不会显得非常凌乱，反而更加有特色，很活泼。
加上利用一些绿色的按钮来点缀页面，页面就显得不那么单调，有万橙之中一点绿的视觉效果。
四.科技发展机构网站案例分析页面用的色彩相对较杂，但让人感觉乱中有序。
大家可以注意到，页面都是采用深红色作为文字，而橙色出现在红色文字的附近，例如顶部的橙底红字，大标题红色小标题橙色，这些元素就使页面乱中有序。
总结：橙色运用的非常多，调整饱和度、纯度都可以达到非常好的视觉效果，当然在视觉冲击力的同时，可适当采用少许对比色调和缓和于视觉，从而削弱视觉的疲劳度。
下载全文。
网页效果图设计之色彩配色方案及实例说明
网页效果图设计之色彩配色方案及实例说明：红橙黄绿蓝紫黑白灰1 红色是最具有视觉冲击力的色彩；暗示速度和动态；可以刺激心跳速度、加快呼吸、刺激食欲；红色的衣服使人身形显大；红色的车最容易被偷，如图所示。
1.1 红色的具象联想火焰、鲜血、西红柿、西瓜瓤、太阳、红旗、口红、中国国旗。
1.2 红色的正面联想激情、爱情、鲜血、能量、热心、激动、热量、力量、热情、活力。
1.3 红色的负面联想侵略性、愤怒、战争、革命、残忍、不道德、危险、幼稚、卑俗。
1.4 红色的文化域在非洲，红色代表死亡。
∙在法国，红色代表雄性。
∙在亚洲，红色代表婚姻、繁荣、快乐。
∙在印度，红色是士兵的颜色。
∙在南非，红色是丧服的色彩。
1.5 实例说明为中企动力8周年主题网站（/8tm/index.html）网页截图，整个页面使用红色作为主色调，给人以喜庆、热闹的感受。
如图所示.1.6 红色系配色方案红色系的配色方案如下，如图所示：1. 在红色中加入少量的黄，会使其热力强盛，趋于躁动、不安。
2. 在红色中加入少量的蓝，会使其热性减弱，趋于文雅、柔和。
3. 在红色中加入少量的黑，会使其性格变的沉稳，趋于厚重、朴实。
4. 在红中加入少量的白，会使其性格变的温柔，趋于含蓄、羞涩、娇嫩。
2 橙色橙色能促进食欲；橙色的房间代表了友善，带给人愉快，能促使人谈话和思考；橙色能够用来强化视觉，这就是为什么海滩救生员的救生服采用橙色的原因，如图所示。
2.1 橙色的具象联想秋天、桔子、胡萝卜、肉汁、砖头、灯光。
2.2 橙色的正面联想温暖、欢喜、创造力、鼓舞、独特性、能量、活跃、模拟、社交、健康、奇想、活力、华美、明朗、甘美。
2.3 橙色的负面联想粗鲁、时髦、喧嚣、嫉妒、焦躁、可怜、卑俗。
2.4 橙色的文化域∙在爱尔兰，橙色代表新教运动。
∙在美洲土著文化里，橙色代表学习和血缘关系。
∙在荷兰，橙色是国家的颜色，因为荷兰的君主来自于Orange-Nassau家族。
∙在印度，橙色代表印度教。
网页设计配色
一、网页设计配色系列简析--基础部分网页设计配色基础：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是颜色分为色相、饱和度、明度三个因素。