当前位置:主页 > 网页教程 > 网页制作 > 网页配色 > 内容欢迎大家投稿

网页颜色论:创建属于自己的网站配色方案

时间:2010-04-19 11:11来源:未知 作者:大宝库 点击:读取中
阅读工具:字体:

在颜色论系列的前两部分,我们主要讨论了 颜色背后的意义 和关于 颜色的术语。尽管这些信息非常重要,但我相信很多人都非常想知道什么时候才开始进入讨论创建一些实质的配色方案。

好吧,本文,也就是本系列的第三部分将介绍这个问题。我们将从头开始讨论创建属于你自己的配色方案的方法。我们还将讨论传统的配色方案模式(例如单色设计,类比设计,互补设计等),以及如何创建自定义的并不严格基于一种模式的方案。在本文最后,你将学会使用工具和技巧为自己的设计项目创建漂亮的调色板。提高技能的最好方法是实践,因此为自己设定一个目标,每天创建一个新的配色方案是个好主意。

快速回顾

让我们先回顾一下第一部分和第二部分的内容。在第一部分,我们谈到了不同的国家和文化,所有的颜色都具有传承而固有的不同意义。这些含义对于网站访客对网站是如何理解的有直接影响,即使这种影响只是潜意识层面的。 你所选择的颜色对你试图创建的品牌标识既有可能起到促进作用,也可能妨碍其发挥作用。

在第二部分,我们讨论了颜色术语:色相(是什么颜色,如蓝色或红色),色度(色彩中包含的单种标准色成分的多少,缺乏白色,加入黑色或灰色),饱和度(颜色的鲜艳程度是强还是弱),明度(颜色是亮还是暗);色调(通过在纯的色相中加入灰色创建);阴影色(通过在纯的色相中加入黑色创建);以及浅色(通过在纯的色相中加入白色创建) 。对于要继续学习创建属于我们自己的配色方案来说,熟悉这些术语是非常重要的。

传统的配色方案类型

有许多使创建新方案更容易的预定义配色方案,对于初学者更是如此。下面是传统的方案,每一种有几个例子。


基本的12辐色轮是创建配色方案的重要工具。

单色

单色配色方案由不同的色调构成,是在特定色调内的阴影色和浅色。这是创建配色方案最简单的方法,因为它们都来自同一色相,因此尽管也有一定的可能,但是很难创建出一个不和谐的或者丑陋的方案。

示例:

这里有三个单色配色方案的例子。对于这些配色方案大部分来说,从左到右的第一个颜色通常被用作标题的颜色。第二个颜色将用于正文,或者也可用作背景。第三个颜色将可能用于背景,如果#2颜色被用作背景的话,那么它将被用于正文。而最后两种颜色将作为强调,或用在图形中。

类比

类比配色方案是仅次于单色的一个易于创建的配色方案。类比方案是由在12辐色轮中相邻的三种颜色创建的。一般来说,类比配色方案都具有相同的色度水平,但通过色调、阴影色和浅色的使用,我们可以增加这些方案的趣味,并且可以适应我们所设计网站的需要。

示例:


这是一个传统的类比配色方案,虽然它的视觉感染力很强,但是对于设计一个让人印象深刻的网站来说,颜色的对比度不够强。


这个一个和上图有相同色相的配色方案,但是色度上的调整体现出多样性。 它现在更适合用于网站设计。


另外一个传统类比配色方案的例子。


以上主题经过修正可以用于网站设计。

互补

互补配色方案是通过将色轮上对立面的颜色相融合来创建。这些配色方案最基本的形式是仅由两种颜色构成,但是可以很容易通过色调,浅色和阴影色的形式扩展。温馨提示:即使使用彼此相邻的具有相同色度或者明度而又完全相反的颜色可能看起来会很不和谐,从严格意义上来说,它们的边界看起来会很刺眼。因此最好通过在它们之间留白,或者在它们之间加入另一个过渡色来避免这种情况。

示例:


广范围的浅色、阴影色、和色调的应用让这个配色方案看起来非常具有通用特性。


另一个具有广范围色度的互补配色方案。


别忘了米色和棕色其实是橙色的浅色和阴影色。

分列互补

分列互补配色方案和互补配色方案几乎一样简单。这种配色方案使用的颜色是和位于你的基础色相对角位置的色相相邻左右的两种颜色,而非色轮上对角的颜色本身。

示例:

(责任编辑:大宝库)



------分隔线----------------------------
推荐内容
赞助商链接
赞助商链接