动网官方论坛电脑网络Web页面设计 → 典型配色方案

动网论坛商业版 享受贴心服务 创新时代、PHP2.0++强劲推出 动网空间买2送1,国际域名78元 动网合租服务器 专业+品质 隆重推出
动网ASP8.2最新下载 站长使用手册(ASP8.1\8.2) 动网论坛新春风格2011下载(适用于ASP8.3.0) 千款小游戏尽你玩
泡泡玩最新网页游戏 再接再厉 众望所归-----动网论坛ASP8.3正式发布 游戏美妹,挑战你的眼球 体验我们自己的游戏,建立属于我们的家族

  共有308440人关注过本帖树形打印复制链接

主题:典型配色方案

帅哥哟,离线,有人找我吗?
のJiaLe
  1楼 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 真相只有One个
等级:版主 帖子:4404 积分:17835 威望:1 精华:8 注册:2003/6/2 19:37:00
典型配色方案  发帖心情 Post By:2008/7/12 20:28:03 [只看该作者]

您无权查看精华帖子

[本帖被加为精华]
动网论坛新春风格2011下载(适用于ASP8.3.0)  回到顶部
帅哥哟,离线,有人找我吗?
のJiaLe
  2楼 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 真相只有One个
等级:版主 帖子:4404 积分:17835 威望:1 精华:8 注册:2003/6/2 19:37:00
  发帖心情 Post By:2008/7/12 20:28:27 [只看该作者]

橙色系

橙色
橙色系分析:
主色调橙色HSB数值的H表示色相,显示的是30度,而30度正是橙色显示特征最标准的颜色——正橙色。饱和度和亮度同时达到最高值,因此整个页面的视觉刺激是极其耀眼强烈的。
这里选取了三种面积相当又是整个页面使用得最少的颜色为点睛色,使页面生动的同时又运用于导航位置,从而达到突出主题的效果。从HSB数值上看它们的明度纯度相对较低,与明度纯度较高的背景正橙色形成鲜明的对比。
通过范围较大的背景白色、前景图片灰白色和小细节前景白色文字制造出明快气氛的同时,又呼应统一于整个页面。
辅助色在这里是橙色与白色的过渡色。
→ 橙色网页例图:

图片点击可在新窗口打开查看



[此贴子已经被作者于2008-7-12 20:29:01编辑过]

动网合租服务器 专业+品质 隆重推出  回到顶部
帅哥哟,离线,有人找我吗?
のJiaLe
  3楼 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 真相只有One个
等级:版主 帖子:4404 积分:17835 威望:1 精华:8 注册:2003/6/2 19:37:00
  发帖心情 Post By:2008/7/12 20:29:30 [只看该作者]

深橙红色系


→ 深橙红色网页例图:

图片点击可在新窗口打开查看




深橙红色系分析:
从色相度中可以知道0度为正红色,30度为正橙色,而主色调的HSB数值H显示22度可知,该深橙红色是橙色基础上加入少许邻近色红色,整体上降低了明度而得,因为红色本身较橙色明度低,因此这里橙红色的明度呈现出较低状态。
辅助色选取了明度相对于主色调更低的三种颜色,前面两种饱和度都较高,最后一种灰蓝色由于明度较高因此饱和度降低,是主色调与前面两种辅助色的协调色。
这个页面背景色运用了纹样,是以目前选取的主色调颜色和明度较暗的深红色结合而得,使得明度稍暗。
数值上看,主色调也就是背景色的饱和度较高,但是由于降低了明度,颜色变得较沉稳。辅助色RGB数值显示,添加了适量的其他颜色,G和B数值区别不大,因此饱和度降低,颜色趋于柔和稳定。点睛色的加入和提亮,使页面视觉效果得到强化

动网.Net论坛官方讨论区  回到顶部
帅哥哟,离线,有人找我吗?
のJiaLe
  4楼 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 真相只有One个
等级:版主 帖子:4404 积分:17835 威望:1 精华:8 注册:2003/6/2 19:37:00
  发帖心情 Post By:2008/7/12 20:29:56 [只看该作者]

浅橙色同类色


→ 浅橙色同类色网页例图:

图片点击可在新窗口打开查看




浅橙色同类色分析:
从主色调和辅色调在HSB数值H显示的数值是36可以看出,该页面色调是在同一种橙色的基础上只在明度上发生了变化。由于主要色调是浅橙色,明度越高饱和度越低,页面上减弱了饱和度较高的橙色特性,整个网页呈现出柔和自然稍有些发灰的调子。
该网页是在橙色这一个颜色上做不同明度黑白灰色阶的柔和变化,属于单色调,配色非常的单纯。色阶平稳,同时存在着不够醒目的状态。白色在这里是起到了拉开主色调和辅色调空间距离,增强辅色调橙色的特性,使整个稍许有些发灰的页面明快了不少。但也由于白色属于非色彩,只在明度上呈最高数值而无彩度,不能给页面带来彩度所具有的鲜活靓丽的感觉,另一方面却也呈现出质朴的感受。

动网论坛新春风格2011下载(适用于ASP8.3.0)  回到顶部
帅哥哟,离线,有人找我吗?
のJiaLe
  5楼 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 真相只有One个
等级:版主 帖子:4404 积分:17835 威望:1 精华:8 注册:2003/6/2 19:37:00
  发帖心情 Post By:2008/7/12 20:30:53 [只看该作者]

邻近色橙色网页例图:http:// www.tide.com

图片点击可在新窗口打开查看




橙色系邻近色(黄色+橙色+橙红色)分析:
虽然第一眼看上去似乎色调上变化很多,但该网页的色彩构成主要是由黄色和橙色这两种邻近色构成的,通过不同的明度和纯度的变化而得到更为丰富的色阶,它们是浅黄色、黄色、橙色、橙红通过不同的形状面积,位置变化而得。从HSB数值中的H可以看出属于暖色范畴,三个色相的倾向不是很明显,以至于色彩呈现较规律、缓和。由于不同数值的明度表达,纯度也做出了不同的数值变化。
浅色在这里主要起到更调和主色调和点睛色的色彩过渡作用。点睛色在这里起到强调整个页面的华丽感,增强整个页面彩度的作用。

动网合租服务器 专业+品质 隆重推出  回到顶部
帅哥哟,离线,有人找我吗?
のJiaLe
  6楼 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 真相只有One个
等级:版主 帖子:4404 积分:17835 威望:1 精华:8 注册:2003/6/2 19:37:00
  发帖心情 Post By:2008/7/12 20:31:21 [只看该作者]

橙色系对比色(橙色+蓝色)


→ 对比色橙红色应用网页例图:www.rastifilms.com.ar

图片点击可在新窗口打开查看




橙色系对比色(橙色+蓝色)分析
HSB数值中的H色相显示主色调橙红色为26,我们知道正红色的H为0,正橙H为30,主色调橙红色是往0偏移而得。正蓝色是240,而该点睛色蓝色为192,往绿度偏移,在RGB中的数值G160也能看出来,因此蓝色的特性不是很强。但由于橙红色的明度饱和度达到最高值,因此尽管蓝色不是正蓝,但它的特性得到了很大程度的发挥。
此种橙蓝对比色中的蓝色调配,比较少见,让人很容易记住它。而橙红色的饱和度明度都非常高,刺激度强,属于让人不可久视的颜色。
介于橙红色和蓝色之间,与蓝色面积相当的白色,起到调和对比色橙红与蓝色之间关系的作用。

千款小游戏尽你玩  回到顶部
帅哥哟,离线,有人找我吗?
のJiaLe
  7楼 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 真相只有One个
等级:版主 帖子:4404 积分:17835 威望:1 精华:8 注册:2003/6/2 19:37:00
  发帖心情 Post By:2008/7/12 20:31:42 [只看该作者]

→ 橙色低对比应用网页例图:http:// www.colourpixel.com


图片点击可在新窗口打开查看




橙色系低对比度(橙色+绿色)分析:
如果不看数值参数,刚一开始看会以为这是一组纯度较低的颜色。HSB数值H显示主色调为正橙色,而黄绿色的明度较低且色相倾向不够明确,加之背景有少许的暗橙色纹样,整个页面没有高亮度白色点缀衬托,使得纯度的彩度不够确切,就很容易造成了该页面纯度较低的错觉。
整个页面最亮的颜色除了“书本”最亮色浅黄色外,就是点睛色黄色了。我们知道黄色是所有彩度色中明度最高的颜色,不同明度纯度的黄色系让整个页面明亮了不少,它是整个页面明度色阶的最高调。
黄绿色的出现,让本只有邻近色的橙色系列多了些内容,页面配色丰富不少、视觉节奏多了些变化。

动网合租服务器 专业+品质 隆重推出  回到顶部
帅哥哟,离线,有人找我吗?
のJiaLe
  8楼 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 真相只有One个
等级:版主 帖子:4404 积分:17835 威望:1 精华:8 注册:2003/6/2 19:37:00
  发帖心情 Post By:2008/7/12 20:32:10 [只看该作者]

橙色系高纯度高对比度(橙红色+绿色)


→ 橙色高纯度对比应用网页例图: www.aliveis.com

图片点击可在新窗口打开查看




橙色系高纯度高对比度(橙红色+绿色)分析:

与上组的橙色绿色相比,这组颜色强烈而刺激,色彩倾向无疑明确了很多。主色调橙红色往红色倾向,而红色的对比色是绿色,因此整组颜色有强烈的对比效果。从HSB数值H上看,除了蓝色外,其余几种颜色纯度都非常高,加上又是近于红绿对比色。页面的刺激强度是可想而知的强烈。
黄色是中间色,起到过渡对比色作用,在这组色里属于调和色。蓝色出现在产品图案上,引导主次关系,增强视觉的注目点。
专题来源:天极设计




最新的网页游戏资讯一网打尽  回到顶部
帅哥哟,离线,有人找我吗?
のJiaLe
  9楼 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 真相只有One个
等级:版主 帖子:4404 积分:17835 威望:1 精华:8 注册:2003/6/2 19:37:00
  发帖心情 Post By:2008/7/12 20:32:38 [只看该作者]

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

  绿色与人类息息相关,是永恒的欣欣向荣是的自然之色,代表了生命与希望,也充满了青春活力,绿色象征着和平与安全、发展与生机、舒适与安宁、松弛与休息,有缓解眼部疲劳的作用。
  它本身具有一定的与自然、健康相关的感觉,所以也经常用于与自然、健康相关的站点。绿色还经常用于一些公司的公关站点或教育站点。
  绿色能使我们的心情变得格外明朗。黄绿色代表清新、平静、安逸、和平、柔和、春天、青春、升级的心理感受。
  下面我们根据绿色系不同属性邻近色、同类色的高纯度低纯度、对比色等色彩搭配做不同的举例分析
绿色网页例图
图片点击可在新窗口打开查看
绿色系分析:
  从上图的主色调、辅色调HSB模式的数值可看出,这两中颜色只是在明度上有区别,其显示的色相与饱和度是一样的。正绿色是120度,这两种颜色从RGB数值上看,都不同程度的混合了其他少许颜色,因此离正绿色稍有些偏差。由于绿色本身的特性,所以整个网页看起来很安稳舒适。
  辅助色只在明度上降低,让页面多了些层次感、空间感。
  白色块面使得绿色的特性发挥到最好的状态并增强了视觉节奏感。
  点睛色恰到好处的体现出了"点睛"这一妙笔,极尽诱惑力,整个页面顿时生动提神起来,增强了页面主题的表达力。

动网.Net论坛官方讨论区  回到顶部
帅哥哟,离线,有人找我吗?
のJiaLe
  10楼 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 真相只有One个
等级:版主 帖子:4404 积分:17835 威望:1 精华:8 注册:2003/6/2 19:37:00
  发帖心情 Post By:2008/7/12 20:32:58 [只看该作者]

绿色高纯度网页例图
图片点击可在新窗口打开查看
绿色系分析: (高纯度配色:绿色+对比色组合)
  HSB数值H显示60度为正黄色,该主、辅色调只向绿色倾斜了一丁点--H为75度。大面积明度稍低的黄绿色为主要色调,饱和度却非常高,达到了100%,辅助色使用了提高明度的嫩绿色和白色,这两种辅色除了增加页面的层次感的同时,还能让整个页面配色有透亮的感觉,增强了绿色的特性。背景深褐色无疑把前景的所有纯色烘托得都耀眼于舞台上。
  该页面有两组小小的对比色,一组是黄绿与橙红色,一组是橙黄色与天蓝色,这两组配色严格的来说不算对比色,因为色彩多少有些偏差。虽然它们的饱和度降低,但在这个页面中足以构成了最响亮的色调,把整个页面烘托得非常活跃、鲜明。

动网.Net论坛官方讨论区  回到顶部
总数 178 1 2 3 4 5 6 7 8 9 10 下一页 ..18