6网页设计配色应用实例剖析—绿色系.docx

网页设计配色应用实例剖析——绿色系绿色在黄色和蓝色（冷暖）Z间，属于较中庸的颜色，这样使得绿色的性格最为平和、 安稳、大度、宽容是一种柔顺、恬静、满足、优美、叉欢迎之色也是网页中使用最为广 泛的颜色之一绿色与人类息息相关，是永恒的欣欣向荣是的口然Z色，代表了牛命与希望，也充满了 青春活力，绿色象征着和平与安全、发展与生机、舒适与安宁、松弛与休息，有缓解眼 部疲劳的作用它本身具有一定的与口然、健康相关的感觉，所以也经常用于与口然、健康相关的站点 绿色述经常用于一些公司的公关站点或教育站点绿色能使我们的心情变得格外明朗黄绿色代表清新、平静、安逸、和平、柔和、春天、 青春、升级的心理感受下血我们根据绿色系不同属性邻近色、同类色的高纯度低纯度、对比色等色彩搭配做不 同的举例分析一、绿色网页例图：♦主色调总吾色背杲色R40w tor• BG2CM5 90%a noBfiOUG.130 20B UB ATMB57辅色调4网页设计与配色丈例分析〉绿色系分析：从上图的主色调、辅色调HSB模式的数值可看出，这两中颜色只是在明度上有区别， 其显示的色相与饱和度是一样的正绿色是120度，这两种颜色从RGB数值上看，都不同 程度的混合了其他少许颜色，因此离止绿色稍有些偏差。

市于绿色本身的特性，所以整个网 页看起来很安稳舒适辅助色只在明度上降低，让页而多了些层次感、空间感白色块面使得绿色的特性发挥到最好的状态并增强了视觉节奏感点睛色恰到好处的体现出了〃点睛〃这一妙笔，极尽诱惑力，整个页面顿时生动提神起来, 增强了页面主题的表达力结论：主、辅色调是属于同类色绿色系，通过不同明度的变化，能较递增缓和变化同吋却也较 明显的体现出页回的色彩层次感來如果不是通过数值来分析判断，可能会有些朋友凭经验 判断，容易误认为这两种颜色除了明度外有可能纯度会有所不同，这时候适当的使用数值模 式会很容易得到止确的结论的整个页而配色很少：最大色块的翠绿，第二而积的口色，第三而积的深绿色，但得到的 效果却是强烈的、显眼的，达到充分展现产品主题的H的深绿色给人茂盛、健康、成熟、稳重、生命、开阔的心理感受二、绿色高纯度网页例图：A E wwy

人而积明度稍低的黄绿色为主要色调，饱和度却非常高，达到了 100%,辅助色使用了提高 明度的嫩绿色和白色，这两种辅色除了增加页而的层次感的同时，还能让整个页而配色有透 亮的感觉，增强了绿色的特性背景深褐色无疑把前景的所有纯色烘托得都解•眼丁-舞台上该页回有两组小小的对比色，一组是黄绿耳橙红色，一组是橙黄色与天蓝色，这两组配 色严格的來说不算对比色，因为色彩多少有些偏差虽然它们的饱和度降低，但在这个页回 中足以构成了最响亮的色调，把整个页面烘托得非常活跃、鲜明结论：主、辅色调黄绿色大而积使用并不刺目，反而使得页而看起来很有朝气、活力适当 运用不同纯度的不是相当严格意义上的对比色系组合时，通常能起到的主耍作用是主次关系 明确不“标准”的对比色系对比特性虽然减弱，页血色彩看起来容易协调、柔和，但一样 能突出主题主色调辅色调点牯色背量色R 18SH87*R B0HWR223h wrR241G2Z3S 38%5 80%G0S 100%G2O2S 77%B0 87%B36B 70%B49B87UB56B95%三、同类色浅绿色网页例图:《网页设计与配色实例分析》绿色系分析：（同类色浅绿色）主色调绿色属性是明度很高的浅绿色，前面提到过，通常情况下明度高饱和度就降低, 饱和度低页面色彩度就降低，除非颜色木身有自己的特性，加上人面积的辅助色白色，整个 页而看起來很清淡、柔和、宁静，其至有温馨的感觉。

页而中使用了渐变的浅绿色，使得幣 个页而视觉上更加柔和舒适尽管点睛色只在主要标志上出现，按钮也只有少许一点，但也给整个页而的色彩带來些 亮笔尤其是红色的HSB模式的H数值显示颜色接近丁•正红色，饱和度达到最高值另一 个点睛色中黄色，在页面视觉上呈绿色与红色这一组对比色起到缓和视觉的作用因为在色 轮表上，黄色正是在绿色和红色Z间的过渡色结论：浅绿色系有优雅、休息、安全、和睦、宁静、柔和的感觉渐变的效果更能加深这种印象但页而配色上浅色过多吋，整个页而容易呈现发〃灰〃 的感受，这就需耍适量的添加纯度稍高的颜色例如左下角的辅助色绿色块，适当的鲜艳的点 睛都能很好的解决这一问题四.绿色弱对比网页例图:加,of4主色调背杲色R 149H 74*H冷R 70M 192*R 1MH(TG 1MG91S90%G 153S4%G 148,91 ■B 31B 73%B99 36%S 148B 56%5 143 62%辅色调 点睹色《网页设计与配色实例分巾绿色系分析：（黄绿色+弱对比）从HSB模式的数值上看，主色调是接近于黄色的基础上加入了少许绿色在里面，饱和 度和明度降低，色彩看起来较柔和辅色调墨绿色的绿色的倾向稍高，饱和度也较高，只是 明度降低，该色看起來踏实沉稳。

点睛色红色H数值为零度，呈正红色，但是该颜色饱和度和明度降低，而红色本身的 色度比黄绿色要暗不少，因此颜色稳重另一点睛色蓝绿色，明度饱和度都很低，在页而配 色里似乎没有点睛感觉，更多的是呈辅助状态结论：主色调是相对比较鲜亮的颜色，而辅助色和点睛色是属丁•比较沉稳的颜色，页面通过大 小色块的对比提高视觉的反差力度，增强页血的感染力由于整个页而的饱和度整体稍微降低，因此该贝而配色较协调、缓和五、同类绿色+多种点睛色例图:主色调捕色调点暗色 背員色R 153 75*R 204M 80*H 仙 K HCTG2CMS.100%G255seo%seo%5 97% S 100%S 100%B09 80%B 102B 100%B 100%8 88% 9 100% B 78%《网页设计与配色实例分析》绿色系分析：（绿色配色：同类绿色+多种点睛色）主要色调HSB模式H数值显示75度，依IH是色轮表甲倾向于黄色区域方位边缘的绿色, 呈现出的黄绿色调辅色调在明度上有些提亮，与主色调形成较强的对比点睛色里所使用的对比色组合有两组，红色与绿色，蓝色与橙黄色，其中黄色是介于暖 色（橙黄、红色）和冷色（绿色、蓝色）的过渡色也是调和色。

结论：通过上面的分析大家可以看到，该网页的配色不少，而且还有两组对比色在内，但是页 曲配色也很I办调原因从下面抽取的色块可以看出來，是一个过渡柔和的色轮表：以 黄色为中界一边是较浅的黄绿到绿色再到蓝色，另一边是橙黄再到红色原因Z二，点睛色 毕竟是扮演着点睛色的角色，有主色调和辅色调大面积的控制，即便再多些点睛色也不至于 很快干扰到页而的整体配色整个页而保证了协调、不凌乱的步调，但是乂能把商业网站的热闹氛围体现得很好的渲 染此种配色方法值得我们学习借鉴六、绿色邻近色应用网页例图:主色调 辅色调 点睹色 背員色R 123M 100# 2O8H 106-R93HH2O6・M 2V H 32$H 137*G2235 67%O 245S 20%G214S64%S96%8 90% 5 99%S 100*8 73B 87%S 197 9 96%B255B 100%9 70%B dO B 47%B55%《网页设计与配色实例分析》绿色系分析：（邻近色配色：绿色+蓝色）全页使川的主要色调基本上是属于明度较高饱和度较低的颜色，其中还使川了渐变色缓 和的过渡，因此页面看起来舒服协调主色调是饱和度较高的翠绿色运用于背景色，儿乎是调节于幣个页而的关键色。

如果没 有这一背景色块，整个页而容易发灰还有右边的粉绿大块而积稍多，有些灰的感觉，好在 询景的文章使用了色度明度稍深的蓝色压住，稍显好些，关键还是有白色的箭头很好的把粉 绿和蓝色文字的色阶拉开了距离左边的照片清晰月•纯度较高也对整个页面配色起到一定的 调节作用点睛色主要是标志的颜色，如果可以忽略不计，页回配色更趋于平淡结论：明度较高饱和度较低的颜色，如果没有明度较深饱和度较高的颜色进行勾勒或者点缀, 这个页而配色看起来容易发灰七.绿色对比色网页例图:辅色调点睹色R 254H XVR 205 H 197*R 222 M SR2X HV主色调背員色0 177 879%G231 S 15%G 239 3 12% G93S96%B 37 B 69%B 211 B94%B61 B 90%《网页设计与配色实例分析1绿色系分析：（对比色配色：绿色+红色）主色调是有点黄色倾向的绿色，从HSB数值上可以看到H为98度,绿色特性较明显了 辅助色则是三个浅色系，起到调和整个页面色彩的作川粉红和粉绿色分别取的是页面 绿色红色通过提髙明度而得，因此整个页而色彩前后呼应、配色调和点睛色红色的HBS模式H数值351度，在色轮表上偏向于紫色方位，因此倾向于冷红 色，色度上稍有些刺目和艳丽。

主色调绿色和点睛色红色所放置的位置，让页面导航区域和内容区域视觉引导较为分 明：主色调绿色的设计亮点既川丁导航又很流畅口然的融合到背景，浑然一体；这里尤其是 点睛色红色放置于背景的处理很独到，烘托突出丁•前景内容，在众多网页设计中并不多见结论：整个页而的配色取色于标志色，量身定做的感觉适当的运用对比色有强调的感觉，但贝而配色处理上并不强烈、耀眼，因为使用了口色 及其相应的提高明度的粉色做视觉的缓和处理本部分小节：• 绿色是缓和健康的颜色，HSB数值H色和为120度时是止绿色大家通过以上的 网页实例可以看到，偏向于黃色方位的绿色运川得最多，也就更受到人众的欢迎纯正的正 绿色在视觉感受上可能稍微显得有些色度较低的牛换，配色难度稍人不同的黄绿色饱和度、 明度的不同变化可以表达不同主题的页而效果• 点睛色可以是儿种，也可以是不同对比色的组合，有的起到丰富并活跃页而配色的 视觉节奏，有的起到调和整体页回配色的作川辅助色通常是同类色系或者邻近色系，起 到辅助并烘托主色调的作用辅色调和主色调分别在不同的页面做为唯一高纯度色的时候, 能够起到挽救于整个页面发灰的作用• 当整个页而配色明度太高色度降低时候，页而容易呈现发灰的感觉，可以适当的使 用少许纯度较高或者明度较低的色系来加以改善。