网页设计配色模板

基础的介绍了色彩学的一些知识,以及网页配色的原理和方法,指导网页制作者合理的搭配网页色彩。

随着因特网的发展与普及，越来越多的企业和个人都把与其相关的信息组织成五彩缤纷的网页，用于在网络上进行展示以达到信息交流的目的。

关于网页的制作技术，无论是Frontpage，Dreamwaver，Fireworks，还是Asp，Javascript，相信你都已经游刃有余。但在网页的设计过程中，你是否有过为了几种色彩的巧妙搭配而一筹莫展呢！

网页色彩的完美搭配，对于一个图形艺术设计师来说，那简直就是小菜一碟。但对于一个既想拥有自己的完美页面而又没有专业美术功底的普通大众来讲，那可就不是一件简单的事情了。

本文从“色环”的研究角度出发，就网页设计中如何利用色彩搭配的原则问题进行探讨，相信你看了此文之后，对你的网页设计能起到一定的帮助作用。

●基本色

我们知道可以把一条连续彩虹中的“可视光”分解成从蓝到红的色谱（图1）。

我们也看到，或许应用过，通过把两种或两种以上的颜色混合在一起，就可以得到一种特殊的颜色。从本质上讲，色环（图2）就是色谱可以看到的颜色所形成的线性连续环（如图2所示）。

一个色环通常包括12种明显不同的颜色。而对于艺术设计师充分理解的色环和色论的重要方面，

网页设计,色彩构成、设计教学

网页设计配色应用实例剖析之黄色系讲解

作者：黎芳 原创

黄色是阳光的色彩，具有活泼与轻快的特点，给人十分年轻的感觉。象征光明、希望、高贵、愉快。浅黄色表示柔弱，灰黄色表示病态。它的亮度最高，和其他颜色配合很活泼，有温暧感，具有快乐、希望、智慧和轻快的个性，有希望与功名等象征意义。黄色也代表着土地、象征着权力，并且还具有神秘的宗教色彩。

黄色的性格冷漠、高傲、敏感、具有扩张和不安宁的视觉印象。

浅黄色系明朗、愉快、希望、发展，它的雅致，清爽属性，较适合用于女性及化妆品类网站。

中黄色有崇高，尊贵，辉煌、注意、扩张的心理感受。

深黄色给人高贵、温和、内敛、稳重的心理感受。

下面我们根据黄色系不同属性邻近色、同类色的高纯度低纯度色彩搭配做不同的举例分析。

→ 黄色系网页例图：

黄色系网页例图

黄色系分析：

黄色是所有彩色中明度最高的颜色。上图看到HSB模式的H数值是60度，正是正黄

网页设计,色彩构成、设计教学

色，但RGB数值中加入了B蓝色数值为51，因此降低了HSB的饱和度S为80％，但是大面积的 黄色仍使得该页面色彩明亮显眼。

辅助色是纯黑色，非色彩明度最低的颜色。

大面积显眼的正黄色有黑色的线条压制，黄色顿时显得沉稳，页面增添内容感。

白色虽

存档资料成绩：

课程设计报告书

课程名称网页设计与制作

题目设计个人网站主页

分院电信分院

专业班级电子商务

学号

学生姓名

指导教师

2011 年 6月 20日

课程设计评阅意见

评阅人__________职称________

年月日

目录

第1章课程设计任务书 .................................. 错误!未定义书签。

一、课程设计题目设计个人网站主页............... 错误!未定义书签。

二、课程设计工作：................................... 错误!未定义书签。

三、课程设计的内容要求：............................. 错误!未定义书签。

1、课程设计要求.................................. 错误!未定义书签。

2、课程设计内容.................................. 错误!未定义书签。

第2章课程设计目的 .................................... 错误!未定义书签。

第3章课程设计内容................................... 错误!未定义书签。

设计一选题的

存档资料 成绩：

课程设计报告书

课程名称 网页设计与制作

题 目 设计个人网站主页 分 院 电信分院 专业班级 电子商务 学 号 学生姓名 指导教师

2011 年 6月 20日

课程设计评阅意见

等 级 序号 项 目 优秀 1 课程设计态度评价 2 出勤情况评价 3 任务难度评价 4 工作量饱满评价 5 设计中创新性评价 6 论文书写规范化评价 7 综合应用能力评价 良好 中等 及格 不及格

评阅人__________职称________

年

第一章：决定整体配色的理论 1、

扩充色相的范围，体现丰满的效果：在色相差异没有红、蓝、黄三色那样差异明显时，充分展现12种色相的设计方法，运用原色搭配其他色彩最易打动读者。色彩越素雅，所形成的视觉冲击效果就越弱。颜色的对比色设计增加了画面的视觉冲击力。土黄色营造出怀旧、原始的氛围。 2、 3、 4、 5、

暖色系：红、橘红、橘黄、黄 冷色系：蓝紫、蓝、蓝绿、绿 中性色系：紫红、紫、黄绿、翠绿

红色：纯度最高，色彩鲜明。彰显热情的色彩，给人留下强烈的印象，刺激人的情感。面积越大，视觉冲击效果越强。衬托料理的红色，暖色系色彩有增加食欲的功能。营造热情、温暖、优雅、时尚、活泼、可爱等印象。 6、 7、

冷色系：寒冷、阴暗的同时体现镇静感和清凉感的色彩。稳定人的情绪，营造温和、安逸的氛围。给人清爽、温和、安逸的印象。

成人印象：明度、纯度都较低的配色营造都市成人印象。在暗色调中展现高雅的都市成人，女性应以红、紫红、紫色等色相为中心，男性应以冷色系的蓝色色相为中心。茶色系：不失沉稳，深蓝色、藏青色中融入灰色：事业有成。人们的年龄越大，往往越喜欢纯度较低的自然色彩。 8、

儿童印象：明度、纯度都较高的配色营造欢乐、明朗的儿童印象。面对年纪稍大的儿童，中

第一章：决定整体配色的理论 1、

扩充色相的范围，体现丰满的效果：在色相差异没有红、蓝、黄三色那样差异明显时，充分展现12种色相的设计方法，运用原色搭配其他色彩最易打动读者。色彩越素雅，所形成的视觉冲击效果就越弱。颜色的对比色设计增加了画面的视觉冲击力。土黄色营造出怀旧、原始的氛围。 2、 3、 4、 5、

暖色系：红、橘红、橘黄、黄 冷色系：蓝紫、蓝、蓝绿、绿 中性色系：紫红、紫、黄绿、翠绿

红色：纯度最高，色彩鲜明。彰显热情的色彩，给人留下强烈的印象，刺激人的情感。面积越大，视觉冲击效果越强。衬托料理的红色，暖色系色彩有增加食欲的功能。营造热情、温暖、优雅、时尚、活泼、可爱等印象。 6、 7、

冷色系：寒冷、阴暗的同时体现镇静感和清凉感的色彩。稳定人的情绪，营造温和、安逸的氛围。给人清爽、温和、安逸的印象。

成人印象：明度、纯度都较低的配色营造都市成人印象。在暗色调中展现高雅的都市成人，女性应以红、紫红、紫色等色相为中心，男性应以冷色系的蓝色色相为中心。茶色系：不失沉稳，深蓝色、藏青色中融入灰色：事业有成。人们的年龄越大，往往越喜欢纯度较低的自然色彩。 8、

儿童印象：明度、纯度都较高的配色营造欢乐、明朗的儿童印象。面对年纪稍大的儿童，中

网 页 网页名称：专业名称：班级名称：姓 名：学 号：完成时间：设 计 说 明 书

博客 软件技术 软件一班 20135533116 一月3号

“XXXX（网站标题）”网页设计说明书

一、网站规划设计说明

注：请按以下模板填写，文字说明必须与所设计的网站实际内容严格对应，文中所有红字

部分属于说明注释的部分，填好后应全部删除红字。

1、网站需求和目的 简述本网站制作的目的，面向的用户群。网站具备的功能和期望达到的目标。 目的：简单的博客制作 面向对象：全体客户 功能：简单的链接

期望：实现人机交流及人人网上互动

2、网站栏目规划

简要说明一下栏目设计，共几个栏目。 栏目1:index.html,主页 栏目2:link，链接页（音乐） 栏目3:link1，链接页（文字） 栏目4:link2，链接页（图片） 栏目5：link3，链接页（视频）

3、网页内容规划

首页中的内容版块包含以下几个部分： 页面头部：LOFTER博客

栏目导航：图片链接（视频，文字，音乐，图片） 具体内容：博主头像，好友作品，及几张图片 版权声明：计算机少年|power by lofter 首页截图（index.html）：

二级栏目页截图（请说

设计师谈配色

一、橙色

使用了高亮度橙色的站点通常都会给人一种晴朗新鲜的感觉，而通过将黄色、黄绿色等类似颜色与成色搭配使用，通常都能得到非常好的效果。同时，中等色调的橙色类似于泥土的颜色，所以也经常用来创造自然的氛围。

橙色是可以通过变换色调营造出不同氛围的典型颜色，它既能表现出青春的活力也能够实现沉稳老练的效果，所以橙色在网页配色中的使用范围是非常广泛的。

Color Point:

橙色通常会给人一种朝气活泼的感觉，它通常可以是原本抑郁的心情豁然开朗。

在东方文化中，橙色象征着爱情和幸福。充满活力的橙色会给人健康的感觉，且有人说橙色可以提高厌食症患者的食欲。有些国家的僧侣主要穿着橙色的僧侣服，他们解释说橙色代表着谦逊。

二、黄绿色

黄绿色时而能够表现出自然的感觉，时而能够表现出未来虚幻的感觉。 原本这两种印象之间有很大的差异，但黄绿色就像穿越时间隧道那样能够自由自在地表现出这两种截然不同的感觉。

在网页中，黄绿色通常与蓝色搭配使用。总的来说，黄绿色主要用于表现温暖亲切的感觉或高科技神秘虚幻的感觉。 Color Point:

黄绿色和草绿色都会让人联想起大自然。黄绿色同时含有黄色和绿色两种颜色的

第一章：决定整体配色的理论 1、

扩充色相的范围，体现丰满的效果：在色相差异没有红、蓝、黄三色那样差异明显时，充分展现12种色相的设计方法，运用原色搭配其他色彩最易打动读者。色彩越素雅，所形成的视觉冲击效果就越弱。颜色的对比色设计增加了画面的视觉冲击力。土黄色营造出怀旧、原始的氛围。 2、 3、 4、 5、

暖色系：红、橘红、橘黄、黄 冷色系：蓝紫、蓝、蓝绿、绿 中性色系：紫红、紫、黄绿、翠绿

红色：纯度最高，色彩鲜明。彰显热情的色彩，给人留下强烈的印象，刺激人的情感。面积越大，视觉冲击效果越强。衬托料理的红色，暖色系色彩有增加食欲的功能。营造热情、温暖、优雅、时尚、活泼、可爱等印象。 6、 7、

冷色系：寒冷、阴暗的同时体现镇静感和清凉感的色彩。稳定人的情绪，营造温和、安逸的氛围。给人清爽、温和、安逸的印象。

成人印象：明度、纯度都较低的配色营造都市成人印象。在暗色调中展现高雅的都市成人，女性应以红、紫红、紫色等色相为中心，男性应以冷色系的蓝色色相为中心。茶色系：不失沉稳，深蓝色、藏青色中融入灰色：事业有成。人们的年龄越大，往往越喜欢纯度较低的自然色彩。 8、

儿童印象：明度、纯度都较高的配色营造欢乐、明朗的儿童印象。面对年纪稍大的儿童，中

一条：空间配色不得超过三种，其中白色、黑色不算色。
第二条：金色、银色可以与任何颜色相陪衬，金色不包括黄色，银色不包括灰白色。
第三条：在没有设计师指导的情况下，家居最佳配色灰度是：墙浅，地中，家私深。
第四条：厨房不要使用暖色调，黄色色系除外。
第五条：打死也不要深绿色的地砖。
第六条：坚决不要把不同材质但色系相同的材料放在一起，否则，您会有一 半的机会犯错。
第七条：想制造明快现代的家居味，那么您就不要选用那些印有大花小花的东西植物除外，尽量使用素色的设计。
第八条：天花板的颜色必须浅于墙面或与墙面同色。当墙面的颜色为深色时，天花板必须采用浅色。天花板的色系只能是白色或与墙面同色系。
第九条：空间非封闭贯穿的，必须使用同一配色方案；不同的封闭空间，可以使用不同的配色方案。
说明：在一般的室内设计中，都会将颜色限制在三种之内。当然，这不是绝对的。由于专业的室内设计师熟悉更深层次的色彩关系，用色可能会超出三种，但一般只会超出一种或两种。
限制三种颜色的定义
1三种颜色是指在同一个相对封闭空间内，包括天花、墙面、地面和家私的颜色。客厅和主人房可以有各成系统的不同配色，但如果客
厅和餐厅是连在一起的则视为同一空间。
2白色、黑色、灰色、金色、银