5使用fireworks-按钮示例.ppt

第6章 网页配色 介绍色彩的基本概念以及网页配色的基本方法 引子 网页设计是一种特殊的视觉设计，对色彩的依赖性很高 色彩设计同时还是网站风格设计的决定性因素之一 内容 色彩三要素 色彩模式 216网页安全色 制定配色方案 网页配色实例 色彩的三要素 在自然界中，颜色可以分为彩色和非彩色两大类 非彩色：指白色、黑色和各种深浅不一的灰色 彩色：其他所有颜色均属于彩色 自然界的色彩虽然各不相同，但任何色彩都具有三个基本属性 色相(Hue) 饱和度(Saturation) 明度(Brightness) 色相（Hue） 简写H，表示色的特质，是区别色彩的必要名称，例如红、橙、黄、绿、青、蓝、紫等 是不同波长的色光被感觉的结果 与色彩的强弱及明暗没有关系，只是纯粹表示色彩相貌的差异 光谱中有红、橙、黄、绿、蓝、紫六种基本色光 色相 原色 又称基本色，可以调配出其它颜色，但不能通过其它颜色调配而成。 光的三原色（加色） 红、绿、蓝 颜料的三原色（减色） 品红（红）、黄、青（蓝） 色相 原色 红、黄、蓝 二次色（间色） 红+黄=橙 黄+蓝=绿 蓝+红=紫 三次色（复色） 三原色和三间色再次混合而成的颜色 色相 色相 饱和度（Saturation） 饱和度是指色彩的鲜艳程度，也称色彩的纯度（Chroma）。 饱和度取决于该色中含色成分和消色成分(灰色)的比例。含色成分越大，饱和度越大；消色成分越大，饱和度越小。 取决于彩色中的白色光含量，白光含量越高，即彩色光含量就越低，色彩饱和度即越低，反之亦然。 其数值为百分比，介于0 - 100% 之间。所有非色彩的饱和度值为0，而纯彩色光的饱和度则为100%。 明度（Brightness） 是指色彩感觉的明亮或晦暗程度 色彩本身的明暗程度 如：黄色明度最高，紫色明度最低，绿、红、蓝、橙的明度相近，为中间明度。 一种色相在不同强弱光线下呈现的明暗程度 如：绿色中由浅到深，有粉绿、淡绿、翠绿等明度变化 色调 色调Tone——结合明度和纯度的概念 11种色调分别是指： 鲜明（Vivid）、高亮（Strong）、明亮（Bright）、清澈（Pale）、苍白（Very Pale）、灰亮（Light Grayish）、隐约（Light）、浅灰（Grayish）、阴暗（Dull）、深暗（Deep）、黑暗（Dark）。 色相色调体系 色相 色调（Hue Tone）体系中的10种色相： 红色（Red） 橙色（Yellow Red） 黄色（Yellow） 黄绿色（Green Yellow） 绿色（Green） 青绿色（Blue Green） 蓝色（Blue） 蓝紫色（Purple Blue） 紫色（Purple） 紫红色（Red Purple） 色相 色调（Hue Tone）116色体系 将前面所介绍的色相环与色调表结合在一起 由110种彩色颜色（色相10个等级 X 色调11个等级 = 110种颜色）和6种非彩色颜色所构成的 内容 色彩三要素 色彩模式 216网页安全色 制定配色方案 网页配色实例 色彩模式 RGB CMYK HSB RGB色彩模式 绝大部分的可见光谱可以用红、绿和蓝 (RGB) 三色光按不同比例和强度的混合来表示。 人们把红(Red)、绿(Green)、蓝(Blue)这三种色光称之为光的“三原色光”， RGB色彩模式就是以这三种颜色为基本色的一种体系。 RGB色彩模式 目前这种体系普遍应用于数码影像中，如：电视、计算机屏幕、数码相机、扫描仪等。 RGB值是从0至255之间的一个整数，不同数值叠加会产生不同的色彩。当三色数值相同时为无色彩的灰度色，而三色都为255时为最亮的白色，都为0时为黑色。 RGB色彩模式 CMYK色彩模式 CMYK分别代表青(Cyan)、品红(Magenta)、黄(Yellow)、黑(Black) 这是一种基于反光的色彩体系，常用于彩色印刷中 CMYK值是以浓度0-100%来表示，不同浓度叠加会产生不同的色彩。 理论上相同浓度的CMY叠加，则会变成黑色，但实际混合色料后并不会呈现黑色而是暗灰色，所以将黑色独立出来，增加印刷时颜色的范围。 HSB色彩模式 色相、饱和度和亮度的值 色相：H（Huge） 取值0-360度 饱和度：S（Saturation） 取值0 到 100% 亮度：B（Brightness） 取值0 到 100% 内容 色彩三要素 色彩模式 216网页安全色 制定配色方案 网页配色实例 216网页安全色 216网页安全色（216 Web Safety Color）是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的色彩集合 在网络上，即是一模一样的颜色，也会由于显示设备、操作系统、显卡及浏览器的不同而有不尽相同的显示效果