绿色风格网站配色方案实例讲解

绿色在黄色和蓝色(冷暖)之间,属于较中庸的颜色,这样使得绿色的性格最为平和、安稳、大度、宽容。是一种柔顺、恬静、满足、优美、受欢迎之色。也是网页中使用最为广泛的颜色之一。

绿色与人类息息相关,是永恒的欣欣向荣是的自然之色,代表了生命与希望,也充满了青春活力,绿色象征着和平与安全、发展与生机、舒适与安宁、松弛与休息,有缓解眼部疲劳的作用。

它本身具有一定的与自然、健康相关的感觉,所以也经常用于与自然、健康相关的站点。绿色还经常用于一些公司的公关站点或教育站点。

绿色能使我们的心情变得格外明朗。黄绿色代表清新、平静、安逸、和平、柔和、春天、青春、升级的心理感受。

下面我们根据绿色系不同属性邻近色、同类色的高纯度低纯度、对比色等色彩搭配做不同的举例分析。

绿色网页例图:http://www.bacardimojito.com

绿色系分析

从上图的主色调、辅色调HSB模式的数值可看出,这两中颜色只是在明度上有区别,其显示的色相与饱和度是一样的。正绿色是120度,这两种颜色从RGB数值上看,都不同程度的混合了其他少许颜色,因此离正绿色稍有些偏差。由于绿色本身的特性,所以整个网页看起来很安稳舒适。
辅助色只在明度上降低,让页面多了些层次感、空间感。
白色块面使得绿色的特性发挥到最好的状态并增强了视觉节奏感。
点睛色恰到好处的体现出了”点睛”这一妙笔,极尽诱惑力,整个页面顿时生动提神起来,增强了页面主题的表达力。

结论

主、辅色调是属于同类色绿色系,通过不同明度的变化,能较递增缓和变化同时却也较明显的体现出页面的色彩层次感来。如果不是通过数值来分析判断,可能会有些朋友凭经验判断,容易误认为这两种颜色除了明度外有可能纯度会有所不同,这时候适当的使用数值模式会很容易得到正确的结论的。

整个页面配色很少:最大色块的翠绿,第二面积的白色,第三面积的深绿色,但得到的效果却是强烈的、显眼的,达到充分展现产品主题的目的。

深绿色给人茂盛、健康、成熟、稳重、生命、开阔的心理感受。

绿色高纯度网页例图:http://www.marocfruitboard.com

绿色系分析: (高纯度配色:绿色+对比色组合)

HSB数值H显示60度为正黄色,该主、辅色调只向绿色倾斜了一丁点–H为75度。大面积明度稍低的黄绿色为主要色调,饱和度却非常高,达到了100%,辅助色使用了提高明度的嫩绿色和白色,这两种辅色除了增加页面的层次感的同时,还能让整个页面配色有透亮的感觉,增强了绿色的特性。背景深褐色无疑把前景的所有纯色烘托得都耀眼于舞台上。

该页面有两组小小的对比色,一组是黄绿与橙红色,一组是橙黄色与天蓝色,这两组配色严格的来说不算对比色,因为色彩多少有些偏差。虽然它们的饱和度降低,但在这个页面中足以构成了最响亮的色调,把整个页面烘托得非常活跃、鲜明。

结论

主、辅色调黄绿色大面积使用并不刺目,反而使得页面看起来很有朝气、活力。

适当运用不同纯度的不是相当严格意义上的对比色系组合时,通常能起到的主要作用是主次关系明确。不”标准”的对比色系对比特性虽然减弱,页面色彩看起来容易协调、柔和,但一样能突出主题。→ 同类色浅绿色网页例图 :http://shehouse.we.tv

绿色系分析:(同类色浅绿色)

主色调绿色属性是明度很高的浅绿色,前面提到过,通常情况下明度高饱和度就降低,饱和度低页面色彩度就降低,除非颜色本身有自己的特性,加上大面积的辅助色白色,整个页面看起来很清淡、柔和、宁静,甚至有温馨的感觉。

页面中使用了渐变的浅绿色,使得整个页面视觉上更加柔和舒适。

尽管点睛色只在主要标志上出现,按钮也只有少许一点,但也给整个页面的色彩带来些亮笔。尤其是红色的HSB模式的H数值显示颜色接近于正红色,饱和度达到最高值。另一个点睛色中黄色,在页面视觉上呈绿色与红色这一组对比色起到缓和视觉的作用。因为在色轮表上,黄色正是在绿色和红色之间的过渡色。

结论

浅绿色系有优雅、休息、安全、和睦、宁静、柔和的感觉。

渐变的效果更能加深这种印象。但页面配色上浅色过多时,整个页面容易呈现发”灰”的感受,这就需要适量的添加纯度稍高的颜色例如左下角的辅助色绿色块,适当的鲜艳的点睛都能很好的解决这一问题。

时间: 2024-10-02 11:50:26

绿色风格网站配色方案实例讲解的相关文章

自然风格的网站配色方案解析

自然风格的网站通常是由日常用品的颜色或自然界中的色彩搭配而产生的,利用红色的落叶.绿色的树叶.蓝色的天空和大海等颜色来配色非常重要;接下来我们来讲解有关自然风格的网站配色方案解析,带有红霞的黄色还能给人温暖.安定的感觉. 一.自然风格网站的典型案例解析 网站背景采用浅绿色,配上树叶及流水的自然景观搭配,给人宁静.和谐.自然的感觉. 网站整体使用了轻快的绿色,主题部分使用白色,整体清爽.自然. 网站使用了自然的绿色,展现宁静.和谐的环境与自由空间. 二.自然风格网站的配色方案推荐 自然风格网站的配

活泼风格的网站配色方案解析

活泼风格网站的颜色,其轻重感和明亮度之间的关系最为密切,鲜艳的高明亮度色彩给人轻快的感觉,但若过多使用,会让人略感烦闷枯煤;下面我们来讲解有关活泼风格的网站配色方案解析,若应用在狭小的空间,则可以达到延伸空间的效果;若同时再加上白色,还能增添清洁.明亮的感觉. 一.活泼风格网站的典型案例解析 网站采用灰色的背景,给人轻快的感觉,配上粉.绿.蓝等明亮的颜色,使页面活泼起来. 网站采用浅灰色为背景,给人轻松的感觉,蓝色的线条和淡淡的紫色.粉色搭配,增强页面的活泼感. 网站使用白色和灰色为背景,给人明

医疗保健类网站配色方案解析

由于生活水平的提高,人们对自身健康也越发重视,再加上网络的普及,人们随时都可以上网查询或学习医学和健康方面的知识.今天我们赤讲解有关医疗保健类网站配色方案,当然,众多的医药.生物科技公司.医院或个人也会将相关的知识发布到网络上,所以医疗保健方面的网站也越来越多. 一.医疗保健类网站的特点 医疗保健网站主要用于医疗.保健.生技等单位发布和宣传有关医学.健康方面的知识.网站的具体功能包括通过网络发布医疗保健咨询.医患互动交流.企业客户咨询回馈.健康资讯查询等.不同的医疗保健机构因为服务项目不同,所建

管理类网站配色方案解析

管理类网站所面对的用户是广大客户,因此,在网页设计上,最重要的是迎合大多数用户的审美要求.接下来我们来讲解有关配色方案解析,它要具有先进.严肃.结构分明等特点,与其他商业网站有很大的不同.因此,设计者要充分了解网站的实质内涵,这样才能设计出合适的管理网站配色方案. 一.管理类网站的特点 管理类的网站多用于用品的推广.介绍.专题等多方面的咨询,要突出它的开放性.易用性.实用性和安全性.因此,对设计者来说,要制作符合大众审美观念的管理网站,就要规划合理的配色方案. 色彩搭配清新 根据管理网站的性质和

网站如何配色及网站配色方案

网站设计只要懂一点点网页编辑的人我想都可以制作网站了,但一个网站制作的好坏就必须从多方面去考量了,一个是用户体验度,还有一个就是网页美工了,而网页美工特别讲究的就是网站配色方案,网页设计师策划一个网站需要经过反复多次的思考,而在决定网页配色方案时同样需要经过再三的思量.网站如何配色呢?一个成功的配色方案可以完美地体现出网站的主题及表达出网站的信息,更能表现出这个网站的内涵,当然,感觉是设计师的灵魂,没有感觉的设计师就如同一个没有灵魂的躯壳.但光凭感觉也不能够得到好的结果,所以就必须有一个科学合理

5款免费的优秀网站配色方案工具

网站的配色方案决定了访问者对网站的第一印象,有很多工具可以帮助选择合适的配色方案,本文为网站设计者介绍五款免费的优秀网站配色方案工具. 1. Kuler Kuler是一款倍受专业网页设计人员喜爱的工具,它在配色方案中增加了社会化媒体和网络因素,设计人员使用Adobe注册账号登陆后可以创建调色板并且互相分享,也可以根据自己的需求修改别人的调色板.颜色显示格式包括RGB,CMYK,LAB和HSV. 2. Color Palette Generator 创作灵感有时候来的很突然,也许偶然在网上看到的一

综合类网站配色方案解析

综合类网站是集新闻.娱乐.搜索引擎等多元内容于一身的大型网站,例如雅虎.新浪网等都属于综合型的入口网站,接下来我们来讲解有关配色方案解析 ,入口网站的概念最早源于搜索引擎Yah00.InfoSeek等大型入口网站,这些入口网站作为一种渠道,帮助Web用户快速寻找和猎取丰富的网络资源.随着科技的发展,综合网站广泛地应用于政府.中小企业.教育.图书馆等各个领域. 一.综合类网站的特点 从技术角度而言,综合类的入口网络是一种网络服务,通过检索.资讯提示等技术,从各类散布的资源中猎取所需要的内容,以固定

网站颜色论:创建属于自己的网站配色方案

在颜色论系列的前两部分,我们主要讨论了 颜色背后的意义 和关于 颜色的术语.尽管这些信息非常重要,但我相信很多人都非常想知道什么时候才开始进入讨论创建一些实质的配色方案. 好吧,本文,也就是本系列的第三部分将介绍这个问题.我们将从头开始讨论创建属于你自己的配色方案的方法.我们还将讨论传统的配色方案模式(例如单色设计,类比设计,互补设计等),以及如何创建自定义的并不严格基于一种模式的方案.在本文最后,你将学会使用工具和技巧为自己的设计项目创建漂亮的调色板.提高技能的最好方法是实践,因此为自己设定一

2015年最优秀的20款网站配色方案

  网页设计领域的业界良心Awwwards除了每天推荐好网站,定期做评比之外,还会在博客里面推荐各种网页设计的技巧和总结,今天的这篇文章最初是源于一个探索性的项目,项目结果炫酷然而乍一看并没有什么卵用,不过,如果将这个项目同最近选出的20个配色优秀的网站相互印证,足以看出时下配色的大趋势.当然,好人做到底,作者干脆把时下流行的基于Material Design 的配色工具连同常用而经典的配色工具一同推荐给你,这也构成了今天文章的三大部分.OK,正文开始~ 几周以前,供职于 Jam 3 的图像开发