网页版式设计-7 淡色调

• 对比与调和就是形式美的变化与统一规律 在一定条件下，不同色彩之间的对比会有不同的效果。在不同的 环境下，多色彩给人一种印象，色彩单一给人另一种印象。 各种纯色的对比会产生鲜明的色彩效果，很容易给人带来视觉与 心理的满足。红、黄、蓝三种颜色是最极端的色彩，它们之间对比, 哪一种颜色也无法影响对方。 很多朋友都以为色彩对比主要是红绿、橙蓝、黄紫色的对比，实 际色彩对比范畴不局限于这些。是指各种色彩的界面构成中的面积、 形状、位置以及色相、明度、纯度之间的差别，使网页色彩配合增添 了许多变化、页面更加丰富多彩。
明度对比
• 明度对比可分为:彩色差的明度对比及非彩色差的明度对 比 是指色彩之间明暗程度的差别而形成的对比。是页面 形成恰当的黑、白、灰效果的主要手段。明度对比在视觉 上对色彩层次和空间关系影响较大。例如柠檬黄明度高， 蓝紫色的明度低，橙色和绿色属中明度，红色与蓝色属中 低明度。
→ 明度对比网页例图：
•
•
何为淡色调？
在我看来,淡色调应属于网页设计色彩中,颜色亮度偏高 的色调称为淡色调.
而这并不代表网页设计中的谈色调就是纯粹的高亮度, 我们所表现的淡色,是所有适合这一色调的网页设计模 式中以淡色为主色调!
•Байду номын сангаас色彩对比分析
• 纯度对比
是指不同色彩之间纯度的差别而形成的对比。色彩纯度可大致分为高 纯度、中纯度、低纯度三种。未经调和过的原色纯度是最高的，而间 色多属中纯度的色彩，复色其本身纯度偏低而属低纯度的色彩范围。 纯度的对比会使色彩的效果更明确肯定。
• 作业要求
• 3组淡色系网页格局图初步绘制 • (不限颜色)
面积调整
• 主次的面积区分。根据设计主题的需要， 在画面的面积上以一方为主色，于是就掌 控画面的色调作用，其他的颜色在使用面 积上拉开距离，使画面的主次关系更突出， 在统一的同时富有变化。
面积调整网页例图：http://
→ 紫色浅紫色网页例图：
→ 纯度对比网页例图：http://
• 纯度对比分析： 整个页面看起来异常艳丽刺激然而又非常的协调。以上数值主要 选取了几种较有代表性的颜色。 大家注意看，以上色彩除了粉红色，其他几组颜色都是高饱和度 高亮度的颜色，因此充分的发挥出了色彩的艳丽程度。包括粉红色在 内的几种灰色阶，在中间起到了和谐作用。白色能拉开相近色阶的空 间及明快页面的作用，在这里可以说是功不可没。 结论： 页面实际上用了不少颜色，配色大胆。抓住颜色主次冷暖的安排， 适度再加上和谐的过渡色灰色，实现了作者对该页面的轻松配色。从 多种高纯度的搭配协调能力上看，足可见作者对色彩设计搭配不一般 的功底。 这类网页配色非常能够体现出一个网站页面产品个性，配色难度 大。让人过目难忘
紫色低纯度配色应用网页例图：
• 紫色系分析：（低纯度配色：紫色+绿色） 该页面除了点睛色外，整体配色饱和度都很低，所以在视觉上呈 柔和状态。 主色调紫色的HSB模式H色相为308，数值稍向红色倾斜，由于饱 和度及明度降低，颜色呈现很平和，空间感增强。辅助色绿色H色相 为167，数值稍向蓝色偏移，从RGB模式上看，G为125（正绿色时为 255，R为0，B为0），R为82，B116，有这两色混合，因此饱和度和明 度都很低，然而在雅致的紫色背景的烘托下，较为突出了绿色的产品 这一主角，达到配色目的。另一辅助色灰色，为整体的柔和状态增添 了雅致的气息。 点睛色黄色的特质因素，无疑是这页面最响亮耀眼的颜色尽管使 用的面积较小，它是紫色的对比色，高纯度的黄色与低纯度的紫色形 成较强烈的视觉反差对比效果，也因此使得页面的沉闷得到一定程度 的缓解，提升页面配色的空间透亮感。 结论： 整体柔和的配色调子较吻合的体现了尊贵高雅的服饰感觉，并透 露出宁静、安稳、雅致的环境氛围，充分体现出了紫色运用的最大魅 力。
• 紫色系分析：（浅紫色） 该页面使用特性最高的紫色提亮为100％高明度的主色调，很容 易抓住人们的视线成为聚焦点，是非常大胆又时尚的配色。 辅色调则是使用冷色系代表的深蓝色，明度较低。主要是为了烘 托左边导航菜单，凸显上面的内容信息，由于人们对网页已然形成了 视觉惯性，也起到了很好的视觉引导作用。 主、辅色的搭配运用构成了较强烈的视觉对比效果。 另一辅色调浅蓝色，在主色调浅紫色的烘托下呈现稚嫩的感受， 里面的白色块起到浅紫的背景和浅蓝色调和、明快的作用。 点睛色的使用实际有不少，这里只选几种起到主要作用的颜色做 举例分析。中黄色运用得很珍贵，只在左上区域出现，旨在突出主题 文字的效果。其他配色主要是根据左下文字字母而来，红和绿色出现 在页面的浅紫色较为宽敞的位置，小范围的做色彩对比效果。其他点 睛色则极少的零星分布，既调和呼应又起到活跃于页面的角色作用， 以上这些都是点缀和渲染页面气氛不可缺少的配色元素。 结论： 在紫色中加入白色，可使紫色略显沉闷的特征消失，变得清秀、 优雅、娇气，并充满女性的魅力。 白色、粉紫色、天蓝色的颜色搭配，是比较稚嫩的配色，同时也 是最受少女欢迎的配色方案，这里运用也较得体。
点睛色黄色的特质因素无疑是这页面最响亮耀眼的颜色尽管使用的面积较小它是紫色的对比色高纯度的黄色与低纯度的紫色形成较强烈的视觉反差对比效果也因此使得页面的沉闷得到一定程度的缓解提升页面配色的空间透亮感
• 网页设计中常用色调格局讲解训练（2） --淡色调的表现
• 什么是色调?
• 网页页面中总是由具有某种内在联系的各种色彩，组成一个完整统一 的整体，形成画面色彩总的趋向，称为色调。也可以理解为色彩状态。 色彩给人的感觉与氛围，是影响配色视觉效果的决定因素。