色彩搭配在网站中的运用

《色彩搭配在网站中的运用》由会员分享，可在线阅读，更多相关《色彩搭配在网站中的运用（19页珍藏版）》请在金锄头文库上搜索。

1、 第 3 章 色彩搭配在网站中的应用 色彩本身具 有非常微妙 的表现力， 它们可以产 生出一种刺 激人们大脑 中对某种形 式 存在 的 物 体 的 共 鸣 ， 展 现 出 对 待 生 活 的 新 的 看 法 与 态 度 。 合 理 使 用 色 彩 扩 大 了 设 计 者创作的想像空间，赋予了创作新的不定性。 3.1 网页配色 网页的色彩搭配往往是令初学者感到头疼的问题， 尤其是那些完全没有美术基础的人。对 于 一 个 商 业 网 站 而 言 ， 到 底 用 什 么 样 的 色 彩 进 行 搭 配 ， 才 能 既 好 看 又 合 理 呢 ？ 本节将从最基础的知识开始，帮助读者掌握色彩的使用。 3

2、.1.1 色彩的基本知识 1从色谱开始 一条连续彩虹中的 “可视 光 ”分解成从蓝到红的色谱，如图 3-1 所示。 图 3-1 色谱 在色谱中，线性罗列了所有的基本颜色，也是所有颜色的根本。 2色环 在从红到紫 的光谱中， 等间的选择 两种或两种 以上的颜色 ，相邻的两 个色相互混 合 又得 到 另 一 种 特 殊 的 颜 色 。 如 此 周 而 复 始 ， 从 而 构 成 一 个 首 尾 相 交 的 环 ， 被 称 为 孟 赛尔色相环，即 色环 。从本 质上 讲，色 环就 是色谱 可以 看到的 颜色 所形成 的线 性连续 环。 如图 3-2所示就是一个色环。 图 3-2 色环 3三原色的概念

3、 如同大家所 知道的，三 原色是能够 按照一些数 量规定合成 其他任何一 种颜色的基 色 。 所 有 的 颜 色 其 实 都 是 由 三 原 色 按 照 不 同 的 比 例 混 合 而 来 。 色 彩 的 三 原 色 为 红 、 黄 、蓝，而色光的三原色为红、绿、蓝。 下面将介绍几个关于色彩的重要概念。 z 色相：指颜色的属性，是红色、绿色还是蓝色。如图 3-3 所示，分别为同一张图片的三种色相。 图 3-3 同一张图片不同色相 z 纯度：也称 作饱和度， 是指在同等 明度的条件 下，颜色从 灰色到纯色 的变化。如图 3-4 所示为 同一张图片，饱和度分别为- 100、 0、 +100 时的

4、状态。 图 3-4 同一张图片不同纯度 z 明度：从黑到白中间增加 9 个均匀过渡的灰度阶段，被称为明度，也叫明度尺。如图 3-5 所示 为同一张图片明度分别为- 50、 0、 +50 时的状态 。 36 第3章 色彩搭配在网站中的应用 Part 1基础篇Part 2实例篇Part 3技术篇图 3-5 同一张图片不同明度 3.1.2 常见的配色方案 1近似色 近似色是已 给出的颜色 之外的任何 一种颜色。 如果从橙色 开始，它的 两种近似色 应 该选择红和黄。如图 3-6 所 示，为近似色在色环上的位置。 用近似色的颜色主题可以实现色彩的融洽与融合。如图 3-7 所示，列 出了几种近似色的搭配

5、方案。 图 3-6 近似色 图 3-7 使用了近似色的配色方案 如图 3-8 所 示，为使用了近似色搭配方式的商业网站。蓝色系的搭配，给人以清凉、专业的感觉。 图 3-8 使用了近似色的商业网站 37 2补充色 补充色也叫对比色，是指在色环中的直接位置相对的颜色，如图 3-9 所示 。 如果想要使网站中的色彩强烈突出、富有冲击力的话，可选择对比色。 假如正在组合一幅柳丁的图片，用蓝色背景将使柳丁更加突出。如图 3-10 所示。 图 3-9 补充色 图 3-10 蓝色背景下的柳丁 如图 3-11 所 示 ， 为使用了补充色的网站。 大块的橙色和蓝色用到一起， 具有强烈的冲击力，达到了视觉上的震撼

6、效果。 图 3-11 使用了补充色的网页 3分离补色 分离补色可以由 23 种颜色组成。在色环上选择一种颜色，它的补色就在色环的另一面。 可以使用补色旁边的一种或多种颜色。 这样的一组颜色叫做分离补色， 如图 3-12 所示 。 分离补色的 搭配可以起 到类似补充 色的强烈对 比作用，但 有近似色的 缓冲，可以 使 页面效果更加柔和。 如图 3-13 所示， 为 使用了分离补色搭配方式的网站。 这个网站给人的感觉是色彩鲜明，但是又不会过于突出。 38 第3章 色彩搭配在网站中的应用 Part 1基础篇Part 2实例篇Part 3技术篇图 3-12 分离补色 图 3-13 使用了分离补色的网站

7、 4组色 组色是色环上距离相等的任意 3 种 颜色。如图 3-14 所示为色 环上的一组组色。 图 3-14 色环上的一组组色 因为 3 种颜色形成了对比关系，所以组色被用作一个色彩主题时，会对浏览者造成紧张的情绪。一般在商业网站中，不采用组色的搭配。 3.1.3 配色的选择 配色是浏览者访问主页时目光无法回避的设计要素。 当浏览者看到网站标题的一瞬间，已 经 决 定 了 配 色 的 效 果 不 可 轻 视 。 在 不 经 意 间 ， 浏 览 者 对 网 站 的 印 象 就 被 固 定 下 来，就好比 初 次 拜 访 别 人 家 ， 和 主 人 谈 话 之 前 ， 看 到 客 厅 的 装 饰

8、风 格 ， 便 可 以 大 致 推 测 出 主人的性格。 因此，根据 网站的整体 风格来选定 网站的配色 十分重要。 当网站的内 容、标题和 配 色一 致 时 ， 就 能 发 挥 最 大 的 效 用 。 欢 快 的 内 容 与 明 快 的 配 色 相 叠 加 ， 可 以 传 递 出 发 自内心的喜悦。相反，和网站内容不相配的颜色，会引起混乱、产生破坏性的效果。 如图 3-15 所 示，为 Dior 国际网站的香水产品宣传页，左图使用了金色作为网页的主色 调 ， 显 得 高 贵 、 典 雅 ， 烘 托 出 了 产 品 的 高 格 调 和 高 品 味 。 右 图 使 用 了 蓝 色 的 色 调，虽

9、然也 显 示 出 了 页 面 的 和 谐 ， 但 无 法 表 现 出 产 品 的 内 涵 ， 因 此 让 人 感 觉 有 些 离 题 ， 冲 淡了网页的主题。 39 图 3-15 根据网站内容确定配色 本节将通过介绍几种颜色搭配方案的效果，帮助用户掌握利用颜色定位网站的技巧。 1色调的选择 色调包括鲜 艳的色调、 柔和的色调 、亮色调、 暗色调等等 ，是配色的 各项因素中 最 有决定权的一种。例如如图 3-16 所示 ，是鲜艳的色调。 图 3-16 鲜艳的色调 如果网站采用的配色是在这种色调的范围内， 那么无论在色相和对比量上下多少功夫，都无法表现出稳重的印象。因此选择合适的色调非常重要。 2

10、色调的分析 （ 1）鲜艳的 色调 所谓鲜艳的 色调，即不 与黑、白、 灰进行混合 的，只有纯 色的色调。 这种色调的 选 用会给人以强有力的、 生机勃勃的年轻人的感觉。 如图 3-17 所示便是一个使用了鲜艳色调的网站。大片的黄色进行搭配，给人热情洋溢的感觉。打开网页，欢快的气息扑面而来。 （ 2）深色调 将鲜艳的色 调稍微加一 点黑色，便 成为了深色 调。深色调 传达了有力 、强烈的男 性 形象。 如图 3-18 所示， 便是 一个使用了深色调的网站。 用了红色的搭配， 但是由于红色中混合了黑色，便给人以更加沉稳的感觉。 图 3-17 使用了鲜艳色调的网站 图 3-18 使用了深色调的网站

11、40 第3章 色彩搭配在网站中的应用 （ 3）亮色调 将鲜艳的色 调稍微加一 点白色，便 成了亮色调 。与鲜艳色 调相比，亮 色调略显得 温 柔一点，是大多数人的喜爱。如图 3-19 所示，便是 一个使用了亮色调的网站。 （ 4）淡色调 Part 1基础篇Part 2实例篇Part 3技术篇将亮色调再 加一点白色 ，便成了淡 色调。淡淡 的颜色，可 以给人清新 的感觉，令 人 联想 起 婴 儿 的 肌 肤 ， 给 人 以 最 温 柔 的 感 觉 ， 远 离 商 业 的 形 象 。 不 少 个 人 网 站 采 用 的 就是淡色调， 如图 3-20 所示， 便是 一个使用了淡色调的网站。 淡淡的蓝

12、色， 给人以清新的感觉， 搭配网站简单的布局，营造了一个轻松的氛围。 图 3-19 使用了亮色调的网站 图 3-20 使用了淡色调的网站 （ 5）浑浊色 调 将淡色调稍 微加一点灰 ，便成了浑 浊色调，产 生了明亮但 不会过于鲜 艳的感觉， 塑 造了稳定的都市形象。如图 3-21 所示 ，便是一个使用了浑浊色调的网站。 同样是使用了蓝色，但是由于给淡色调中混合了灰色，给人以更加稳定的观感。 （ 6）中间色 调 给亮色调加一点黑， 就构成了中间色调， 可以给人最沉稳的成人印象。 如图 3-22 所示，便是一个使用了中间色调的网站。 图 3-21 使用了浑浊色调的网站 图 3-22 使用了中间色调

13、的网站 这是一个典型的商业网站，亮色调的蓝色混合黑色的使用，塑造了沉稳的公司形象。 41 （ 7）暗色调 将亮色调稍 微加一点灰 色，就构成 了暗色调。 暗色调给人 的感觉不仅 仅是鲜艳色 调 、亮 色 调 和 淡 色 调 的 那 种 单 纯 而 明 快 的 气 氛 ， 更 表 达 了 一 种 沉 稳 而 安 静 的 、 素 雅 的 气氛。如图 3-23 所示 ，为使用了暗色调的网站。 图 3-23 使用了暗色调的网站 这个网站也是使用蓝色作为主色相，但暗色调的使用使得整个网站给人安宁的感觉。 3色相的选择 在前面介绍 色彩的基本 知识时，已 经介绍了色 相的概念。 用红、绿、 蓝这样的名 称

14、 来区 别 颜 色 ， 其 实 这 种 区 别 就 是 色 相 的 区 别 。 根 据 不 同 颜 色 在 色 环 上 的 位 置 关 系 ， 便可以进行配色的变化。 通常在制作 商业网站的 时候，选用 色彩都希望 传达一种稳 重、安定的 印象。在这 种 情况下，多数采用的就是同系色或同类色。如图 3-24 所示为色 环上的同类色。 如图 3-25 所 示为使用了同类色配色的网站。 图 3-24 色环上的同类色 图 3-25 使用了同类色的网站 虽然整个网 站使用的都 是冷色调， 但由于控制 住了颜色的 混合及明度 对比，所以 并 没有给人过于冷淡的感觉。 当使用一种单色， 然后增加或降低亮度

15、时， 产生的不同颜色就是同系色。 如图 3-26 所示为同系色。 42 第3章 色彩搭配在网站中的应用 图 3-26 同系色 如图 3-27 所 示，为使用了同系色的网站。 Part 1基础篇Part 2实例篇Part 3技术篇图 3-27 使用了同系色的网站 绿色虽然象 征着快乐与 希望，但由 于整个网站 采用了同系 色，因此在 快乐中也传 达 出沉稳的印象。 4不同色相的分析 不同的色相 ，会向用户 传达不同的 信息。因此 色相的选择 对于表达公 司的形象也 有 至关 重 要 的 作 用 。 色 相 按 照 色 系 分 ， 可 分 为 暖 色 和 冷 色 。 下 面 将 分 别 介 绍 这 两 种 色 系的不同效果。 （ 1）暖色 暖色由红色 调组成。比 如红色、橙 色和黄色。 它们给选择 的颜色赋予 温暖、舒适 和 活力， 也产生了一种色彩向浏览者显示或移动， 并从页面中突出出来的可视化效果。 如图 3-28所示，为色环上的暖色系。 如果公司希 望展现给客 户的是一种 温暖、温馨 的形象，那 么可以考虑 选择暖色制 作 公司的网站。如图 3-29 所 示，便是一个使用了暖色的网站