网站设计色彩搭配技巧
网站设计色彩搭配技巧
导入：
一个人拥有自己独特的风格，是一般人所没有的，就会让人注意到那个人的特别，若那个人的风格是正面的，甚至就会引起别人的羡慕与注意，或是赞赏。就如同一个网站，拥有别的网站所没有的风格，就会让浏览者愿意多停留些时间，细细品尝该站的内容，甚至该站会得到多人的鼓励与注目，
上过色彩基本理论，所以我们知道, 客观世界的色彩前边千变万化,各不相同，但任何色彩都有色相、明度、纯度三个方面的性质，又称色彩的三要素.
色系
网站的色系是浏览者整体的视觉观感，若一个网站色系能有一致性，不仅会使网站看起来美观，更能让浏览者对内容不易混淆，增加了浏览的简洁与方便。而网站的色系更能衬托出网站的主题，若色系能与主题合理搭配，将会增加浏览者的易读性。
网站的色系包含了网页的底色、文字字型、图片的色系、颜色等等，这不单只是将颜色搭配得当就算完美，还要配合每个内容，及网站主题。对于网站的色系，应该要在网站开始制作前，做好规划及设计，才不会到着手制作网站时，难以搭配，甚至造成混乱的设计。
网页的底色是整个网站风格的重要指针。举例来说，以黑色作为背景颜色的网页，因黑色本对人的视觉上会造成黯淡的感觉，若是拿来用作活泼的儿童网站，就是不适合了。因为小孩子是天真无邪的、活泼的、有朝气的，与黑色的沉稳、黯淡，很难联想在一起。
再举个例子，若是写一个有关于环保的网站，若用暗红色作为网页底色，决计不会有人联想到网页的内容是与环保有关。当然，每个人的审美观不同，可能也会对颜色的代表性看法不同，但既然网站不是只写给自己看的，就应该要注意到大部分人可能会有的观点，然后以众人居多的观点出发，来设计网页。
文字字型上的设计，最好的网站是以所有浏览者都能看到的字型为主。常会看到有需多网站要求浏览者须自行下载某种字型，才能达到最佳浏览效果，这是种非常奇怪的行为。毕竟浏览者只是来找资料或是来看网站的内容，不可能会因为这种「为达最佳浏览效果」，而自行下载所需要的字型。
当所要求的字型若不下载，并不会影响到网站内容上的浏览与不便，那么对浏览者的要求就微乎其微的不可能发生任何作用。这么一来，对于网页设计者来说，无非是非常可惜的，因为当初的设计风格却未能让浏览者一窥全貌，岂不是白费心思的吗？
何谓图片的色系？以色彩学简单的区分，可分为冷色系与暖色系，再详细一点的区分，又可分出各种颜色的色系，而色系的区分，就在于主观浏览意识上的差异了。如何将图片的色系与网站整体色系相对应，就是比较困难的地方了。对于网页初学者来说，要绘制一张图并非易事，要绘制一张符合自己网页风格的图，更是困难重重。大部分的网页制作者，并不大可能驾轻就熟的使用影像处理软件或绘图软件，于是乎，网页素材的网站就开始盛行了。当然，不会使用绘图软件并不代表网页就不能设计的很出色，若是能将网络上的素材资源妥善利用，网站也是可以走出自己的风格的。而该怎么选择适合自己网站的图片，就是门很大的学问了。
择图片该以何作为标准呢？举例来说，若网站内容为科学探讨，当然不能以卡通图片来作为插图，试想，当您正在浏览一个有关天文学的网站，却满是皮卡丘的可爱图片，不是很不协调吗？再举个例子，如果一个教学网站，里头却尽是明星图片，看上去根本就不像是教学网站，而是大杂汇的明星相片网。
很多人喜欢将自己欣赏的明星照放上自己的网页中，如果仅是个人网站倒也还好，因为个人网站本就无主题居多，也就没有所谓的符不符合主题的顾虑，但若是有主题的网站，岂不糟糕？
以图片内容来说，能切合网站主题最好，若不能，也别差异太多。以颜色来说，若一个网页是蓝色的底色，但整个网页的图档却乱七八糟，各种颜色纷纷出笼，更糟的是，蓝色是属于冷色系的颜色，若以蓝色为底的网页，却尽都是大红色、橘色的图片，那将会使整张网页看起来就像垃圾堆，杂乱无章。所以，可以简单的归纳出，网页与图档的颜色，色系一致或是视觉效果一致，将会使网页看起来更为美观且有自己的风格。
网页的颜色，并非单一就图文件、文字颜色、或是底色为主，而是以浏览者的角度来观看，整体网页看上去是偏向哪种色系。常常见到许多网站虽然色系搭配的很好，但却是没有自己的风格。以目前流行的柔色系、粉色系网站来说，就是失了自己独到的风格。
因为使用粉色系的网站，不外乎都有相同的特点，文字颜色浅，底色也以浅色系为主，这样除了没有自己的风格外，看起来既不大方也难登大雅之堂。以各大搜寻网站来说，根本不会做这样的设计，因为文字颜色淡，加上底色浅，对浏览者来说，阅读上非常吃力，所以这样的设计风格也应尽量避免。
一个有自己风格，且阅读起来舒适大方的网页，并不可能一次就写好，而是需要经过不厌其烦的修正、调色，才能达到最佳浏览效果的，所以制作网页也一定要有相当大的耐心。
对于做网页的初学者可能更习惯于使用一些漂亮的图片作为自己网页的背景，但是，浏览一下大型的商业网站，你会发现他们更多运用的是白色、蓝色、黄色等，使得网页显得典雅，大方和温馨。更重要的是，这样可以大大加快浏览者打开网页的速度。
网页颜色的使用风格
不同的网站有着自己不同的风格，也有着自己不同的颜色。网站使用颜色大概分为几种类型：
1、 公司色
在现在企业中，公司的CI形象显得尤其重要，每一个公司的CI设计必然要有标准的颜色。比如新浪网的主色调是一种介于浅黄和深黄之间的颜色，同时形象宣传、海报、广告使用的颜色都和网站的颜色一致。再比如国富投资公司的主色调是C：100%，M：60%，Y：0%，K：0%。这样的颜色使用到网站上显得色调自然、底蕴深厚。
2、 风格色
许多网站使用颜色秉承的是公司的风格。比如海尔使用的颜色是一种中性的绿色，即充满朝气有不失自己的创新精神。女性网站使用粉红色的较多，大公司使用蓝色的较多……这些都是在突出自己的风格。
3、 习惯色
这些网站的颜色使用很大一部分是凭自己的个人爱好，以个人网站较多使用，比如自己喜欢红色、紫色、黑色等，在做网站的时候就倾向于这种颜色。每一个人都有自己喜欢的颜色，因此这种类型称为习惯色。
下面是我做网页和浏览别人的网页时，对网页背景色和文字色彩搭配积累的经验，这些颜色可以做正文的底色，也可以做标题的底色，再搭配不同的字体，一定会有不错的效果
BgcolorΚ″#F1FAFA″———做正文的背景色好，淡雅
BgcolorΚ″#E8FFE8″———做标题的背景色较好
BgcolorΚ″#E8E8FF″———做正文的背景色较好，文字颜色配黑色
BgcolorΚ″#8080C0″———上配黄色白色文字较好
BgcolorΚ″#E8D098″———上配浅蓝色或蓝色文字较好
BgcolorΚ″#EFEFDA″———上配浅蓝色或红色文字较好
BgcolorΚ″#F2F1D7″———配黑色文字素雅，如果是红色则显得醒目
BgcolorΚ″#336699″———配白色文字好看些
BgcolorΚ″#6699CC″———配白色文字好看些，可以做标题
BgcolorΚ″#66CCCC″———配白色文字好看些，可以做标题
BgcolorΚ″#B45B3E″———配白色文字好看些，可以做标题
BgcolorΚ″#479AC7″———配白色文字好看些，可以做标题
BgcolorΚ″#00B271″———配白色文字好看些，可以做标题
BgcolorΚ″#FBFBEA″———配黑色文字比较好看，一般作为正文
BgcolorΚ″#D5F3F4″———配黑色文字比较好看，一般作为正文
BgcolorΚ″#D7FFF0″———配黑色文字比较好看，一般作为正文
BgcolorΚ″#F0DAD2″———配黑色文字比较好看，一般作为正文
BgcolorΚ″#DDF3FF″———配黑色文字比较好看，一般作为正文
黑色、白色、灰色
黑色
黑色服装能使人看上去瘦一些；黑色幽默是病态的；黑色能让和它相配的颜色看上去更明亮；在色彩治疗学中，认为黑色可以激发自信和力量；黑色通常会与黑手党产生联系
黑色的具象联想
夜晚、死亡、墨汁、煤炭、毛发、礼服、洋伞。
3.4.7.2 黑色的正面联想
权力、威信、重量、诡异、高雅、仪式、严肃、高贵、孤独、神秘、时髦、严肃、刚健、坚实、生命。
3.4.7.3 黑色的负面联想
恐惧、消极、邪恶、秘密、屈服、服丧、重量、懊悔、无知、悲哀、阴沉、冷淡。
3.4.7.4 黑色的文化域
1. 在美国、欧洲和日本，黑色是叛逆的颜色。
2. 在中国，黑色代表小男孩。
3. 在亚洲，黑色代表事业、紫色、服丧和忏悔。
4. 在世界范围，黑色代表深肤色血统人种。
3.4.7.5 实例说明
如图3-46所示，为韩国genesis汽车网站（https://www.the-genesis.co.kr/）网页截图，整个页面使用黑色作为主色调，给人以大气、贵雅的感受。
白色
一些文化认为如果身着白色服装举行结婚仪式，将会带来好运；白色是表达到最完美平衡的颜色；由于白色太明亮，会引起某些人群的头疼感；白光会引起暂时的失明；白色经常会同上帝、天使联系起来
.4.8.1 白色的具象联想
雪、白纸、白兔、白云、砂糖、光芒、纯净、面粉。
3.4.8.2 白色的正面联想
清洁、神圣、洁白、纯洁、纯真、神秘、完美、美德、柔软、庄严、简洁、真实、婚礼。
3.4.8.3 白色的负面联想
虚弱、孤立。
3.4.8.4 白色的文化域
• 在日本和中国，白色是葬礼的色彩。
• 在世界范围内，白色的旗帜代表休战。
• 在欧洲和北美，白色代表了浅肤色的高加索人种。
• 在印度，如果已婚妇女穿着白色，会引起人的不愉快。
3.4.8.5 实例说明
如图3-48所示，为韩国影星daniel-henney的官方网站（https://www.daniel-henney.com/）网页截图，整个页面使用白色作为主色调，给人以干净、清爽的感受，和daniel-henney的气质非常的贴切
灰色
灰色通常不能引起观众比较强烈的情感变化；灰色是白色和黑色平衡的结果；灰色的补色也是其本身，如图3-49所示。
.4.9.1 灰色的具象联想
乌云、草木灰、树皮、中性。
3.4.9.2 灰色的正面联想
平衡、安全、可信、谦虚、成熟、智能、才智、平凡、古典主义。
3.4.9.3 灰色的负面联想
阴天、老龄、厌倦、悲伤、失意、缺少承诺、不确定、喜怒无常、优柔寡断、糟糕的天气。
3.4.9.4 灰色的文化域
• 在美国，灰色代表荣誉和友谊。
• 在亚洲，灰色代表在路途中有帮助的人。
• 在世界范围内，灰色让人联想到白银和金钱。
3.4.9.5 实例说明
如图3-50所示，为韩国影星安在旭官方网站（https://www.ahnjaewook.co.kr/main/）网页截图，整个页面使用灰色作为主色调，给人以沉稳、大气的感受
—红色
人们用自己的眼睛和头脑来感受色彩。这不仅仅是物理层面上的，而且包含着精神和情感层面。当我们看色彩时常常想起以前与该色相联系的感受或事物，这种因某种色彩而出现的感受，我们就称之为色彩的联想。色彩的联想是通过过去的经验，记忆或知识而取得的。
这种感受的结果，就是让不同的色彩具有了其特定的意义。色彩的象征意义多数情况下也是一种文化认同。不同文化中色彩所代表的意义和给人产生的联想是大不相同的，有时可能甚至相反。设计师在应用某种色彩之前，要好好调查一下这种色彩的意义以及它在特定环境下将带给人们的联想。
红色是最具有视觉冲击力的色彩；暗示速度和动态；可以刺激心跳速度、加快呼吸、刺激食欲；红色的衣服使人身形显大；红色的车最容易被偷，
3.4.1.1 红色的具象联想
火焰、鲜血、性、西红柿、西瓜瓤、太阳、红旗、口红、中国国旗。
3.4.1.2 红色的正面联想
激情、爱情、鲜血、能量、热心、激动、热量、力量、热情、活力。
3.4.1.3 红色的负面联想
侵略性、愤怒、战争、革命、残忍、不道德、危险、幼稚、卑俗。
3.4.1.4 红色的文化域
• 在非洲，红色代表死亡。
• 在法国，红色代表雄性。
• 在亚洲，红色代表婚姻、繁荣、快乐。
• 在印度，红色是士兵的颜色。
• 在南非，红色是丧服的色彩。
举例说明
如图3-28所示，为中企动力8周年主题网站（https://ex.ce.net.cn/8tm/index.html）网页截图，整个页面使用红色作为主色调，给人以喜庆、热闹的感受
红色系配色方案
红色系的配色方案如下，如图3-29所示：
1. 在红色中加入少量的黄，会使其热力强盛，趋于躁动、不安。
2. 在红色中加入少量的蓝，会使其热性减弱，趋于文雅、柔和。
3. 在红色中加入少量的黑，会使其性格变的沉稳，趋于厚重、朴实。
4. 在红中加入少量的白，会使其性格变的温柔，趋于含蓄、羞涩、娇嫩
黄色
是人眼睛最容易注意到的色彩；比纯白色的亮度还要高；可以促进新陈代谢；明亮的黄色是所有色彩中最容易让人产生疲劳感的颜色，它很刺激人的眼睛；暗淡的黄色可以加强人们的注意力，所以多应用于提示牌
3.4.3.1 黄色的具象联想
阳光、沙滩、蛋黄、香蕉、向日葵、小鸡、面包、菜花。
3.4.3.2 黄色的正面联想
聪明、才智、乐观、光辉、喜悦、平凡、泼辣、明快、希望、光明、明媚、理想主义。
3.4.3.3 黄色的负面联想
嫉妒、怯懦、欺骗、警告。
3.4.3.4 黄色的文化域
• 在佛教里，法师穿着金黄色的袈裟。
• 在埃及和缅甸，黄色意味着丧服。
• 在日本，黄色联系到人的勇气。
• 在印度，黄色是商人和农民的标志。
• 在印度教文化中，穿着黄色用来庆祝春节。
• 在古代中国，黄色是帝王专属的颜色。
3.4.3.5 实例说明
如图3-34所示，为韩国立顿红茶网站（https://www.lipton.co.kr/）网页截图，整个页面使用黄色作为主色调，给人以明快、温暖的感受。
黄色系配色方案
黄色系的配色方案如下，如图3-35所示。
1. 在黄色中加入少量的蓝，会使其转化为一种鲜嫩的绿色。其高傲的性格也随之消失，趋于一种平和、潮润的感觉。
2. 在黄色中加入少量的红，则具有明显的橙色感觉，其性格也会从冷漠、高傲转化为一种有分寸感的热情、温暖。
3. 在黄色中加入少量的黑，其色感和色性变化最大，成为一种具有明显橄榄绿的复色印象。其色性也变的成熟、随和。
4. 在黄色中加入少量的白，其色感变的柔和，其性格中的冷漠、高傲被淡化，趋于含蓄，易于接近。
蓝色
在自然界中很难找到蓝色的事物，抑制食欲，让人没有胃口；能让人的身体分泌安定素，放松身体；在蓝色的环境中工作效率比较高；蓝色的服装通常会体现出一种忠诚和信赖的意味
3.4.5.1 蓝色的具象联想
海洋、天空、湖水。
3.4.5.2 蓝色的正面联想
学识、凉爽、和平、雄性、沉思、忠诚、正义、智慧、平静、悠久、理智、深远、无限、理想、永恒。
3.4.5.3 蓝色的负面联想
消沉、寒冷、分裂、冷漠、薄情。
3.4.5.4 蓝色的文化域
• 在世界大多数地区，蓝色代表男性。
• 在中国，蓝色代表小女孩。
• 在西方的婚俗中，蓝色代表爱情。
• 在伊朗，蓝色是丧服的色彩。
• 在世界范围内，蓝色是最容易被大众接受的色彩。
3.4.5.5 实例说明
如图3-40所示，为康师傅劲凉风暴FIR歌友会网站（https://icetea.allyes.com/）网页截图，整个页面使用蓝色作为主色调，给人以清爽、时尚的感受。
3.4.5.6 蓝色系配色方案
蓝色系的配色方案如下，如图3-41所示。
1. 如果在蓝色中分别加入少量的红、黄、黑、橙、白等色，均不会对蓝色的性格构成较明显的影响力。
2. 如果在蓝色中黄的成份较多，其性格趋于甜美、亮丽、芳香。
3. 在蓝色中混入小量的白，可使橙色的知觉趋于焦躁、无力。
