网页设计中的色彩搭配.ppt

1、网页设计之色彩,目录,色彩的基本知识 色彩的形成 色彩的分类 色彩的构成元素 色相环 冷暖色系 同一色系 色相环色相关系 色彩的感觉 色彩的意向,网页色彩搭配 颜色在网站中的运用 网页色彩搭配原理 色彩使用技巧 色彩使用忌讳 大公司网站颜色使用例子,色,彩,基,本,知,识,色彩的形成,红、绿、蓝三种波长的光是自然界所有颜色的基础，光谱 中的所有颜色都是由这三种光的不同强度构成。这三种光本身各自独立，其中任何一种都不能由其余两种光混合产生。所以我们把这三种颜色的光称为“色光三原色”“三原色”,色彩是光照射在物体上而反射到人眼的一种视觉效应。 我们日常所见到的白光，实际是由红、绿、蓝三种波长的光组

2、成，物体经光源照射，吸收和反射不同波长的红、绿、蓝光，经由人的眼睛，传到大脑形成了我们看到的各种颜色，也就是说，物体的颜色就是它们反射的光的颜色。,色彩的分类,色彩的构成元素,色相 色彩的相貌，类似于人名，确切地表示某种颜色色别的名称。如：中国红，军绿色等 明度 颜色明暗深浅表现，各种颜色的不同明度。黄色明度最高，蓝紫色最低，红色为中间明度 颜色越浅 明度越高 颜色越深 明度越低,色彩的构成元素,纯度（彩度、饱和度） 色彩的纯净程度，鲜艳程序，表示颜色中含有色部份的比例 纯色+白色 明度 越高 饱和度越低 纯色+黑色 明度越低 饱和度越低 纯色+灰色 明度不变 饱和度越低 色调：色相、明度、饱

3、和度结合 到一起,分有彩色、无彩色 纯色+白色 浅色调 粉彩色调 纯色+黑色 深色调 暗色调 纯色+灰色 浊色调 浅灰色调,色相环,色相环，是以三原色为基础并把它做为主要色相，再两两混合成次要色相，两种次要色相混合，衍生而成（我们一般说的12色相环和24色相环就是如此）,冷暖色系,产生于人们生活经验与直接联想 同一色相中 明度越高，越冷 明度越低，越暖 色相环 暖色系： 红橙黄 冷色系： 蓝绿紫 中间色：黑白灰,同一色系,同一色相 不同明度 饱合度呈现现的色彩 （同一色系色彩进行配色最安全配色）,色相环色相关系,类似色 30-60度间的色彩 临近色 左右相临的色彩 对比色 120-150度色彩

4、 差异很明显，注意颜色面积，比例，明 度，饱和度上的配置，才能显现出活泼， 轻快的感觉 互补色 180度对角位置,色彩的感觉,色彩冷暖感觉 明度越高 越冷 如 粉红深蓝 清凉 也与配色面积有关 较小黄配冷 冷 较小黄配暖色 暖,色彩的联想，可以是具体的，也可以想象的，因每个人生活的经历等不同产生的联想也不同，以大多数人的联想为依据，这样所产生的形象误差会比较小 联想所产生的心理感觉 比如冷 、热（以大多数人为主）,色彩的感觉,色彩轻重感觉 明度越高 越轻 明度越低 越重 明度高，饱和度越低 越轻 明度低，饱和度越高 越重 冷轻- 暖重 女性网站 轻 温柔可爱 男性网站 重 稳重可靠 色彩爽朗郁

5、闷感觉 暖 爽朗 冷 郁闷 明度 越高 爽朗 明度 越低 郁闷 白色 爽朗 黑色 郁闷,色彩的感觉,色彩兴奋沉积感 兴奋感觉 让心情沉稳 暖兴奋 冷 沉稳 明度越高 越兴奋 越低越沉稳 饱和度越高 越兴奋 越低越沉稳 色彩华丽朴实感 饱和度越低越朴实 越高越华丽 色调 低明度暗色调与深 色调 朴实 高明度纯色调为主 华丽 色彩酸甜苦辣,色彩的感觉,色彩的酸甜苦辣 酸：蓝、绿、黄、橙黄 甜：黄、橙、粉红 、乳白 苦： 棕色、黑褐色、灰黑色 辣：红，黄、黄绿、绿,色彩的意向,红色是最具有视觉冲击力的色彩；暗示速度和动态；可以刺激心跳速度、加快呼吸、刺激食欲；红色的衣服使人身形显大；红色的车最容易被

6、偷 红色的具象联想火焰、鲜血、性、西红柿、西瓜瓤、太阳、红旗、口红、中国国旗。红色的正面联想激情、爱情、鲜血、能量、热心、激动、热量、力量、热情、活力。红色的负面联想侵略性、愤怒、战争、革命、残忍、不道德、危险、幼稚、卑俗。 红色的文化域在非洲，红色代表死亡。 在法国，红色代表雄性。 在亚洲，红色代表婚姻、繁荣、快乐。 在印度，红色是士兵的颜色。 在南非，红色是丧服的色彩。,色彩的意向,红色：热情、活泼、热闹、革命、温暖、吉祥、进取、活力、忠诚、危险、警示、引起注意、禁止等。 色相：大红、桃红、玫瑰红、砖红 橙色：光明、华丽、兴奋、活力、快乐、警示、提醒等。 色相：大黄、柠檬黄、土黄、柳丁黄、

7、米黄 绿色：和平、宁静、环保、通畅、正确、柔和、青春、安全、理想等。 色相：大绿、草绿、翠绿、橄榄绿、墨绿 蓝色：专业、睿智、科技、深远、永恒、城市 、朴实、寒冷、历练等。 色相：湖蓝、普蓝、天蓝、深蓝,色彩的意向,紫色：高贵、神秘、优雅、魅力、傲慢、柔软。 色相：正紫、耦合、贵族紫、葡萄紫、深紫 白色：纯结、天真、空灵、明快、弱小、朴素、神圣、恐怖、无味等。 灰色：质朴、睿智、大气、谦逊、平凡、中庸、寂寞、犹豫、消极等。 色相：浅灰、中灰、深灰、老鼠灰、蓝灰 黑色：神秘、严肃、崇高、坚实、诡异、黑暗、沉默、绝望、死亡、罪恶等。 褐色：古朴、典雅、原始、古老、陈旧、稳重、厚重等 色相：卡其、象

8、牙白、可可、麦芽、焦炭、原木、茶色,网,页,色,彩,搭,配,颜色在网站中的运用,颜色能赋予网站以意义。无论你是否打算为他们加上某种意义，颜色本身就有许多特定的印象。用户浏览网页时，颜色帮助转移用户的视线，指引用户怎么去浏览一个页面。、 在许多企业的网站中可以看出，颜色表达了情感和价值观，向用户展示着他们的公司是怎样的、他们所售卖的产品是怎样的。 配对色的运用能改变一个网站的意义。给以柔和的蓝色为色调的、表达出平静网站配上明亮的橙色，就能让它变成让人更多感受到兴奋和趣味的网站。,网页色彩搭配原理,色彩的鲜明性。网页的色彩要鲜艳，容易引人注目 色彩的独特性。要有与众不同的色彩，使得大家对你的印象强

9、烈 色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。 色彩的联想性。不同色彩会产生不同的联想。蓝色想到天空，黑色想到黑夜，红色想到喜事等，选择色彩要和你网页的内涵相关联。,色彩使用技巧,黑白灰色彩的应用 灰色是万能色，可以根任意一种色彩搭配， 对一些明度较高的网站，配以黑色，可以适当地降低明度。,白色是网站用的最普遍的一种颜色。很多网站甚至留出大块的白色空间，作为网站的一个组成总部份。这就是留白艺术。很多设 计性网站较多运用留白艺术。留白，给人一个遐想空间，恰当的留白对于协调页 面的均衡起到相当大的作用。,色彩使用技巧,确定主题色 一个网站不可能单一的运用一种颜色

10、，让人感觉单调、乏味；但是也不可能将所有的颜色都运用到网站中，让人感觉轻浮，花哨。一个网站必须有一种或两种主题色，不到于让客户迷失方向，也不至于单调、乏味。所以确定网站的主题色也是必需考虑的问题之一,色彩使用技巧,用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱合度（将色彩加深或减淡），产生新的色彩。用于网页。这样的页面看起来色彩统一，有层次感,色彩使用技巧,用两种色彩。先选定一种色彩，然后先择它的对比色。比如蓝色与黄色。这样搭配可以使整个页面色彩丰富但不花哨 用一个色系。简单的来说就是一个感觉的色彩，例如淡蓝，淡黄，淡绿，或者土黄，土灰，土蓝。 用黑色各一种颜色。比如：大红的字体配黑

11、色的边框感觉很“跳”。,色彩使用忌讳,不要将所有颜色都用到，尽量控制在三种色彩以内 背景和前文对比尽量要大，绝对不要用花纹繁复的图案作背景，以便主要文字内容 根据文化背景适当的选择颜色 黄色在信仰基督教的国家是下 等色。,大公司的网站中颜色运用的例子,耐克,耐克常常更新他们的网站，但通常还是黑色和灰色的色调，它通常是暗。黑色显示着他们产品中的力量，留给大家他们向爱运动的顾客出售优质产品的印象。,大公司的网站中颜色运用的例子,白宫,白宫的网站主要是白色和浅灰色，再加上一些蓝色和红色作强调色。白色象征着希望和自由，显露出平安和纯洁的价值。红色和蓝色当然是美国的代表色，红色代表着热情和能量，蓝色则代

12、表着稳定与和平。,大公司的网站中颜色运用的例子,亚马逊,亚马逊的网站大多是白色的，白色有着最佳的对比度和可读性。它还显露出整洁性，让用户能自由地浏览网站。以橙色和蓝色的强调色则让用户能感到安定、兴奋，也让他们期望找到最满意的采购。,大公司的网站中颜色运用的例子,Verizon公司,红色是Verizon的企业品牌主色调，也是贯穿整个网站的颜色。红色有助于刺激用户的兴奋性，展示出一个出售让人兴奋和快速更新的产品的公司形象。白色背景的运用与亚马逊类似，通过一个整洁有序的界面来帮助用户阅读这个网站。,大公司的网站中颜色运用的例子,百思买,百思买的网站的色调是深蓝色，显露出他们在电子市场中的稳定和实力。顾客在百思买上的大量采购使得他们需要安全感与平和感。黄色散发的快乐气氛让他们在采购时感觉到兴奋与趣味。,大公司的网站中颜色运用的例子,嘉信理财,嘉信理财是一家投资公司，在不稳定的市场环境下他们需要让消费者在他们的网站上感受到平和。他们使用柔和的深蓝色调来实现这一点，并建立起一种平静、祥和的气氛。中性的棕色则是另一种帮助协调偏激的用户感受的企业色彩。橙色作为强调色，能让用户在买