给定配色方案,我如何应用于网站设计?


22

只是有一些具体的要讨论的问题,比如说我有这种配色方案:

春季色调调色板

资源

关于如何选择基于补色,单色等的一致配色方案的文章很多,但是,一旦我有了一组颜色,如何确定标题是哪种颜色,链接是哪种颜色,背景是什么?和文字。即使我决定要使用深色还是深色的方案,将其余的颜色显示在屏幕上仍然会使网站看起来难看。

有没有经验法则或一般准则可以帮助人们确定哪种颜色可以到达哪里?


2
答案是,您可以根据看起来不错的方式选择它们,并达到设计目标。las,没有这个公式。
2013年

@ DA01已经说过了,再加上,您不能将给定的配色方案应用于任何网站。而是根据网站决定配色方案。
ikartik90

1
好问题!不幸的是,该图像现在是404。
Animesh

对于那些想知道的人,我从上面的无效链接重新创建了配色方案。从答案采摘颜色代码和评论给我这个调色板:color.adobe.com/create/color-wheel/...
弹簧加载

Answers:


13

我看到很多人在评论“没有正确答案”之类的东西,我(不同意)不同……肯定有至少一个正确答案,也许有几个,而且我敢肯定,还有很多错误答案,好的设计是要根据可用的资源和时间来寻求最佳的解决方案,并且肯定会超过其他选择。您出于讨论的目的给了我们一个调色板,因此,我将按照提供的调色板来回答您的问题。(鉴于我还没有看到您正在使用的布局仍然会很宽泛,但是需要遵循一些流程。)

因此,在Web项目中创建配色方案时,我喜欢选择的第一种颜色是主体的背景和主要文本颜色。通常,最好选择两种对比强烈的颜色来填补这些角色,您的示例调色板也不例外,因此在这种情况下,颜色为#DEE1DD和#28363D。现在,我们必须确定要用于文本的文本和要用于背景的文本,并且在大多数情况下,我尝试将较浅的颜色用于背景,将较深的颜色用于文本。已有大量研究表明,与浅色上的深色相比,浅色上的深色更容易阅读,因此,除非没有理由使外观变暗,否则我通常会默认这样做(例如,您正在使用重金属制作网站)乐队之类的东西...我要假设情况并非如此)。所以,

接下来,我想继续介绍我认为是下一个最重要的项目,即超链接。您想要一种与背景形成鲜明对比的颜色,以使其不易阅读,但与文本形成足够鲜明的对比以引起注意。在此示例中,大多数浅绿色在浅色背景上难以辨认,因此最明显的答案是#2F575D。

接下来,您暗示了需要着色的标题,并且我们再次需要它与背景形成对比。为了极简主义,我尝试重用我已经在体内使用的颜色,在这种情况下,文本颜色可能太暗而无法填充大量空间,因此我倾向于选择#2F575D,以上所有原因,我将使用背景主体颜色#DEE1DD填写标题中的任何文本或链接。

最后,我介绍了非必要的设计元素,例如最后的悬停状态,我们还有一些不同的果岭可供选择。同样,这可能需要与背景形成足够的对比,因为链接在滚动时不会消失,因此如果倾向于#658B6F ...

还有...瞧!您现在有一个(基本)4配色方案。希望这个过程对您有所帮助,对我有帮助:)!


3

您链接到的网站向您展示了如何使用这些颜色:

#28363D for the active state 
#2F575D as the navigation background 
#DEE1DD as background 
#C4CDC1 as banner ...

我通常会在设计中添加我自己的颜色-即使我知道它们有点错误-至少我大约有两种纯色或至少一种纯色。然后,当我提出了自己的想法后,我将使用我的原色(最常用的一种)并将其添加到色轮中。这样我就可以替换其他颜色。或者,我尝试查找一些具有大多数原始颜色的图像。

我读过一些文章,说要拍照,然后根据这些颜色设计作品,我做不到。我创建自己的设计时要牢记至少一种颜色,然后使用颜色理论的技术

希望能帮助到你


>您链接到的网站正在向您展示如何使用这些颜色:对,这是我的问题,自己弄清楚这些的“算法”是什么?
Shahbaz

我不认为有一个。例如,如果我必须将这些颜色添加到该网站,则不会以这种方式进行排列。例如,我认为他们在这里使用颜色的方式lavishbootstrap.com/?image_url=http://design-seeds.com/palettes/…在我看来是可怕的,尽管颜色很好,但-在我看来-排列得不好。因此,您必须玩彩色游戏。我认为没有机械方法-如果有的话,我建议您使用您的设计,不要使用它!
aurel

3

关于采用什么没有公式,应该采用背景等等,这就是设计是一门艺术的原因。

通常,我会用我拥有的颜色进行大量的试用,例如哪种字体颜色在哪种背景下看起来更好。

虽然有一个经验法则是与使用的颜色形成对比,但大多数人会说这是常识,例如带有深色背景的浅色字体。然后可能会出现,您如何确定子组件的颜色,例如警报框,导航等。

正如我所看到的,您应该已经准备好网站的裸露结构,然后需要确定哪些是主要内容以及如何呈现。子组件上的颜色可能更柔和,不需要立即注意。

你怎么知道它好不好?很简单,只要您说“这很好”,那就意味着它很好。从别人那里得到第二意见总是有帮助的。

总而言之,继续尝试颜色组合,不要只坚持一种,您可能会对最终实现的构图感到惊讶。

@Color Combination:网站提供的组合足以开始使用。


2

我想起了我的第一任妻子和我有一个大的帆布面板和几支丙烯酸漆管的时代。我们将画布放在地板上,漫无目的地喷上随机的颜色。我们让它干燥,然后将其挂在壁炉上。随着时间的流逝,几位客人评论了它的外观多么美妙,并认为这是一件昂贵的艺术品……也就是说,直到我们告诉他们如何绘画。一切都在情人眼中。

在讲完这个故事后,我不得不说我同意存在不兼容的色彩组合,这对大多数观众来说都是丑陋的。但是,它们的数量并不多。我不认为你应该强调太多得到它的权利。网站中包含的内容可以弥补很多糟糕的颜色选择。内容将永远胜过设计。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.