首页 > 教程, 设计理论, 酷站> 如何创造自己的颜色调色板

如何创造自己的颜色调色板

 

在之前的两部分色彩理论中,我们探讨了色彩背后的含义及色彩相关术语。虽然这些信息很有用,但是我敢肯定很多人都在怀疑我们什么时候才能正式进入实际应用中,来创造属于我们自己的色彩方案。

 好吧,从第三部分开始,我们将开始讨论如何涂抹出一套我们自己的色彩方案。我们会讨论一些传统的配色方案(单色、相似色、互补色等),以及怎样跳出传统方案创造出自己的配色方案。希望看完这篇文章以后,你能够掌握如何在设计中创造出漂亮的色彩方案。最有效的学习方法就是多联系,所以给自己设定一个目标——每天都为自己调配一个独一无二的色彩方案。

 

快速回顾

 

让我们快速回忆下前两部分讲过的内容。在第一部分,我们讨论了色彩拥有怎样的固定内涵,这可能因国家文化的差异而不相同。这可能让你的网页浏览者对你的网站有一个直观的印象,即使这只是下意识的印象。颜色的选择,对你创作的网站可能产生两种截然相反的效果。

Indiacolors设计的色彩理论,第3部分:创建自己的颜色调色板

 
在第二部分,我们研究了色彩的属于:色相(就是这属于哪种颜色,比如蓝色或者红色);色度(一种纯色不掺杂白色、黑色或者灰色的程度);饱和度(颜色的强弱);明度(一个颜色的明亮程度);灰调(灰色加入纯色的含量);暗调(黑色加入纯色的含量);明调(白色加入纯色的含量)。这些都是我们学习进阶,进而创造自己的色彩方案的重要基础。

 

 

传统的色彩方案

 

有很多既成的色彩标准方案,能够让我们更容易创建出一套色彩方案,特别对于初学者来说。下面开始讲传统色色彩方案,每个方案都有实例对照。

Colorwheel设计的色彩理论,第3部分:创建自己的颜色调色板
 
最基本的,十二色相色轮是我们创建色彩方案的重要工具。

 

 

单色

 单色方案是相同色相,不同灰调、暗调或明调变化组成的。这是最简单的色彩构建方案,因为他们是相同色相变化而来,既不容易产生和谐的、也不容易产生不堪入目的方案(实际中还是有这种情况的)。

 实例:

 这里有三个单色方案的例子。这里边的第一种颜色(从左往右看)常用于标题颜色,第二种颜色可能用于字体颜色或者背景颜色。第三种颜色可能用于背景(或者是正文颜色,前提是第二种颜色作为背景颜色)。最后两种颜色则可能用于强调或者图形中。

单色蓝色设计的色彩理论,第3部分:创建自己的颜色调色板

单色浆果在设计的色彩理论,第3部分:创建自己的颜色调色板

单色金颜色为设计理论,第3部分:创建自己的颜色调色板

 
 

 
相似色

 相似色是第二简单的颜色创建方案。相似色方案是汲取12色相色轮上任意相邻的三种颜色来创建色彩方案的。一般来说,相似色方案中的颜色都有相同的饱和度,但是采用不同的灰调、暗调或者明调,这都是根据设计要求和我们的需要。

实例:

类似的传统设计色彩理论,第3部分:创建自己的颜色调色板
 
这是一种传统的单色方案,虽然有很好的视觉吸引力,但是对于网页设计来说,显然没有足够的对比度。

类似的修改,第3部分设计在色彩理论:创建自己的颜色调色板 
 这个色彩方案跟前一个例子采用相同的色相。但是调整了色度。这样更适合我们的网站设计了。

类似于tradpink在设计的色彩理论,第3部分:创建自己的颜色调色板 
这是传统相似色的另一个例子。

类似于modpink在设计的色彩理论,第3部分:创建自己的颜色调色板
 
 同样的,对前一个方案的修改,这个更适合在网页设计中应用。

 

互补色

互补色是从色轮的对角方向汲取两种不同的色相。从最基本形式上看,这种方案只有两种颜色,但可以很容易通过灰调、明调和暗调扩展出无数种方案。但是,这里有必要提醒下:采用相同色度或者明度的两种互补色很容易产生一种不和谐的视觉感受(最糟糕的适合,很容易让边界看起来不和谐)。最好避免这种情况(要么中两者中间添加一种白色,要么添加另外一种传统色彩方案中的颜色)。

实例:

比赛purplegreen在设计的色彩理论,第3部分:创建自己的颜色调色板 
 这个方案在明调、暗调和灰调上跨度比较大,产生一种非常灵活的配色方案。

比赛redgreen在设计的色彩理论,第3部分:创建自己的颜色调色板
 
 另一种色度跨度比较大的互补色方案。

比赛的orangeblue在色彩设计师的理论,第3部分:创建自己的调色板
 
 别忘了米色和棕色是橙色的不同色调。

 

 

分割互补色

 分割互补色跟互补色差不多容易理解。在这种方案中,不是采用对立的颜色,而是采用一种颜色两边对立的一种颜色。

实例:

分割黄绿色彩理论设计,第3部分:创建自己的颜色调色板
 
 一种以黄色和绿色为基础色调的配色。关键在于你选择的两种颜色之间要有足够的色度差和明度差。

分割红色设计的色彩理论,第3部分:创建自己的颜色调色板
 
 这是另一个色度范围比较大的配色方案。

 

 

三合色

 三合色是12色相色轮上距离相等的三种颜色组成的颜色方案。这是一个更加多样化的颜色方案。

实例:

在设计的色彩理论,第3部分三合会浆果:创建自己的颜色调色板
 
 一种极白或者极黑的颜色,配上另外两种不同暗调/色调/明调的颜色,让这种颜色在这种配色方案中几乎成了一种中性色。

三合会红色设计的色彩理论,第3部分:创建自己的颜色调色板
 
 另外,用一种明亮的颜色和另一种匹配的较暗的三原色方案,能够让那种颜色更加突出。

 

 

双互补色(四合色)

 

 双互补色是最难应用于实际的颜色方案了。

 实例:

Tetradic的红色设计的色彩理论,第3部分:创建自己的颜色调色板 
 这是一个相当不起眼的四合色方案。使用这种色彩方案,最好的方法是,用一种原色作为基础色调,其他三种则做衬托。

在设计的色彩理论,第3部分Tetradic柔和:创建自己的颜色调色板
 
四合色方案在采用相似的色度和明度的情况下,能更好的协调。最好再加中中立色(比如灰色或者黑色)。

Tetradic,深颜色为设计理论,第3部分:创建自己的颜色调色板
 
 在暗点的色彩方案中,同样能做出很好的效果。

 

 

自定义方案

 自定义颜色方案是最难创建的。不同于上述几种按照预定义好的传统色彩方案,自定义方案是不囿于既有的条条框框。在创造自定义方案的时候,要记得色度、明度和饱和度这些概念。

 实例;

Industrygiant设计的色彩理论,第3部分:创建自己的颜色调色板
 
 这里的颜色有类色的色度和饱和度。

Palisadespark在色彩设计师的理论,第3部分:创建自己的调色板
 
 同样,类似的色度和饱和度的颜色在色彩方案中,有助于几种表现作品的主题。

50schristmas设计的色彩理论,第3部分:创建自己的颜色调色板
 
 用一种高色度的颜色搭配另一种低色度的颜色,是另一种有效的配色方案(高色度的颜色可以作为一种强调色)。

 

 

 

创造你自己的配色方案

创造你自己的配色方案可能听起来有点吓人,但是很多人都认为这其实并不复杂。而且,有很多小技巧,你可以从创建你自己的调色板开始。

Danceofcolors设计的色彩理论,第3部分:创建自己的颜色调色板
 
 现在我们已经超脱了前述的几种色彩构建方案,该开始尝试创造一些我们自己的颜色方案了。网上有大量的工具可以帮你创造一个色彩方案,但是请忘记他们吧,现在我们只使用photoshop。

让我们开始打破前文提到的那些配色方案,然后创造出自己的配色方案吧。首先,了解不同颜色间的相互影响关系和传统的构色方案是如何被创建的,这很重要!从大多数的设计作品中,你都可能看到,他们并没有严格遵从预定的那些传统构色方案。

 所以,这里给出的例子的目的就在此,创造出来的三种色彩方案分别对应两种不同的网站要求。假设我们的设计对象是一个现代建筑设计的博客和一个高端的女性服装零售商,主营维多利亚风格的服装。

 我们从单色方案开始,一个个体验下不同的设计感。虽然我在前文中提到过,传统的配色方案不怎么被应用到设计中,但单色方案应该算一个例外。你会发现,你很有可能经常使用到单色方案。

服装单声道设计的色彩理论,第3部分:创建自己的颜色调色板
 
 对于我们的服装商店,这是一种传统的单色方案,其中白色作为一种中立色存在。

设计单声道设计,第3部分在色彩理论:创建自己的颜色调色板
 
 对于我们的设计博客而言,我们采取了由灰色的暗调和明调组成的色彩方案。

服装之一,在设计的色彩理论,第3部分:创建自己的颜色调色板
 
 这几乎是一种相似色方案了,但是我们忽略了另一种颜色。它是由紫色的暗调和紫红色组成的配色方案。这两种颜色在色轮邻近,很好得组合到了一起,特别是当他们采用不同的明度和饱和度。

设计之一,在设计的色彩理论,第3部分:创建自己的颜色调色板 
 在原有的灰色方案基础上,增加了两种暗调的红色,增添了不少视觉上的观赏性,而且更易于在设计中创造出强调的效果。

在服装颜色为设计理论,第3部分:创建自己的颜色调色板 
 这个方案中,我们去除了紫色,用了一种深紫色来代替。同样,这在色轮上靠近红紫色。我们还找增加了紫色的对立色,浅黄色。它在这充当一种中立色的作用,因为与其他颜色对比,它更像一种灰白色。

设计两个设计的色彩理论,第3部分:创建自己的颜色调色板
 
 虽然这种颜色方案第一眼看起来有点像另外一种标准的灰色和红色的配色方案,但是仔细看,你会发现,那些灰色其实跟蓝色是同一种色调的。蓝色和红色组成了四合色方案中的2/3,但在没有黄色的情况下,表现依旧完美,特别是当红色作为一种纯色,蓝色降低明度的情况下。

 

 

暗调、色调和明调为什么重要

 从以上的色彩方案可以看出,利用好暗调、色调和明调至关重要。纯色都拥有相似的明度和饱和度。这就导致了一个色彩方案表现得既纷杂又枯燥。

Colorblotchedpaper在色彩设计师的理论,第3部分:创建自己的调色板
 
 当你学会将色调、暗调和明调糅合到你的设计中去,实际上,你已经将基本的12色相扩展成无数种颜色。最简单的一种方法就是取一种色相的不同色调、明调和灰调(尽量避免直接用纯色),然后结合另一种纯色作为强调色(或者接近纯色),两种颜色在色轮上的差距应该至少三个间隔(四合色、三合色或者分割互补色中的一种)。这样既保证了色彩上的平衡感又增加了视觉上的吸引力。

 

 

添加一些中性色

 中性色是创造色彩方案另一个重要组成部分。灰色、黑色、白色、棕色、棕褐色和灰白色通常都被认为是中性色。褐色、棕褐色和灰白色往往让我们的色彩方案显得温暖(因为他们都是橙色和黄色的色调、暗调和明调的变化)。灰色会根据搭配颜色不同而显得或温暖、或冰冷。黑色和白色也是随着周围的颜色而可能显得温暖或者冰冷。

Neutralcolors设计的色彩理论,第3部分:创建自己的颜色调色板
 
 不管什么配色方案,黑色和白色是最容易调和的中立色了。为避免审美疲劳,有时候,可以考虑用非常浅或非常深的灰色代替白色和黑色。

 利用好棕色、棕褐色和灰白色可能有点难,但是只要多加练习,你会很快掌握这种方法的。至于棕色,可以考虑用巧克力棕黑色来取代黑色。非常白的黄白色可以用来代替白色或者浅灰色。棕褐色也可以取代灰色(适当的灰调更有利于我们配色。)

 

 

利用照片提取配色方案

 创造配色方案,我最喜欢的一种方法是从照片中提取色彩元素。有很多在线工具可以用到(Adobe Kuler就是其中一个,而且是我最喜欢的一个网站),或者你也通过Photoshop来实现。

 Adobe Kuler,你可以通过浏览或者搜索Flickr上的图片,当然也可以上传你自己的图片。如果你在踌躇设计中该采取什么样的色彩方案,或许你可以在Flickr上搜索相关的词条来获得灵感。有时候,你可以在这里找到你从没想过的色彩方案。

 接下来介绍这两种方法(使用Kuler和Photoshop)。在Flickr找到一张你喜欢的照片,一张可供我们设计参考的照片。我选择了这张:

罂粟的颜色设计,第3部分理论:创建自己的颜色调色板
 
 下面就是Kuler给我们分析的源色彩:

罂粟-的Kuler原设计的色彩理论,第3部分:创建自己的颜色调色板
 
 其中一个最酷的功能是它提供了让我们从提取的色彩中“选择一种风格”来创建我们的色彩方案。包括,彩色、明亮、柔和、深沉和全黑等。这些都是我们从同一张图片中提取出来的不同色彩方案。

罂粟-的Kuler丰富多彩的颜色为设计理论,第3部分:创建自己的颜色调色板
 
彩色:

罂粟-的Kuler明亮的颜色为设计理论,第3部分:创建自己的颜色调色板
 
 明亮

罂粟-的Kuler,静音设计的色彩理论,第3部分:创建自己的颜色调色板
 
 柔和

罂粟-的Kuler深在设计的色彩理论,第3部分:创建自己的颜色调色板
 
深沉

罂粟的Kuler暗设计的色彩理论,第3部分:创建自己的颜色调色板

 
 全黑

 现在用同一张图片,我们用Photoshop来创造出色彩方案。当然,比起Kuler少了几分科学性。我通常先用吸管工具吸取一种颜色,然后在图片在再点其他颜色,知道我找到和它最搭配的一种颜色。下面就是我得到的结果(这花不了五分钟的时间,所以它做起来实际并没有听起来那么耗费时间):

在设计的色彩理论,第3部分罂粟的Photoshop:创建自己的颜色调色板
 
 练习利用Photoshop从照片中提取色彩方案最好那些本身就是单色方案的图片开始。因为颜色越多,难度越大。接下来,让我们尝试色彩更加丰富的配色。这就是我选择的图片:

沙丽设计的色彩理论,第3部分:创建自己的颜色调色板
 
下面是Kuler给出的五种配色方案:

纱丽的颜色设计,第3部分理论的Kuler的丰富多彩:创建自己的颜色调色板 
 彩色

纱丽的颜色设计,第3部分理论的Kuler -亮:创建自己的颜色调色板
 
 明亮

纱丽的颜色设计,第3部分理论的Kuler,静音:创建自己的颜色调色板
 
柔和

在设计的色彩理论,第3部分纱丽的Kuler深:创建自己的颜色调色板
 
 深沉

纱丽的Kuler,深颜色为设计理论,第3部分:创建自己的颜色调色板
 
全黑
接下来是从Photoshop提取出来的方案:

在设计的色彩理论,第3部分纱丽的Photoshop:创建自己的颜色调色板
 
 如你所见,我提取出来的色彩方案跟前面的完全不同,但是所有以上的色彩方案都非常具有吸引力。利用Photoshop提取的这种方案比其他的更丰富,一部分原因是这张图片本身在色彩上表现的多样性。

 

 

最简单的配色方案

 这个我们之前有稍微设计到了,就是用一种明亮的强调色搭配其他一些中立色,能够很容易的创造出一种配色方案。这在视觉上也是最引人注目的。如果你不确定自己是否能搭配出出色的色彩方案,或许你可以从这类配色方案开始学习。

 这里给出我们刚讨论的方法作出的示例:

最容易红色的颜色为设计理论,第3部分:创建自己的颜色调色板

最容易黄绿色在色彩设计师的理论,第3部分:创建自己的调色板

最容易粉红色的颜色为设计理论,第3部分:创建自己的调色板

最容易浅蓝在设计的色彩理论,第3部分:创建自己的颜色调色板

最简单的蓝色设计的色彩理论,第3部分:创建自己的颜色调色板

 
 
 这里你可以看出怎么用棕色甚至蓝色作为强调色来取代灰色,来构建一种暖色调方案。

 你可以使用任意颜色的色调变化来取代灰色或者棕色,前提是要保证这种颜色处于光谱灰度的末端。一般来说,冰冷的灰色和纯灰色最适用于现代设计。至于传统设计,暖色调的灰色和棕色往往更为合适。

 

 

要用多少颜色?

 通读文章,你会发现,之前讲到的例子都是五种颜色的配色方案。五是个很好的数字,这设计到概念的阐述,而且对于一个设计来说,五种颜色也是一个合适的尺度。但是在设计中,你也可以创造更多的颜色。

Coloredpencils设计的色彩理论,第3部分:创建自己的颜色调色板
 
 很多网站的设计只用到三种颜色,有的甚至只用到两种颜色。当然,有些也会用到八个十个的(这搭配起来更加麻烦)。通过实验,你可以搭配尽可能多的颜色,用到你的网站中去。不过最好从五种颜色的方案开始练习起,然后自己慢慢体会,通过增加或者减去一些颜色,你会感受到自己的进步的。

最简单的方法还是从预定好了的传统方案开始去决定该如何增删,这至少为你进一步修改配色方案提供了方向。

 

 

十大优秀配色网站

 这里有十个优秀配色网站,或许可以给你灵感。这里边有些第一眼看起来或许有些古怪,但是这确实展示了一些大胆的配色方案。

 

Wentings Cycle & Mountain Shop

Wentings设计的色彩理论,第3部分:创建自己的颜色调色板
 
配色方案:

Wentings计划在设计的色彩理论,第3部分:创建自己的颜色调色板

 
Trivuong.com

Trivuong在色彩设计师的理论,第3部分:创建自己的调色板
 
配色方案:

Trivuong计划,第3部分设计在色彩理论:创建自己的颜色调色板

 
Oscar Barber

Oscarbarber设计的色彩理论,第3部分:创建自己的颜色调色板
 
配色方案:

Oscarbarber计划在设计的色彩理论,第3部分:创建自己的颜色调色板

 
North East Peace III Partnership

Northeastpeace设计的色彩理论,第3部分:创建自己的颜色调色板
 
配色方案:

Northeastpeace计划,第3部分设计在色彩理论:创建自己的颜色调色板

 
mbA Architects

Mbaarchitects in Color Theory for Designer, Part 3: Creating Your Own Color Palettes
 
配色方案:

Mbaarchitects-scheme in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

 
Studio 13

Studio13 in Color Theory for Designer, Part 3: Creating Your Own Color Palettes
 
配色方案:

Studio13-scheme in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

 
Joy Project

Joyproject in Color Theory for Designer, Part 3: Creating Your Own Color Palettes
 
配色方案:

Joyproject-scheme in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

 
Morphix Blog

Morphixblog in Color Theory for Designer, Part 3: Creating Your Own Color Palettes
 
配色方案:

Morphixblog-scheme in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

 
El Designo

Eldesigno in Color Theory for Designer, Part 3: Creating Your Own Color Palettes
 
配色方案:

Eldesigno-scheme in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

 
LemonStand

Lemonstand in Color Theory for Designer, Part 3: Creating Your Own Color Palettes
 
配色方案:

Lemonstand-scheme in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

 
 

 

结语

 这一系列的文章,我们知识刚刚接触了色彩理论的知识。有很多专家耗尽了无数时间在探索如何在任意一种情况下,能够通过色彩理论来创造出色彩方案。

 实践就是我们练习搭配色彩的最好方法。一天一个配色方案。刚开始,你可以利用自动生成工具来搭配(像kuler工具从照片中提取色彩方案),或者直接用Photoshop来练习。如果你在现实生活中发现一个特别漂亮特别醒目的色彩方案。分析它,并创造出你自己的配色方案。好好利用下面的网站,能帮你提升你的配色感觉,在日后应用中应用到这些配色方案。这会让你以后的配色方案更贴近现实,更能运用自如。

 

 

更多资源

 这里有一些其他的资源可以帮助你创造自己的配色方案,也有一些传统的配色参考资料。

 10个超级有用的工具助你选择合适的配色方案
 Web Design Ledger总结了十个伟大的工具帮助我们选择合适的配色方案。

 100种随机颜色2.0
 这个网页提供了十六进制的100中随机颜色。当你正在寻找色彩灵感的时候,你会发现这是个很伟大的网站。

 经典配色方案
 Color Wheel Pro里边的这篇文章从细节上,实例介绍了所有的传统配色方案。

 彩行者
 这是另一个有用的工具。他们的色彩库对于我们寻求配色方案很有帮助。

 色彩专家
 一个配色库,而且是免费在线版。
 

色彩爱好者
 一个色彩和设计的团体,包括了海量的色彩库、搜索功能和配色工具。

原文链接地址:http://www.smashingmagazine.com/2010/02/08/color-theory-for-designer-part-3-creating-your-own-color-palettes/

作者:网站建设-野魂
幻想互动网站建设团队博客(www.hx-h.com
仅代表作者个人观点。版权归幻想互动(FI)所有,严禁转载

 

  1. 本文目前尚无任何评论.
  1. 本文目前尚无任何 trackbacks 和 pingbacks.

无觅相关文章插件,快速提升流量