【转帖】页面风格设定参考——色彩及其效用

[Tony]

色彩常识

>>色彩为第一视觉语言，具有影响人民心理，唤起人们感情的作用，左右我门的感情和行动。

1、可以传达意念，表达某种确切的含义，如交通灯上的红色表示停止，绿色表示放行的意念，已成为全世界所了解和承认的一种视觉语言。

2、色彩有明显的影响情绪的作用。不同的色彩可以表现不同的情感。

3、色彩有使人增强识别记忆的作用。如富士彩色胶卷的绿色，柯达的彩色胶卷的黄色则成为消费者识别、记忆商品的标准色。

4、彩色画面更具有真实感，充分地表现对象的色彩、质感、量感。

5、色彩能增强画面的感染力。色彩远较黑、白和灰色更刺激视觉神经。具有良好色彩构成的设计作品，能强烈地吸引消费者的注意力，加强艺术魅力。

>>色彩的象征性
　　与大部分人的经验与联想有关，人们通过与自然界和社会的接触，逐步形成色的概念和联想。色彩的象征意义是具有世界性的，不同的民族产生的差异不大。

　　红色：　最引人注目的色彩，具有强烈的感染力，它是火的色、血的色。象征热情、喜庆、幸福。另一方面又象征警觉、危险。红色色感刺激强烈，在色彩配合中常起着主色和重要的调和对比作用，是使用得最多的色。

　　黄色：　是阳光的色彩，象征光明、希望、高贵、愉快。浅黄色表示柔弱，灰黄色表示病态。黄色在纯色中明度最高，与红色色系的色配合产生辉煌华丽、热烈喜庆的效果，与兰色色系的色配合产生淡雅宁静、柔和清爽的效果。

　　蓝色：　是天空的色彩，象征和平、安静、纯洁、理智。另一方面又有消极、冷淡、保守等意味。蓝色与红、黄等色运用得当，能构成和谐的对比调和关系。

　　绿色：　是植物是色彩，象征着平静与安全，带灰褐绿的色则象征着衰老和终止。绿色和蓝色配合显得柔和宁静，和黄色配合显得明快清新。由于绿色的视认性不高，多为陪衬的中型色彩运用。

　　橙色：　秋天收获的颜色，鲜艳的橙色比红色更为温暖、华美，是所有色彩中最温暖的色彩。橙色象征快乐、健康、勇敢。

　　紫色：象征优美、高贵、尊严，另一方面又有孤独、神秘等意味。淡紫色有高雅和魔力的感觉，深紫色则有沉重、庄严的感觉。与红色配合显得华丽和谐，与蓝色配合显得华贵低沉，与绿色配合显得热情成熟。运用得当能构成新颖别致的效果。

　　黑色：　是暗色，是明度最低的非彩色，象征着力量，有时又意味着不吉祥和罪恶。能和许多色彩构成良好的对比调和关系，运用范围很广。

　　白色：　表示纯粹与洁白的色，象征纯洁、朴素、高雅等。作为非彩色的极色，白色与黑色一样，与所有的色彩构成明快的对比调和关系，与黑色相配，构成简洁明确、朴素有力的效果，给人一种重量感和稳定感，有很好的视觉传达能力。
>> 色彩的冷暖感

　　红、橙、黄的色调带暖感，蓝、青的色调带冷感。低明度的色具有暖感，高明度的色具有冷感。高纯度的色具有暖感，低纯度的色具有冷感。

>>色彩的轻重感

　　色彩的轻重感主要由明度决定，高明度具有轻感，低明度具有重感。白色最轻，黑色最重。

>>色彩的软硬感

　　色彩的软硬感与明度纯度都有关。凡是明度较高的含灰色系具有软感，明度较低的含灰色系具有硬感。强对比色调具有硬感，弱对比色调具有软感。

>>色彩的明快忧郁感

　　色彩以明快忧郁感与明度纯度都有关。凡是明亮而鲜艳的色具有明快感，凡是深暗而浑浊的色具有忧郁感。强对比色调具有明快感，弱对比色调具有忧郁感。

>> 色彩的兴奋沉静感

　　有兴奋感的色彩，刺激人的感官，使人兴奋，引起注意。色彩的兴奋沉静感与色相、明度、纯度都有关，其中以纯度的影响为最大。色相方面，红、橙色具有兴奋感，蓝青色具有沉静感。在明度方面，明度高的色具有兴奋感，明度低的色具有沉静感。在纯度方面，纯度高的色具有兴奋感，纯度低的色具有沉静感。强对比色调具有兴奋感，弱对比色调具有沉静感。色相种类多显得活泼热闹，少则令人有寂寞感。

>>色彩的华丽朴素感

　　色彩的华丽朴素感与纯度关系最大，其次与明度也有关。凡是鲜艳而明亮的色最具有华丽感，凡是浑浊而深暗的色具有朴素感。有色彩系具有华丽感，无色彩系具有朴素感。强对比色调具有华丽感，弱对比色调具有朴素感。
　　平面设计中为使信息传达清晰，色彩的可视度也是很重要的因素。色彩的可视度即色彩的知觉度，或称易见度，是指色彩感觉的强弱程度，它是色相、明度和纯度对比的总反应，属人的生理反应。图形与其周围的色彩对比是否能清晰看出，图与底色彩的对比有的能看的清，有的看不清，既有的可视度高，有的可视度低。大体说来明度差大的可视度高,明度小的可视度低。公路警告牌上用黄、黑配色清楚易辩，就是利用可视度的一个例子。

[Tony]

>>色彩可视度清晰的配色的搭配：
　１　　黑　　黄
　２　　黄　　黑
　３　　黑　　白
　４　　紫　　黄
　５　　紫　　白
　６　　蓝　　白
　７　　绿　　白
　８　　白　　黑
　９　　黄　　绿
　10　　黄　　蓝

>>背景与配色的搭配（选自日本佐藤垣宏的《我们的生活与配色》）

背景（底色） 配色
黑 白－黄－黄橙－黄绿－橙
白 黑－红－紫－蓝紫－蓝
红 白－黄－蓝－蓝绿－黄绿
蓝 白－黄－黄橙－橙
黄 黑－红－蓝－蓝紫－绿
绿 白－黄－红－黑－黄橙
紫 白－黄－黄绿－橙－黄橙
灰 黄－黄绿－橙－紫－蓝紫
2

一、色彩形成

***对网站建设关系不大，略****

二、色彩要素

客观世界的色彩前边千变万化。各不相同，但任何色彩都有色相、明度、纯度三个方面的性质，又称色彩的三要素，而且当色彩间发生作用时，除以上三种基本条件外，各种色彩彼此间形成色调，并显现出自己的特性，因此，色相、明度、纯度、色调及色性等五项构成了色彩的要素。

色相 色彩的相貌，是区别色彩种类的名称。
明度 色彩的明暗程度，即色彩的深浅差别。明度差别即指同色的深浅变化，又指不同色相之间存在的明度差别。
纯度 色彩的纯净程度，又称彩度或饱和度。某一纯净色加上白或黑，可降低其纯度，或趋于柔和、或趋于沉重。
色调 画面中总是由具有某种内在联系的各种色彩组成一个完整统一的整体，形成画面色彩总的趋向，称为色调。
色性 指色彩的冷暖倾向。

三、色彩混合

***对网站建设关系不大，略****

颜料混合
原色（第一次色）：不能用其他任何单色混合而成的基本色彩。包括：红、黄、蓝（理想的颜料三原色是明亮的红色、柠檬黄和湖蓝）。
间色： 由两原色相混合而得（包括：橙、绿、紫）。
复色： 由两间色相混合而得。


色彩并置混合 当我们把红、蓝色点或色块并置的画面经过一定的距离，就会发现红色与蓝色变成了一个紫色，只是由于空间距离和视觉生理的限制，眼睛辨别不出过小或过远物象的细节，因此把个不相同色块感受成一个新的色彩，这种现象便称为色彩的并置混合或空间混合。
示　范

四、色彩对比

　　两种以上的色彩，以空间或时间关系相比较，能比较出明显的差别，并产生比较作用，被称为色彩对比。该想象分为两大类：同时对比和连续对比。

色相对比 因色相之间的差别形成的对比。当主色相确定后，必须考虑其他色彩与主色相是什么关系，要表现什么内容及效果等，这样才能增强其表现力。
明度对比 因明度之间的差别形成的对比。（柠檬黄明度高，蓝紫色的明度低，橙色和绿色属中明度，红色与蓝色属中低明度）。
纯度对比 一种颜色与另一种更鲜艳的颜色相比时，会感觉不太鲜明，但与不鲜艳的颜色相比时，则显得鲜明，这种色彩的对比便称为纯度对比。
补色对比 将红与绿、黄与紫、蓝与橙等具有补色关系的色彩彼此并置，使色彩感觉更为鲜明，纯度增加，称为补色对比。（视觉的残像现象明显）。
冷暖对比 由于色彩感觉的冷暖差别而形成的色彩对比，称为冷暖对比。（红、橙、黄使人感觉温暖；蓝、蓝绿、蓝紫使人感觉寒冷；绿与紫介与其间），另外，色彩的冷暖对比还受明度与纯度的影响，白光反射高而感觉冷，黑色吸收率高而感觉暖。

五、色彩调和

　　两种或两种以上的色彩合理搭配，产生统一和谐的效果，称为色彩调和。

同种色的调和 相同色相，不同明度和纯度的色彩调和。方法为：使之产生循序的渐进，在明度、纯度的变化上，形成强弱、高低的对比，以弥补同色调和的单调感。
类似色的调和 以色相接近的某类色彩，如红与橙、蓝与紫等的调和，称为类似色的调和。类似色的调和主要靠类似色之间的共同色来产生作用。
对比色的调和 以色相相对或色性相对的某类色彩，如红与绿、黄与紫、蓝与橙的调和。调和方法有：
选用一种对比色将其纯度提高或降低另一种对比色的纯度；
在对比色之间插入分割色（金、银、黑、白、灰等）；
采用双方面积大小不同的处理方法，以达到对比中的和谐；
是对比色之间具有类似色的关系，也可起到调和的作用；

六、色彩象征

　　各种色彩的象征：

红色 热情、活泼、热闹、革命、温暖、幸福、吉祥、危险......
橙色 光明、华丽、兴奋、甜蜜、快乐......
黄色 明朗、愉快、高贵、希望、发展、注意......
绿色 新鲜、平静、安逸、和平、柔和、青春、安全、理想......
蓝色 深远、永恒、沉静、理智、诚实、寒冷......
紫色 优雅、高贵、魅力、自傲、轻率......
白色 纯洁、纯真、朴素、神圣、明快、柔弱、虚无......
灰色 谦虚、平凡、沉默、中庸、寂寞、忧郁、消极......
黑色 崇高、严肃、刚健、坚实、粗莽、沉默、黑暗、罪恶、恐怖、绝望、死亡......
七、论颜色　----帕尔特海姆


色彩的心理效应

　　色彩的直接心理效应来自色彩的物理光刺激对人的生理发生的直接影响。
心理学家对此曾做过许多实验。他们发现，在红色环境中，人的脉搏会加快，血压有所升高，情绪兴奋冲动。而处在蓝色环境中，脉搏会减缓，情绪也较沉静。有的科学家发现，颜色能影响脑电波，脑电波对红色反应是警觉，对蓝色的反应是放松。自19世纪中叶以后，心理学已从哲学转入科学的范畴，心理学家注重实验所验证的色彩心理的效果。

不少色彩理论中都对此作过专门的介绍，这些经验向我们明确地肯定了色彩对人心理的影响。 冷色与暖色是依据心理错觉对色彩的物理性分类，对于颜色的物质性印象，大致由冷暖两个色系产生。波长长的红光和橙、黄色光，本身有暖和感，以次光照射到任何色都会有暖和感。相反，波长短的紫色光、蓝色光、绿色光，有寒冷的感觉。夏日，我们关掉室内的白炽灯，打开日光灯，就会有一种变量双的感觉。颜料也是如此，在冷食或冷的饮料包装上使用冷色，视觉上会引起你对这些食物冰冷的感觉。冬日，把卧 室的窗帘换成暖色，就会增加室内的暖和感。 　　
　　以上的冷暖感觉，并非来自物理上的真实温度，而是与我们的视觉与心理联想有关。总的来说，人们在日常生活中既需要暖色，又需要冷色，在色彩的表现上也是如此。
　　
　　冷色与暖色除去给我们温度上的不同感觉以外，还会带来其它的一些感受，例如，重量感、湿度感等。比方说，暖色偏重，冷色偏轻；暖色有密度强的感觉，冷色有稀薄的感觉；两者相比较，冷色的透明感更强，暖色则透明感较弱；冷色显得湿润，暖色显得干燥；冷色又很远的感觉，暖色则有迫近感。

一般说来，在狭窄的空间中，若想使它变得宽敞，应该使用明亮的冷调。由于暖色有前进感，冷色有后退感，可在细长的空间中的两壁涂以暖色，近处的两壁涂以冷色，空间就会从心理上感到更接近方形。 　　

　　除去寒暖色系具有明显的心理区别以外，色彩的明度与纯度也会引起对色彩物理印象的错觉。一般来说，颜色的重量感主要取决于色彩的明度，暗色给人以重的感觉，明色给人以轻的感觉。纯度与明度的变化给人以色彩软硬的印象，如淡的亮色使人觉得柔软，暗的纯色则有强硬的感觉。


色彩的三原色
不能用其它颜色混合而成的色彩叫原色。用原色却可以混出其它色彩！（不是全部）。
原色包含两个系统：光的三原色和和色料或颜料的三原色！
色的三原色：朱红光，翠绿光，蓝紫光。
色料的三原色：紫红，柠檬黄，天蓝！
在左图上，大圆表示色料的三原色：即C，M，Y，（再加黑色K）。
两色叠加后是光的三原色：R，G，B。
色彩的三要素！
明度和色相，纯度构成色彩的三要素！
色彩世界千差万别，不过大致可以分为无彩色--指黑，白，灰那样没有纯度的色！和有彩色--指象红橙黄绿蓝紫色等！
明度指色彩的明暗程度！明度是全部色彩都具有的属性，最适合表现物体的立体感和空间感！象我们画的素描，黑白照等！白色的颜料是反射率较高的物体，在其他颜料中加入白色，可提高混合色的明度！黑颜料则相反！
色相是色彩的相貌，即是区别色彩种类的名称！不同的波长给人不同的色彩感受！红、橙、黄、绿、蓝、紫色没个字代表一个具体的色相！注意：色相是由波长决定的，所以比如粉红色，暗红色，灰红色是同一色相（都是红色相）只是彼此明度和纯度不同而已！
色相可以分为高纯度，中纯度，低纯度，高明度，中明度，低明度！
纯度指色彩的纯净程度！也可以说色相感觉明确及鲜灰的程度！


光谱中红、橙、黄、绿、蓝、紫等色光都是最纯的高纯度的光！
色料中红色是纯度最高的色相！，橙黄紫等是纯度高的色相，蓝绿色是纯度最低的色相！任何一个色彩家白，黑，灰都会降低它的纯度！越多就越低！
眼睛在正常光线下对红色光波感觉最敏，因此红色的纯度显得特别高！
对绿色相对弱，因此绿色的纯度就低！

1.颜色是因为光的折射而产生的。
　　
2.红，黄，蓝是三原色，其它的色彩都可以用这三种色彩调和而成。网页html语言中的色彩表达即是用这三种颜色的数值表示例如：红色是color (255,0,0)十六进制的表示方法为(FF0000)白色为(FFFFFF), 我们经常看到的“bgColor=#FFFFFF”就是指背景色为白色。 　　

3.颜色分非彩色和彩色两类。非彩色是指黑，白，灰系统色。彩色是指除了非彩色以外的所有色彩。 　　4.任何色彩都有饱和度和透明度的属性，属性的变化产生不同的色相，所以至少可以制作几百万种色彩。 “Adidas”网站 （黑色为主，加浅褐和淡蓝， 强调运动着的凝重与飘逸） 　
网页制作用彩色还是非彩色好呢？根据专业的研究机构研究表明：彩色的记忆效果是黑白的3.5倍。也就是说，在一般情况下，彩色页面较完全黑白页面更加吸引人。 　

　我们通常的做法是：要考虑主页底色（背景色）的深、浅，这里借用摄影中的一个术语，就是“高调”和“低调”。底色浅的称为高调；底色深的称为低调。底色深，文字的颜色就要浅，以深色的背景衬托浅色的内容（文字或图片）；反之，底色淡的，文字的颜色就要深些，以浅色的背景衬托深色的内容（文字或图片）。这种深浅的变化在色彩学中称为“明度变化”。有些主页，底色是黑的，但文字也选用了较深的色彩，由于色彩的明度比较接近，读者在阅览时，眼睛就会感觉很吃力，影响了阅读效果。当然，色彩的明度也不能变化太大，否则屏幕上的亮度反差太强，同样也会使读者的眼睛受不了。
网页色彩的搭配

网页的色彩是树立网站形象的关键之一，色彩搭配却是网友们感到头疼的问题。网页的背景，文字，图标，边框，超链接...，应该采用什么样的色彩，应该搭配什么色彩才能最好的表达出预想的内涵呢？阿捷这里谈一些心得，希望对你有所启发。


　　网页制作用彩色还是非彩色好呢？根据专业的研究机构研究表明：彩色的记忆效果是黑白的3.5倍。也就是说，在一般情况下，彩色页面较完全黑白页面更加吸引人。

　　我们通常的做法是：主要内容文字用非彩色(黑色)，边框，背景，图片用彩色。这样页面整体不单调，看主要内容也不会眼花。

　　 非彩色的搭配

　　黑白是最基本和最简单的搭配，白字黑底，黑底白字都非常清晰明了。 灰色是万能色，可以和任何彩色搭配，也可以帮助两种对立的色彩和谐过渡。如果你实在找不出合适的色彩，那么用灰色试试，效果绝对不会太差。

　　彩色的搭配

　　色彩千变万化，彩色的搭配是我们研究的重点。我们依然需要进一步学习一些色彩的知识。

　　 一.色环。我们将色彩按"红->黄->绿->蓝->红"依次过度渐变，就可以得到一个色彩环。色环的两端是暖色和寒色，当中是中型色。 红.橙.橙黄.黄.黄绿.绿.青绿.蓝绿.蓝.蓝紫.紫.紫红.红 . 暖色系. 中性系. 寒色系. 中性系

　　二.色彩的心理感觉。不同的颜色会给浏览者不同的心理感受。 红色---是一种激奋的色彩。刺激效果，能使人产生冲动，愤怒，热情，活力的感觉。 绿色---介于冷暖两中色彩的中间，显得和睦，宁静，健康，安全的感觉。 它和金黄，淡白搭配，可以产生优雅，舒适的气氛。 橙色---也是一种激奋的色彩，具有轻快，欢欣，热烈，温馨，时尚的效果。 黄色---具有快乐，希望，智慧和轻快的个性，它的明度最高。 蓝色---是最具凉爽，清新，专业的色彩。它和白色混合，能体现柔顺，淡雅，浪漫的气氛(象天空的色彩 白色---具有洁白，明快，纯真，清洁的感受。 黑色---具有深沉，神秘，寂静，悲哀，压抑的感受。 灰色---具有中庸，平凡，温和，谦让，中立和高雅的感觉。

　　每种色彩在饱和度，透明度上略微变化就会产生不同的感觉。以绿色为例，黄绿色有青春，旺盛的视觉意境，而蓝绿色则显得幽宁，阴深。

　　 网页色彩搭配的原理

　　1.色彩的鲜明性。网页的色彩要鲜艳，容易引人注目。

　　2.色彩的独特性。要有与众不同的色彩，使得大家对你的印象强烈。(参考设计思考第二篇网站CI的标准色彩一节)

　　3.色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。

　　 4.色彩的联想性。不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，红色想到喜事等，选择色彩要和你网页的内涵相关联。

　　网页色彩掌握的过程

　　随着网页制作经验的积累，我们用色有这样的一个趋势:单色->五彩缤纷->标准色->单色。一开始因为技术和知识缺乏，只能制作出简单的网页，色彩单一；在有一定基础和材料后，希望制作一个漂亮的网页，将自己收集的最好的图片，最满意色彩堆砌在页面上；但是时间一长，却发现色彩杂乱，没有个性和风格；第三次重新定位自己的网站，选择好切合自己的色彩，推出的站点往往比较成功；当最后设计理念和技术达到顶峰时，则又返朴归真，用单一色彩甚至非彩色就可以设计出简洁精美的站点。

　　网页色彩搭配的技巧

　　文章写到这里，有心急的网友要问了：“到底用什么色彩搭配好看呢？你能不能推荐几种配色方案？”别急，这里有一点技巧，可以帮助你迅速成为调色大师

　　1.用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，(说得通俗些就是将 色彩变淡或则加深)，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。

　　 2.用两种色彩。先选定一种色彩，然后选择它的对比色(在photoshop里按ctrl+shift+I)。我的主页用蓝色和黄色就是这样确定的。整个页面色彩丰富但不花稍。

　　 3.用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。确定色彩的方法各人不同，我是在photoshop里按前景色方框，在跳出的拾色器窗中选择"自定义"，然后在"色库"中选就可以了

　　4.用黑色和一种彩色。比如大红的字体配黑色的边框感觉很"跳"。 在网页配色中，忌讳的是： 1.不要将所有颜色都用到，尽量控制在三种色彩以内。 2.背景和前文的对比尽量要大，(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。