网站及页面的色彩搭配.ppt

网站及页面的色彩搭配 主讲：马冰 主要内容： 色彩的搭配 常用的网页色彩搭配方式 网页色彩的规划 色彩搭配技巧 网页配色赏析 1 色彩基础知识 1.1 色彩的基本概念 在计算机中表示颜色的模式有好几种，在HTML网页设计中使用的是RGB模式。红光、绿光、蓝光是色光加光混合的三基色， 通过红光、绿光、蓝光不同比例的组合，能产生任何颜色的光。 计算机的显示器显示画面是靠显示器屏幕的微小的发光点发出不同比例的红光、绿光、蓝光三种颜色的光而显出千变万化的画面。 RGB色彩模式就是用R表示红光的分量，用G表示绿光的分量，用B表示蓝光的分量，RGB数据就可以表示出任何一种颜色， 任何一种颜色也可以用一个RGB数据表示出来。在文字格式一文中曾说过color属性的取值有用英文关键字、16进制颜色代码、rgb函数三种类型。 #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进制颜色代码每一基色只用两位数来表示，所以每一基色分量的最大值FF，最小值是0， #FF0000 里红光分量已达最大，绿光 和绿光都是0，所以它是单纯的红色 。 色光混合示意图表 红光、绿光、蓝光是色光加光混合的三基色， 通过红光、绿光、蓝光不同比例的组合，能产生任何颜色的光。 表中第一行是红光和绿光的混合效果，左边的格子里的颜色的红光成为多，右边的格子里绿光的成分少，第八第九个格子里红光和绿光的成分一样多 。 从第八和第九个格子可以看出红光+绿光=黄光。 当红光和绿光的万分一样多时混合出的黄光是既不偏绿也不偏红的。 当红光比红绿光多时混合出的黄光就会偏红，当绿光比红光多时混合出的黄光就会偏绿。 上表中第二行是绿光和蓝光混合效果，第三行是蓝光和红光混合效果请自行分析体会。 三色光混合示意图: 这个图表可以是这样认为红光从左边向右边照射,绿光从右边向左边照射,蓝光从下方向上方照射。三光混合中如果两种色光和光量较多，则混合出的颜色接近光量较多的两种色光混合出的颜色，在上图中第一二行蓝光较少，红光和绿光较多，则第一二行是红光和绿光的混合效果。第三行以下蓝光逐渐增加，在左边绿光较少，左边的一二列是红光和绿光的混合效果，在右边红光较少，右边的一二列中是绿光和蓝光的混合效果。在最后一行的第八第九个格子里红光绿光蓝光三种色光的份量一样，则三原色光混合成了白色。 非彩色和彩色： 颜色分两类。非彩色是指黑，白，灰系统色。彩色是指除了非彩色以外的所有色彩。 网页制作用彩色还是非彩色好呢？根据专业的研究机构研究表明：彩色的记忆效果是黑白的3.5倍。也就是说，在一般情况下，彩色页面较完全黑白页面更加吸引人。 任何色彩都有饱和度和透明度的属性，属性的变化产生不同的色相，所以至少可以制作几百万种色彩。 色调： 通常的做法是：要考虑主页底色（背景色）的深、浅，这里借用摄影中的一个术语，就是“高调”和“低调”。底色浅的称为高调；底色深的称为低调。底色深，文字的颜色就要浅，以深色的背景衬托浅色的内容（文字或图片）；反之，底色淡的，文字的颜色就要深些，以浅色的背景衬托深色的内容（文字或图片）。这种深浅的变化在色彩学中称为“明度变化”。有些主页，底色是黑的，但文字也选用了较深的色彩，由于色彩的明度比较接近，读者在阅览时，眼睛就会感觉很吃力，影响了阅读效果。当然，色彩的明度也不能变化太大，否则屏幕上的亮度反差太强，同样也会使读者的眼睛受不了。 色彩的象征意义 在色彩的运用上，可以根据主页内容的需要和自己的喜好，分别采用不同的主色调。因为色彩具有象征性，例如：嫩绿色、翠绿色、金黄色、灰褐色就可以分别象征着春、夏、秋、冬。其次还有职业的标志色，例如：军警的橄榄绿，医疗卫生的白色等。色彩还具有明显的心理感觉，例如冷、暖的感觉，进、退的效果等。另外，色彩还有民族性，各个民族由于环境、文化、传统等因素的影响，对于色彩的喜好也存在着较大的差异。充分运用色彩的这些特性，可以使我们的主页具有深刻的艺术内涵，从而提升主页的文化品位。 色彩的象征意义 暗色中含高亮度的对比，会给人清晰、激烈、很有强烈的刺激如深黄到刺黄色。暗色中间含高亮度的对比，会给人沉着、稳重、深沉的感觉觉，如深红中间是刺红，中性色与低高度的对比，给人模糊、朦胧、深奥的感觉，如草绿中间是浅灰、纯色与高亮度的对比，给人跳跃舞动的感觉。如黄色与白