最美H5 酷站欣赏 UI素材 专题 设计导航

设计师的颜色论–创立自己的调色板

传统的配色方案类型

设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客
单色

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

设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

 

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

类比

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

这是一个传统的类比配色方案,虽然它的视觉感染力很强,但是对于设计一个让人印象深刻的网站来说,颜色的对比度不够强。
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

这是一个和上图有相同色相的配色方案,但是色度上的调整体现出多样性。 它现在更适合用于网站设计。
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

另外一个传统类比配色方案的例子。
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

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

互补

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

广范围的浅色、阴影色、和色调的应用让这个配色方案看起来非常具有通用特性。
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

另一个具有广范围色度的互补配色方案。
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

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

 

分列互补

分列互补配色方案和互补配色方案几乎一样简单。这种配色方案使用的颜色是和位于你的基础色相对角位置的色相相邻左右的两种颜色,而非色轮上对角的颜色本身。
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

这是一个以黄绿色为基础色相的配色方案。你所选择的这种类型的配色方案的颜色间拥有足够的色度和明度差别是非常重要的。
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

另一个具有广范围色度的调色板例子。

 

三元配色方案

三元配色方案由在12轮辐色轮中具有相等间隔的色相组成。和其他配色方案相比,这种方案稍显不同。
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

在三元配色方案中,使用一种颜色的浅色或深色版本,与另外两种颜色的两种阴影色/色调/浅色一起运用,让这种单一的颜色在配色方案中显得中立,可作为中和色使用。
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

或者,使用将一种非常明亮的色相搭配一对柔和的色相使用可以让这种明亮的色相更加突出。

 

双互补(四元)配色方案

四元配色方案可能是最难有效完成的一种方案。
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

这是非常不起眼四元配色方案。使用这种配色方案最好的方法是在设计中把一种颜色当作主要颜色,其他的颜色仅仅用作突出它。
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

当使用相似的色度和明度创建配色方案时,四维配色方案的效果非常好。只需添加一个中和色用作文本和强调,如使用暗灰色或黑色。
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

对于深色配色方案来说,它的效果也非常好。

 

自定义

自定义配色方案是最难创建的。自定义配色方案并不基于任何正式的规则,而非像上面讨论的那样遵照某种预定义的配色方案。在创建这种类型的配色方案是,请谨记色度、明度和饱和度等等诸如此类的东西。
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

这是所有颜色都有相同级别的色度和饱和度。
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

同样,使用具有类似色度和饱和度的颜色是非常有效的,此外,能够创建出的整个配色方案非常具有内聚力。
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

在都是低色度的颜色中使用一种高色度的颜色是另一种有效的方法,这种高色度的颜色可以用作强调。

创建一个配色方案

设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

有大量的在线工具可以用来协助创建一个配色方案,但是从现在开始我们暂时摒弃这些工具,仅使用Photoshop来完成这项工作。

让我们试着脱离上我已经提到的配色方案,并创建了一些自定义的方案。虽然了解不同颜色之间相互作用的方式,以及传统的配色方案是如何创建的是非常重要的,但是对于你有可能去创建自定义配色方案的大多数设计项目而言,无需严格遵循任何预定义的模式。

因此,为了我们的项目目标,我们将创建三个配色方案,每一个用于两个不同的网站。我们的虚拟客户是一个现代建筑设计的博客和一个深受维多利亚时代风格影响的高档女性服装零售商。
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

对于我们的服装店来说,将加入的白色作为中和色是一个传统的配色方案。
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

对于我们的设计博客,我们配以由阴影色和浅灰色组成的的配色方案。
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

这个可以看作类比配色方案,但我们省略了一个颜色。它深紫色和红紫色组成。在色轮上这两个颜色彼此相邻,看起来效果很好,特别是当它们使用不同级别的明度和饱和度时。
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

在灰色配色方案中添加两个红色色调可以引起视觉上的关注,同时也为你设计中的特定部分增添了潜在的特别强调。
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

在上图中,我们不再使用紫色色相,转而使用酒红色。酒红色也是在色轮上与红紫色相邻的颜色。我们还增加在色轮上位于紫色对角上的浅黄色调。它充当我们的中和色,并且和我们的其他色相相比,看起来更像是白色。
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

虽然这个配色方案乍眼看上去像另一个标准的灰色和红色调色板,但是如果更仔细的研究一下,你将会发现灰色其实是蓝色调。蓝色和红色构成了四阶配色方案的三分之二,但在没有黄色的时候看起来也很好,特别是在当红色保持高纯度而蓝色色调淡化到几乎变为灰色的点时。
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

阴影色、色调和浅色

正如在上文的配色方案中看到的那样,在你的配色方案中使用浅色、色调和阴影色是至关重要的。纯色相都有类似于明度和饱和度的等级。这导致了配色方案既具有不可替代的压倒性,同时却又很枯燥。

 

当将色调、阴影色和浅色这些概念混合在一起时,原来12辐色轮的概念在你的设计中可以使用的颜色数量将扩大为无限。创建具有专业外观配色方案的最简单方法是为某一非纯色相的特定颜色选用一些色调、浅色和阴影色,加入到另一个纯的、或者接近纯的色相中,这些色相是在色轮中至少间隔三个颜色(是三维、四维或分列互补配色方案)用于强调色。这种方法为你的配色方案增添了视觉冲击力,同时仍不失平衡感。
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

加入一些中性色

中和色是创建一个配色方案的另一个重要组成部分。灰色,黑色,白色,棕色,棕褐色和灰白色通常被认为是中性色。褐色,棕褐色,和灰白色往往使配色方案在视觉上有温暖的感觉(由于它们其实都是橙色和黄色的色调,阴影色和浅色)。灰色根据周边的颜色呈现出暖色或者冷色的效果。黑色与白色的同样可以是暖色或冷色,这取决于周围的颜色而定。

 

黑色和白色是最简单的,几乎可以加入任何一个配色方案中的中性色。 然而为了加入更多的视觉冲击力,可以考虑使用稍亮或者稍暗的灰色置于白色或黑色的位置。

 

添加褐色,棕褐色,和灰白色色调更具技巧一些,但通过一些练习你将会发现渐渐变得容易了。对于褐色来说,可以考虑在黑色的位置使用一种非常暗的巧克力棕色。灰淡白色在很多情况下可以替代白色或者浅灰色。和棕褐色也可以取代灰色的位置(通过添加以小额灰色来创建色调会更容易些)。

配色方案中使用照片

设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

创建配色方案的方法可以使用照片,在线的自动化工具可以为你自动完成这项工作,这些工具中比较常用的是Adobe Kuler和Photoshop。

使用Adobe Kuler,不仅可以搜索Flickr上的照片,也可以上传自己本机上的图片。如果你正在为在网站设计中使用什么颜色而绞尽脑汁的话,可以尝试在Flickr中搜索相关的词。有时,这种方法可以找到也许你自己都根本没有想到的配色方案。

让我们尝试这种使用Kuler和Photoshop两种方法。在Flickr中找到你喜欢的,可以激发出你希望创造出的设计感觉的照片。

Kuler上基于图片创建配色方案最棒的功能就是它的“选择基调”选项。包括彩色,亮色,柔和色,深色,和暗色。以下的配色方案是我们使用同一张照片得到的每一种基调。
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

Kuler基于这张图片创建的原始配色方案
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

彩色
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

亮色
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

柔和色
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

深色
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

暗色
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

使用同一张图片在Photoshop中创建一个彩色配色方案。和Kuler相比,这种方法的科学性稍逊一筹。我通常使用滴管工具选择一种颜色,然后在图像中的不同点上点击直到找到和它相配的另一种颜色。左侧是结果。

在Photoshop中基于一张图片创建配色方案是最简单的方法,可以从相关的单色开始。使用色彩相对丰富的图像会使难度增加。
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

彩色

设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

亮色

设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

柔和色

设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

深色
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

暗色
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

基于同一张图片使用Photoshop得到的配色方案

使用Photoshop得到的版本和Kuler提供的版本完全不同,但是以上的所有配色方案都具有视觉上的吸引力。这里的Photoshop版本了比上例用了更长的时间,部分原因图像颜色的多样性。

最简单的配色方案

设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

正如我们前面提到的那样,在别的中性色调色板中添加强调亮色是创建配色方案的最简单方法。运用这种方法也可以创造出最引人注目的视觉效果。如果你对自己在创建自定义配色方案的技术方面没有自信的话,可以先从这种类型的调色板开始。
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

这里可以看到如何使用棕色,而不是灰色使整个方案看起来更偏向于暖色,即使在用蓝色来强调的时候。

在这种类型的方案中,可以使用任何颜色的色调代替灰色或者棕色,只需要保持接近灰色的范围内就可以得到最简单的结果。作为一般规则,冷灰色和纯灰色对于现代设计是最好的选择。在传统的设计中,偏向暖色的灰色和棕色搭配在一起看起来更好。

具有完美配色方案的网站设计

设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

为了给大家更多的灵感,整理了10个具有完美配色方案的网站供参考,下面的一些配色方案可能乍眼看起来有些奇怪,但是可以参考他们是如何使用极尽可能广范围的配色方案来展现的。
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

Wentings Cycle
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

Trivuong.com
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

Oscar Barber
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

North East Peace
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

mbA Architects
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

Studio 13
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

Joy Project
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

Morphix Blog
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

El Designo
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客

LemonStand

大自然秋季调色板

设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客
设计师的颜色论(创立自己的调色板) - 赵伟 - 赵伟de博客