《网站及页面的色彩搭配》由会员分享，可在线阅读，更多相关《网站及页面的色彩搭配（71页珍藏版）》请在金锄头文库上搜索。
1、网站及页面的色彩搭配主讲：马冰1主要内容：色彩的搭配常用的网页色彩搭配方式网页色彩的规划色彩搭配技巧网页配色赏析21 色彩基础知识31.1 色彩的基本概念在计算机中表示颜色的模式有好几种，在HTML网页设计中使用的是RGB模式。红光、绿光、蓝光是色光加光混合的三基色， 通过红光、绿光、蓝光不同比例的组合，能产生任何颜色的光。 计算机的显示器显示画面是靠显示器屏幕的微小的发光点发出不同比例的红光、绿光、蓝光三种颜色的光而显出千变万化的画面。 RGB色彩模式就是用R表示红光的分量，用G表示绿光的分量，用B表示蓝光的分量，RGB数据就可以表示出任何一种颜色， 任何一种颜色也可以用一个RGB数据表示出
2、来。在文字格式一文中曾说过color属性的取值有用英文关键字、16进制颜色代码、rgb函数三种类型。 4#FF0000：#FF0000可分为四个部分#、FF、00、00。#开头表示这个颜色是16进制颜色代码，后三部分分别表示红光分量、绿光分量、蓝光分量，我们可以这样理解#FF0000这个颜色代码：红光分量是16进制的FF(16进制的FF等于十进制的255);绿光分量是16进制的0;蓝光分量是16进制的0的一个颜色。16进制的个位数正数由小到大分别是0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F 。 现在再来分析#FF0000这个颜色代码， 16进制颜色代码每一基色只用两位数来表
3、示，所以每一基色分量的最大值FF，最小值是0， #FF0000 里红光分量已达最大，绿光 和绿光都是0，所以它是单纯的红色 。5色光混合示意图表红光、绿光、蓝光是色光加光混合的三基色， 通过红光、绿光、蓝光不同比例的组合，能产生任何颜色的光。6表中第一行是红光和绿光的混合效果，左边的格子里的颜色的红光成为多，右边的格子里绿光的成分少，第八第九个格子里红光和绿光的成分一样多 。 从第八和第九个格子可以看出红光+绿光=黄光。 当红光和绿光的万分一样多时混合出的黄光是既不偏绿也不偏红的。 当红光比红绿光多时混合出的黄光就会偏红，当绿光比红光多时混合出的黄光就会偏绿。 上表中第二行是绿光和蓝光混合效果
4、，第三行是蓝光和红光混合效果请自行分析体会。 7三色光混合示意图: 这个图表可以是这样认为红光从左边向右边 照射,绿光从右边向左边照射,蓝光从下方向上方 照射。三光混合中如果两种色光和光量较多，则 混合出的颜色接近光量较多的两种色光混合出的 颜色，在上图中第一二行蓝光较少，红光和绿光 较多，则第一二行是红光和绿光的混合效果。第 三行以下蓝光逐渐增加，在左边绿光较少，左边 的一二列是红光和绿光的混合效果，在右边红光 较少，右边的一二列中是绿光和蓝光的混合效果 。在最后一行的第八第九个格子里红光绿光蓝光 三种色光的份量一样，则三原色光混合成了白色 。8非彩色和彩色：颜色分两类。非彩色是指黑，白，灰
5、系统色。彩色是指除了非彩色以外的所有色彩。 网页制作用彩色还是非彩色好呢？根据专业的研究机构研究表明：彩色的记忆效果是黑白的3.5倍。也就是说，在一般情况下，彩色页面较完全黑白页面更加吸引人。任何色彩都有饱和度和透明度的属性，属性的变化产生不同的色相，所以至少可以制作几百万种色彩。 9色调：通常的做法是：要考虑主页底色（背景色）的深、浅，这里借用摄影中的一个术语，就是“高调”和“低调”。底色浅的称为高调；底色深的称为低调。底色深，文字的颜色就要浅，以深色的背景衬托浅色的内容（文字或图片）；反之，底色淡的，文字的颜色就要深些，以浅色的背景衬托深色的内容（文字或图片）。这种深浅的变化在色彩学中称为
6、“明度变化”。有些主页，底色是黑的，但文字也选用了较深的色彩，由于色彩的明度比较接近，读者在阅览时，眼睛就会感觉很吃力，影响了阅读效果。当然，色彩的明度也不能变化太大，否则屏幕上的亮度反差太强，同样也会使读者的眼睛受不了。 10色彩的象征意义在色彩的运用上，可以根据主页内容的需要和自己的喜好，分别采用不同的主色调。因为色彩具有象征性，例如：嫩绿色、翠绿色、金黄色、灰褐色就可以分别象征着春、夏、秋、冬。其次还有职业的标志色，例如：军警的橄榄绿，医疗卫生的白色等。色彩还具有明显的心理感觉，例如冷、暖的感觉，进、退的效果等。另外，色彩还有民族性，各个民族由于环境、文化、传统等因素的影响，对于色彩的喜
7、好也存在着较大的差异。充分运用色彩的这些特性，可以使我们的主页具有深刻的艺术内涵，从而提升主页的文化品位。 11色彩的象征意义暗色中含高亮度的对比，会给人清晰、激烈、很有强烈的刺激如深黄到刺黄色。暗色中间含高亮度的对比，会给人沉着、稳重、深沉的感觉觉，如深红中间是刺红，中性色与低高度的对比，给人模糊、朦胧、深奥的感觉，如草绿中间是浅灰、纯色与高亮度的对比，给人跳跃舞动的感觉。如黄色与白色的纯色与低亮度的对比，给人轻柔、欢快的感快。如浅蓝色与白色纯色与暗色的对比，给人强硬，不可改变的感觉。 12色彩的冷暖感觉暖色调：即红色、橙色、黄色、赭色等色彩的搭配，可使主页呈现温馨、和煦、热情的氛围。 冷色
8、调：即青色、绿色、紫色等色彩的搭配，可使主页呈现宁 静、清凉、高雅的氛围。 13对比色调：即把色性完全相反的色彩搭配在同一个空间里。例如：红与绿、黄与紫、橙与蓝等的搭配，可以产生强烈的视觉效果，给人亮丽、鲜艳、喜庆的感觉。当然，对比色调如果用得不好，会适得其反，产生俗气、刺眼的不良效果。这就要把握“大调和，小对比”这一个重要原则，即总体的色调应该是统一和谐的，局部的地方可以有一些小的强烈对比。 14色彩的象征意义 15色彩的象征意义红色强有力，喜庆的色彩。具有刺激效果，容易使人产生冲动，是一种雄壮的精神体现，愤怒，热情，活力的感觉。红色容易引起人的注意，易使人兴奋、激动、紧张、冲动，它还是一种
9、造成人视觉疲劳的颜色。16色彩的象征意义橙色也是一种激奋的色彩，具有轻快，欢欣，热烈，温馨，时尚的效果。17色彩的象征意义黄色亮度最高，有温暧感，具有快乐、希望、智慧和轻快的个性，给人感觉灿烂辉煌 。黄色是各种色彩中最为娇气的颜色，只要在纯黄色中混入少量 的其他色，其色相感和色性均会发生较大程度的变化。18色彩的象征意义绿色介于冷暖色中间，显得和睦，宁静，健康，安全的感觉。和金黄、淡白搭配，产生优雅，舒适的气氛。19色彩的象征意义蓝色永恒、博大，最具凉爽、清新，专业的色彩。和白色混合，能体现柔顺，淡雅，浪漫的气氛，给人感觉平静、理智。 20色彩的象征意义紫色紫色的明度在所有色彩的色料中是最低的
10、。它给人一种优雅、高贵、魅力、自傲、神秘的感觉。21色彩的象征意义粉色女孩子最喜欢这种色，温馨、浪漫的感觉。22色彩的象征意义黑色具有深沉，神秘，寂静，悲哀，压抑的感受 。黑色是最具有收敛性、沉郁的、难以琢磨的色彩，给人一种神秘感。同时，黑色还表示凄凉、悲伤、忧愁、恐怖，黑色甚至是死亡的象征，但若是运用得当，却能产生黑铁金属质感，时尚前卫，科技等都可以用黑色来形容。23色彩的象征意义白色具有洁白，明快，纯真，清洁的感受。24色彩的象征意义灰色具有平静、稳重、朴素、中庸，平凡，温和，谦让，中立和高雅的感觉 。25色彩的象征意义黑、白色不同时候给人不同的感觉，黑色有时感觉沉默、虚空，有时感觉庄严肃
11、穆。白色有时感觉无尽希望，有时却感觉恐惧和悲哀。26色彩的搭配27非彩色的搭配黑白是最基本和最简单的搭配，白字黑底，黑底白字都非常清晰明了。 灰色是万能色，可以和任何彩色搭配，也可以帮助两种对立的色彩和谐过渡。28彩色的搭配 1、色彩的鲜明性。网页的色彩要鲜艳，容易引人注目。2、色彩的独特性。要有与众不同的色彩，使得大家对你的印象强烈。3、色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。 4、色彩的联想性。不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，红色想到喜事等，选择色彩要和你网页的内涵相关联。29网页色彩掌握的过程 随着网页制作经验的积累，我们用色有
12、这样的一个趋势:单色-五彩缤纷-标准色-单色。一开始因为技术和知识缺乏，只能制作出简单的网页，色彩单一；在有一定基础和材料后，希望制作一个漂亮的网页，将自己收集的最好的图片，最满意色彩堆砌在页面上；但是时间一长，却发现色彩杂乱，没有个性和风格；第三次重新定位自己的网站，选择好切合自己的色彩，推出的站点往往比较成功；当最后设计理念和技术达到顶峰时，则又返朴归真，用单一色彩甚至非彩色就可以设计出简洁精美的站点。30网页色彩搭配的技巧 1、用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，(说得通俗些就是将 色彩变淡或则加深)，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。
13、2、用两种色彩。先选定一种色彩，然后选择它的对比色(在photoshop里按ctrl+shift+I)。我的主页用蓝色和黄色就是这样确定的。整个页面色彩丰富但不花稍。31网页色彩搭配的技巧 3、用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。确定色彩的方法各人不同，我是在photoshop里按前景色方框，在跳出的拾色器窗中选择“自定义”，然后在“色库”中选就可以了。4、用黑色和一种彩色。比如大红的字体配黑色的边框感觉很“跳“。 在网页配色中，忌讳的是： 1.不要将所有颜色都用到，尽量控制在三种色彩以内。 2.背景和前文的对比尽量要大，(绝对不要用花纹繁复的
14、图案作背景)，以便突出主要文字内容。32网页色彩搭配的技巧 在网页配色中，忌讳的是：1.不要将所有颜色都用到，尽量控制在三种色彩以内。 2.背景和前文的对比尽量要大，(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。33网页模板赏析34个人主页：海蓝色个人博客网站模板35个人主页：绿色风格个人网站模板 36个人主页：37个人主页：工具类个人网站模板38个人主页：某著名画家的个人网站模板 39个人主页：卡通个人主页网页模板 40个人主页：韩国风格个人网站模板41个人主页：清爽个人网页模板 42个人主页：个人博客网页模板 43个人主页：团队展示网页模板 44个人主页：个人主页网页模板 45
15、个人主页：个人主页网页模板 46个人主页：个人主页网页模板 47企业网站：济南田园乐橄榄油公司网页模板48企业网站：苗木网网站模板49企业网站：餐饮美食网站模板50企业网站：装饰公司网页模板51企业网站：购物商城网页模板52企业网站：53设计网页：滑雪网站模板54设计网页：55设计网页：56设计网页：57设计网页：58设计网页：59设计网页：60设计网页：61设计网页：62学校网站：中国现代史纲要精品教程教育网站模板63学校网站：中国现代史纲要精品教程教育网站模板64学校网站：小学网站模板65学校网站：周末大讲堂网站模板66学校网站：郑州大学综合设计研究院网站模板67学校网站：大学班级网站模板68政府网站：南昌市市政公用事业局网站模板69门户网站：博鳌亚洲论坛门户网站模板70The end!71
