访问手机版

随时随地访问,扫描体验手机版

游客您好
第三方账号登陆
  • 点击联系客服

    在线时间:8:00-16:00

    反馈QQ

    1263810394

    电子邮件

    yanzheng@puhuajia.com
  • 普画网

    随时随地分享快乐

  • 扫描二维码

    关注普画网公众号

普画网 首页 插画设计 色彩搭配

色彩理论:如何创建自己的配色方案

不败战神豪大大(未知职业)-本文作者
这个人很懒,什么也没有留下。
3658 0 2020-3-21 10:15

传统配色方案类型

有许多预定义的配色方案标准,使创建新方案更容易,尤其是对初学者。下面是一些传统的方案,每个方案都有一些例子。

色彩理论:如何创建自己的配色方案

基本,十二辐条色轮是一个重要的工具,在创造色彩方案。

单色的

单色的配色方案是由特定色调中不同的色调、色调和色调组成的。这些是最简单的颜色方案,因为它们都是从相同的色调,使之更难创建一个刺耳或丑陋的方案(尽管这两种仍然是可能的)。

单色计划很容易创建,但如果做得不好也会很乏味。加入强烈的中性,如白色或黑色,可以帮助保持事物的趣味性。

例子:

这里有三个单色配色方案的例子。对于这些方案的大部分,第一个颜色(如果我们从左到右看这个)可能会用于标题。第二种颜色将用于正文或可能的背景。第三种颜色可能用于背景(如果使用第 2 种颜色作为背景,则可能用于正文)。最后两种颜色将作为口音或在图形中使用。

色彩理论:如何创建自己的配色方案

色彩理论:如何创建自己的配色方案

色彩理论:如何创建自己的配色方案

类似物

类似的配色方案是下一个最容易创建的方案。类似的方案是通过在 12 辐条颜色轮上使用三个相邻的颜色来创建的。传统上,类似的配色方案都具有相同的色度水平,但是通过使用色调、阴影和色调,我们可以增加对这些方案的兴趣,并使它们适应我们设计网站的需要。

例子:

色彩理论:如何创建自己的配色方案

这是一个传统的类似的配色方案,虽然它在视觉上很有吸引力,但对于一个有效的网站设计来说,颜色之间的反差还不够大。

色彩理论:如何创建自己的配色方案

这里有一个与上面的相同的色调的配色方案,但与色度调整,使更多的品种。现在它更适合在网站上使用了。

色彩理论:如何创建自己的配色方案

传统类似方案的另一个例子。

色彩理论:如何创建自己的配色方案

并对上述主题进行了修改,以便在网站设计中使用。

互补的

互补的方案是由来自颜色轮的对侧的颜色组合而产生的。在它们最基本的形式中,这些方案仅由两种颜色组成,但是可以很容易地使用色调、色调和阴影进行扩展。

不过,有一点需要注意的是,如果使用的颜色与相邻颜色的色度和/或数值完全相反,就会在视觉上产生冲突(在最严重的使用情况下,它们似乎会沿着自己的边界震动)。最好避免这种情况(要么留下负数空间,要么在它们之间添加另一种过渡颜色)。

例子:

色彩理论:如何创建自己的配色方案

各种各样的色调、色调和色调使它成为一种用途广泛的配色方案。

色彩理论:如何创建自己的配色方案

另一种具有广泛色度的互补色方案。请注意如何把更明亮的红色和绿色的颜色放在一起,一种 “振动”的质量是在他们的边缘上实现的。在你的设计中注意到这一点,并确保这是有意的,如果这一切。

色彩理论:如何创建自己的配色方案

别忘了,米色和棕色只是橙色的色调和色调。

分离互补

分离互补方案比常规互补方案增加了更多的复杂性。在这个方案中,你不使用相反的颜色,而是在色调的两侧使用与你的底色相反的颜色。

例子:

色彩理论:如何创建自己的配色方案

以黄绿色为底色的一种方案。这是很重要的有足够的差异在色度和价值之间的颜色,你选择这种类型的方案。

色彩理论:如何创建自己的配色方案

另一个调色板与广泛的色度。

三元的

三元方案是由色调等间隔周围的 12 辐彩色轮。这是较多样化的配色方案之一。它们很难做好,但是当它们做好的时候,会给设计增加很多视觉上的兴趣。

例子:

色彩理论:如何创建自己的配色方案

在三元组中使用一种颜色的淡色或暗色版本,以及另外两种颜色的色调/色调/色调,使得单一颜色在方案中几乎可以作为中性颜色使用。

色彩理论:如何创建自己的配色方案

另外,使用一个非常明亮的色调与配对柔和的色调,使单一明亮的色调更加突出。

双互补(四价)

四维配色方案可能是最难以有效实现的方案。

例子:

色彩理论:如何创建自己的配色方案

一个相当不起眼的四边形配色方案。使用这种方案的最好方法是在设计中使用一种颜色作为主要颜色,而其他颜色只是作为口音。

色彩理论:如何创建自己的配色方案

四维配色方案可以很好地创建具有相似色度和值的配色方案。只需添加一个中性(如深灰色或黑色)的文本和口音。

色彩理论:如何创建自己的配色方案

它同样适用于较深的配色方案。

习惯

自定义配色方案是最难创建的。与前面讨论的预定义配色方案不同,自定义方案并不基于任何正式规则。在创建这些颜色方案时,请记住诸如色度、值和饱和度之类的东西。

例子:

色彩理论:如何创建自己的配色方案

这里的颜色都有相似的色度和饱和度。

色彩理论:如何创建自己的配色方案

同样地,使用色度和饱和度相似的颜色是有效的,并在整个颜色方案中产生一种内聚感。

色彩理论:如何创建自己的配色方案

在其他色度较低的颜色中使用一种色度较高的颜色是另一种有效的方法(色度较高的颜色可以作为重音)。

创建一个配色方案

创建自己的配色方案可能有点吓人。但它并不像许多人认为的那样复杂。从一开始,你就可以使用很多技巧来创建很棒的调色板。

色彩理论:如何创建自己的配色方案

我们已经看了以上不同类型的配色方案。现在,让我们尝试创建我们自己的一些。网上有很多工具可以帮助你创建一个配色方案,但是让我们暂时忘掉这些工具,使用 Photoshop 。

让我们尝试脱离前面提到的颜色方案类型,创建一些自定义调色板(严格来说,这就是不遵循预定义的传统模式之一的一组颜色的名称)。虽然了解不同颜色的交互方式和传统方案的创建方式是很重要的,但是对于大多数设计项目,你可能会创建不严格遵循任何预定义模式的调色板。

因此,为了我们项目的目的,我们将为两个不同的网站创建三个不同的调色板。我们假设的客户是一个健身应用和一个高端的女性订阅服务。

我们将从一个基本的单色方案开始,只是为了对每种方案有一个大致的了解。虽然我提到传统的配色模式在设计中并不经常使用,但单色配色模式是这个规则的例外。你可能会发现自己在相当有规律的基础上使用单色计划。

色彩理论:如何创建自己的配色方案

对于我们的订阅框网站,这里是一个传统的单色方案,与浅灰色作为一个中立加入。

色彩理论:如何创建自己的配色方案

对于我们的健身应用,我们采用了由阴影和灰色调组成的配色方案。

色彩理论:如何创建自己的配色方案

这几乎是一种分裂互补的配色方案,但我们使用了黄色(与紫色互补)和暗红色(与灰色搭配)。

色彩理论:如何创建自己的配色方案

添加一对夫妇深浅的红色,以灰色配色方案增加了大量的视觉兴趣和潜力,创造额外的重点部分在你的设计。

色彩理论:如何创建自己的配色方案

有时你的调色板会随着你添加更多的颜色而成长和发展。在这里,我们去掉了紫色和黄色,取而代之的是柔和的红色,加入了一些蓝色。这是一个更干净,更现代的调色板,更好地适应品牌。

色彩理论:如何创建自己的配色方案

乍一看,这个配色方案像另一个标准的灰色和红色调色板,如果你仔细看,你会发现这些灰色实际上是蓝色调。蓝色和红色占了四色系的 2/3,但是在没有黄色的情况下效果很好,特别是当红色保持纯净的时候,但是蓝色的色调下降到几乎是灰色的时候。

为什么色调、色调和色调很重要

从上面的配色方案中可以看出,在配色方案中使用色调、色调和色调是至关重要的。纯色调都有相似的数值和饱和度。这导致了一个色彩方案,这既是压倒性的和无聊的同时。

色彩理论:如何创建自己的配色方案

当你混合了色调、阴影和色调时,你将基本的 12 辐条色轮扩展成无限数量的颜色,用于你的设计。一个最简单的方法来创建一个专业的外观配色方案是采取一些色调,色调和阴影的一个给定的颜色(避免纯色),然后添加在另一个纯色调(或接近纯),这是至少有三个空间的颜色轮(四,三,或分裂互补配色方案的一部分)作为一个口音的颜色。这增加了视觉上的兴趣,你的色彩方案,同时仍然保持着一种平衡感。

加入一些中性成分

中性是创建配色方案的另一个重要部分。灰色、黑色、白色、棕色、棕褐色和灰白色通常被认为是中性色。棕色、棕褐色和非白色倾向于使配色方案感觉更温暖(因为它们实际上都只是色调、色调和橙色和黄色的色调)。灰色将采取一个温暖或凉爽的印象取决于周围的颜色。根据周围的颜色,黑色和白色也可以是暖色或冷色。

色彩理论:如何创建自己的配色方案

黑色和白色是最容易添加到任何颜色方案中的中性色。不过,考虑到使用非常浅或非常暗的灰色来代替白色或黑色,增加一点视觉上的兴趣。

添加棕色、棕色和非白色的色调稍微复杂一些,但是通过一些实践,你会发现添加它们会更容易。对于布朗,可以考虑用一种非常黑的巧克力棕色来代替黑色。浅灰白色在很多情况下可以用来代替白色或浅灰色。而棕褐色也可以用来代替灰色(通过添加一些灰色来创建一个色调,使它更容易)。

使用照片的配色方案

我个人最喜欢的创建配色方案的方法之一是使用照片。网上有自动工具可以自动为你做这件事(Adobe Capture CC 移动应用就是其中之一,也是我个人最喜欢的),或者你也可以自己在 Photoshop 上做这件事。

使用 Adobe Capture,你可以上传图像或使用相机。 这是伟大的时候,你可能会受到启发的物理对象。你还可以从你的 Creative Cloud 帐户、market或 Adobe Stock 中获取图像。如果你想知道你想在网站设计中使用什么颜色,尝试在 Adobe Stock 上搜索相关单词。有时这可能会导致找到你自己可能没有想到的配色方案。

Adobe Capture 的伟大之处在于,你可以轻松地将调色板导入到 Illustrator 或 Photoshop 中(或者只需查看十六进制代码,就可以为你正在使用的任何其他程序找到正确的颜色)。在 Adobe Stock 上找一张你喜欢的照片(或者自己拍一张),你认为它能唤起你想要创建的设计的感觉。我拿了这个:

色彩理论:如何创建自己的配色方案

以下是 Capture 在使用这张图片时给出的原始配色方案:

色彩理论:如何创建自己的配色方案

从图片中创建配色方案的一个最酷的特性是他们的 “选择一种心情”选项(这是老 Adobe Kuler 应用程序的附带功能)。这里包括了多彩的、明亮的、柔和的、深沉的和黑暗的。这些都是我们在使用相同照片中的每一种情绪时得到的方案:

色彩理论:如何创建自己的配色方案

色彩理论:如何创建自己的配色方案

多彩的

色彩理论:如何创建自己的配色方案

明亮的

色彩理论:如何创建自己的配色方案

沉默的

色彩理论:如何创建自己的配色方案

深的

色彩理论:如何创建自己的配色方案

黑暗的

让我们再试一次,这次是更多姿多彩的。以下是我们要处理的原始图像:

色彩理论:如何创建自己的配色方案

以下是这张照片中的五种配色方案:

色彩理论:如何创建自己的配色方案

多彩的

色彩理论:如何创建自己的配色方案

明亮的

色彩理论:如何创建自己的配色方案

沉默的

色彩理论:如何创建自己的配色方案

深的

色彩理论:如何创建自己的配色方案

黑暗的

最简单的配色方案

我们之前已经讨论过这个问题,但是在一个中性的调色板中加入明亮的重音颜色是最容易创建的颜色方案之一。这也是其中一个最引人注目的,视觉。如果你不确定在创建自定义方案方面的技能,请尝试从这些类型的调色板开始。

这里有几个例子可以让你了解我在说什么:

色彩理论:如何创建自己的配色方案

色彩理论:如何创建自己的配色方案

色彩理论:如何创建自己的配色方案

色彩理论:如何创建自己的配色方案

色彩理论:如何创建自己的配色方案

你可以在这里看到如何使用布朗而不是灰色,使整个方案看起来更温暖,即使与蓝色口音的颜色。

你可以使用任何颜色的色调,而不是灰色或棕色在这种类型的方案,只要保持它非常接近灰色年底的光谱最愚蠢的结果。作为一个普遍的规则,凉爽的灰色和纯灰色是最好的更现代的设计。对于传统的设计,较暖的灰色和棕色通常效果更好。

有多少种颜色 ?

你会注意到,在这篇文章中,我们使用了五种不同颜色的配色方案。 five 是一个很好的数字,它提供了很多说明概念的选项,而且在设计中它是一个可行的数字。但是,在你自己的计划中,你可以自由地使用更多或更少的颜色。

色彩理论:如何创建自己的配色方案

许多网站在设计时可能只使用三种颜色。其他的只使用两个。有些人可能使用 8 或 10(这比使用较少的颜色要复杂得多)。 试验和使用尽可能多或很少的颜色,因为你需要为你的设计。但是,你可能希望从五个颜色的调色板开始,然后添加或减去你认为合适的颜色,并随着你在设计过程中的进展。

添加颜色最简单的方法是从一个预定义的,传统的配色方案开始,然后从那里开始。这至少给你一点方向,至于其他颜色考虑。

微信

鲜花
本文暂无评论,快来抢沙发!

阅读排行
热门话题
手绘插画社,中国手绘插画者的网上家园,包含 素描、插画、绘画、手绘、素材、动漫资讯、动漫美图、动漫周边,动漫音乐等相关内容,欢迎投稿

扫描二维码

随时访问手机端

免责声明:本站不提供任何版权视听上传服务,所有内容均来自用户分享站点所提供的公开引用资源,作品版权归原作者所有 仅供学习欣赏使用 禁止任何形式商用 违者必究。

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc. 星点互联设计 ( 京ICP备19014251号-1