网页设计之色彩搭配

网页设计之色彩搭配第1页/共35页目录色彩的基本知识

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

第5页/共35页色彩的构成元素色相色彩的相貌，类似于人名，确切地表示某种颜色色别的名称。如：中国红，军绿色等明度

颜色明暗深浅表现，各种颜色的不同明度。黄色明度最高，蓝紫色最低，红色为中间明度

颜色越浅明度越高颜色越深明度越低第6页/共35页色彩的构成元素纯度（彩度、饱和度）色彩的纯净程度，鲜艳程序，表示颜色中含有色部份的比例

纯色+白色明度越高饱和度越低

纯色+黑色明度越低饱和度越低

纯色+灰色明度不变饱和度越低色调：色相、明度、饱和度结合

到一起,分有彩色、无彩色纯色+白色浅色调粉彩色调纯色+黑色深色调暗色调纯色+灰色浊色调浅灰色调第7页/共35页色相环色相环，是以三原色为基础并把它做为主要色相，再两两混合成次要色相，两种次要色相混合，衍生而成（我们一般说的12色相环和24色相环就是如此）第8页/共35页冷暖色系产生于人们生活经验与直接联想同一色相中明度越高，越冷

明度越低，越暖色相环

暖色系：红橙黄

冷色系：蓝绿紫

中间色：黑白灰第9页/共35页同一色系

同一色相不同明度饱合度呈现现的色彩（同一色系色彩进行配色最安全配色）第10页/共35页色相环色相关系类似色30-60度间的色彩临近色左右相临的色彩对比色120-150度色彩

差异很明显，注意颜色面积，比例，明

度，饱和度上的配置，才能显现出活泼，

轻快的感觉互补色180度对角位置第11页/共35页色彩的感觉色彩冷暖感觉

明度越高越冷如粉红<鲜红温暖

明度越低越暖如浅蓝>深蓝清凉

也与配色面积有关

较小黄配冷冷

较小黄配暖色暖色彩的联想，可以是具体的，也可以想象的，因每个人生活的经历等不同产生的联想也不同，以大多数人的联想为依据，这样所产生的形象误差会比较小联想所产生的心理感觉比如冷、热（以大多数人为主）第12页/共35页色彩的感觉色彩轻重感觉

明度越高越轻

明度越低越重

明度高，饱和度越低越轻

明度低，饱和度越高越重

冷轻-暖重

女性网站轻温柔可爱

男性网站重稳重可靠色彩爽朗郁闷感觉

暖爽朗冷郁闷

明度越高爽朗明度越低郁闷

白色爽朗黑色郁闷第13页/共35页色彩的感觉色彩兴奋沉积感

兴奋感觉让心情沉稳

暖兴奋冷沉稳

明度越高越兴奋越低越沉稳

饱和度越高越兴奋越低越沉稳色彩华丽朴实感

饱和度越低越朴实越高越华丽

色调低明度暗色调与深色调朴实

高明度纯色调为主华丽色彩酸甜苦辣第14页/共35页色彩的感觉色彩的酸甜苦辣

酸：蓝、绿、黄、橙黄

甜：黄、橙、粉红、乳白

苦：棕色、黑褐色、灰黑色

辣：红，黄、黄绿、绿第15页/共35页色彩的意向红色是最具有视觉冲击力的色彩；暗示速度和动态；可以刺激心跳速度、加快呼吸、刺激食欲；红色的衣服使人身形显大；红色的车最容易被偷红色的具象联想

火焰、鲜血、性、西红柿、西瓜瓤、太阳、红旗、口红、中国国旗。

红色的正面联想

激情、爱情、鲜血、能量、热心、激动、热量、力量、热情、活力。

红色的负面联想

侵略性、愤怒、战争、革命、残忍、不道德、危险、幼稚、卑俗。

红色的文化域

在非洲，红色代表死亡。

在法国，红色代表雄性。

在亚洲，红色代表婚姻、繁荣、快乐。

在印度，红色是士兵的颜色。

在南非，红色是丧服的色彩。第16页/共35页色彩的意向红色：热情、活泼、热闹、革命、温暖、吉祥、进取、活力、忠诚、危险、警示、引起注意、禁止等。

色相：大红、桃红、玫瑰红、砖红橙色：光明、华丽、兴奋、活力、快乐、警示、提醒等。

色相：大黄、柠檬黄、土黄、柳丁黄、米黄绿色：和平、宁静、环保、通畅、正确、柔和、青春、安全、理想等。色相：大绿、草绿、翠绿、橄榄绿、墨绿蓝色：专业、睿智、科技、深远、永恒、城市、朴实、寒冷、历练等。色相：湖蓝、普蓝、天蓝、深蓝第17页/共35页色彩的意向紫色：高贵、神秘、优雅、魅力、傲慢、柔软。

色相：正紫、耦合、贵族紫、葡萄紫、深紫白色：纯结、天真、空灵、明快、弱小、朴素、神圣、恐怖、无味等。

灰色：质朴、睿智、大气、谦逊、平凡、中庸、寂寞、犹豫、消极等。色相：浅灰、中灰、深灰、老鼠灰、蓝灰黑色：神秘、严肃、崇高、坚实、诡异、黑暗、沉默、绝望、死亡、罪恶等。褐色：古朴、典雅、原始、古老、陈旧、稳重、厚重等色相：卡其、象牙白、可可、麦芽、焦炭、原木、茶色第18页/共35页网页色彩搭配第19页/共35页颜色在网站中的运用颜色能赋予网站以意义。无论你是否打算为他们加上某种意义，颜色本身就有许多特定的印象。用户浏览网页时，颜色帮助转移用户的视线，指引用户怎么去浏览一个页面。、在许多企业的网站中可以看出，颜色表达了情感和价值观，向用户展示着他们的公司是怎样的、他们所售卖的产品是怎样的。配对色的运用能改变一个网站的意义。给以柔和的蓝色为色调的、表达出平静网站配上明亮的橙色，就能让它变成让人更多感受到兴奋和趣味的网站。第20页/共35页网页色彩搭配原理色彩的鲜明性。网页的色彩要鲜艳，容易引人注目色彩的独特性。要有与众不同的色彩，使得大家对你的印象强烈色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。色彩的联想性。不同色彩会产生不同的联想。蓝色想到天空，黑色想到黑夜，红色想到喜事等，选择色彩要和你网页的内涵相关联。第21页/共35页色彩使用技巧黑白灰色彩的应用

灰色是万能色，可以根任意一种色彩搭配，

对一些明度较高的网站，配以黑色，可以适当地降低明度。

白色是网站用的最普遍的一种颜色。很多网站甚至留出大块的白色空间，作为网站的一个组成总部份。这就是留白艺术。很多设

计性网站较多运用留白艺术。留白，给人一个遐想空间，恰当的留白对于协调页面的均衡起到相当大的作用。第22页/共35页色彩使用技巧确定主题色

一个网站不可能单一的运用一种颜色，让人感觉单调、乏味；但是也不可能将所有的颜色都运用到网站中，让人感觉轻浮，花哨。一个网站必须有一种或两种主题色，不到于让客户迷失方向，也不至于单调、乏味。所以确定网站的主题色也是必需考虑的问题之一第23页/共35页色彩使用技巧用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱合度（将色彩加深或减淡），产生新的色彩。用于网页。这样的页面看起来色彩统一，有层次感第24页/共35页色彩使用技巧用两种色彩。先选定一种色彩，然后先择它的对比色。比如蓝色与黄色。这样搭配可以使整个页面色彩丰富但不花哨用一个色系。简单的来说就是一个感觉的色彩，例如淡蓝，淡黄，淡绿，或者土黄，土灰，土蓝。用黑色各一种颜色。比如：大红的字体配黑色的边框感觉很“跳”。第25页/共35页色彩使用忌讳不要将所有颜色都用到，尽量控制在三种色彩以内背景和前文对比尽量要大，绝对不要用花纹繁复的图案作背景，以便主要文字内容根据文化背景适当的选择颜色

黄色在信仰基督教的国家是下

等色。

第26页/共35页大公司的网站中颜色运用的例子耐克耐克常常更新他们的网站，但通常还是黑色和灰色的色调，它通常是暗。黑色显示着他们产品中的力量，留给大家他们向爱运动的顾客出售优质产品的印象。第27页/共35页大公司的网站中颜色运用的例子白宫白宫的网站主要是白色和浅灰色，再加上一些蓝色和红色作强调色。白色象征着希望和自由，显露出平安和纯洁的价值。红色和蓝色当然是美国的代表色，红色代表着热情和能量，蓝色则代表着稳定与和平。第28页/共35页大公司的网站中颜色运用的例子亚马逊亚马逊的网站大多是白色的，白色有着最佳的对比度和可读性。它还显露出整洁性，让用户能自由地浏览网站。以橙色和蓝色的强调色则让用户能感到安定、兴奋，也让他们期望找到最满意的采购。第29页/共35页大公司的网站中颜色运用的例子Verizon公司红色是Verizon的企业品牌主色调，也是贯穿整个网站的颜色。红色有助于刺激用户的兴奋性，展示出一个出售让人兴奋和快速更新的产品的公司形象。白色背景的运用与亚马逊类似，通过一个整洁有序的界面来帮助用户阅读这个网站。第30页/共35页大公司的网站中颜色运用的例子百思买百思买的网站的色调是深蓝色，显露出他们在电子市场中的稳定和实力。顾客在百思买上的大量采购使得他们需要安全感与平和感。黄色散发的快乐气氛让他们在采购时感觉到兴奋与趣味。第31页/共35页大公司的网站中颜色运用的例子嘉信理财嘉信理财是一家投资公司，在不稳定的市场环境下他们需要让消费者在他们的网站上感受到平和。他们使用柔和的深蓝色调来实现这一点，并建立起一种平静、祥和的气氛。中性的棕色则是另一种帮助协调偏激的用户感受的企业色彩。橙色作为强调色，能让用户在买股票时产生兴奋感，同时也为网站带来了幸福感。第32页