平面设计和网站设计配色方案技巧指南

当你在设计网站时，采用的色彩会传达出一模一样的思惟和情绪，所以为你的品牌选择合适的色彩异样的主要。比方，如果你给美国的顶级沙滩设计网站，和你创造一个像groppon一样的在线商城，你肯定会用差别的配色设计它们，由于它们传达的是不同的信息——一个网站传达的是让人心境抓紧，而另一网站传达的是由于做了一次异样棒的交易而让心跳减速兴奋。

对比是网页设计的永远话题。对比度是页面上的两个工具之间的清晰水平。最值得留心的包括段落、链接和标题文本。如果文本和背景色彩之间不充足的对比，那么文字就很难阅读(太亮或太暗)。

思考一下，图标或占有行动召唤能力的按钮，在设计中所需要的对比度级别。协调的高对比度元素，天然能引起人们地存眷。当某个按钮或许注册地区需要更多的存眷，高对比度每每是一个很好的处理方案。色彩如果运用得当，能发生均衡的对比。

除了令人称奇的配色生产器，也有一些其它工具，值得保存以供未来参考。我以为这些工具和资源，对数码设计，比方如图形或网站设计最有赞助。但你应该从中精选那些最有利于你的工作流的资源。

然而，当涉及到数字设计，有很多其它网站，你可以前往学习。一个在线工具check my colours，可以将任何网站拉出去，检查文本和背景色彩之间的对比度。这是一个优质的资源，用来测试其它网站以及你自己的设计。

饱和度（或纯度）与一个色彩的纯度和娇艳度相干。可以把饱和度当作是色彩的强与弱、浊与清。大多数人辨认饱和度就是经由过程对比香蕉黄和粉笔黄的差别。粉笔色更为“发白”，好像缺少娇艳度，由于它的饱和度更低。从下图的munsell color system（孟塞尔色彩系统）图表中，可以失掉更好的懂得：

从艺术的角度来摸索色彩，它可以使主题愈加鲜明。这就是一张绘图和一幅绘画主要的差别，只管它们能传达相似的信息。这个情理实用于任何设计包括网页设计。

一个精良的开端是色相(hue)、饱和度(saturation)、明度(value)（或hsv）。你可能懂得这些测量色彩的术语，然而我想告诉你这些值确实异样主要。明度是你在黑白照片上失掉的信息——就是差别色度的灰色。把一个网站截图,将它转换为灰度图，你就会看到它的原始值。

纯黑色与其它色彩比拟，反差异样大。这一点让我很苦恼，但即使是一点踊跃的差别，仍是有差别的，所以我的建议是防止运用＃000。

大多数色彩实际文章探讨的观点是，每种色彩当面的思惟和它们表现出的情绪。我以为情感的话题太客观，虽然它是精确的。选择一个配色方案，不仅仅是凭情绪，相反，我要研究色彩是如何工作的，以及如何开端自己训练。

另一种选择是colrd，它从图片照片和其它图形中提取色彩。这是一个奇怪的web运用次序，由于它不一定总在网页设计领域颇有助益。但你可以经由过程研究图片，和它们相干的色彩学习到很多。正常来说，天然总是精确的，所以如果你认真观察生活和照中，你会从中失掉配色的新思路。

为了实际这一观点，只管防止在较亮的背景上运用＃000。取而代之，选择一个暗灰色，可能是混合色（深蓝色，深绿色，深橙色等）。我老是以为，在白色背景上的深灰色文字，比纯黑色文字的可读性高出10倍。

有了合适的扩大，全部这些浏览器都可以转换为色彩的资源，而不需要开启另一个次序。

四色式（矩形搭配）是最难以折衷的，均衡的适当会使画面显得绚丽多彩。这种配色方案利用两对互补色，它们之间隔两个色格，这四种色彩在色环上的连线造成一个矩形。在设计过程中若让一个色彩成为主色，效果会愈加，同时要留心冷暖色的均衡。我不建议在一开端就采用这种配色方案，由于如果不教训，很难去控制它。然而它在较大的设计中运用会显得异样漂亮，所以它值得被牢记。

因而，当在斟酌色彩时，记取，色彩很少用来做页面的结构的划分和搭建。你应该用灰色来构建一个规划，就可以让人懂得到界面的整体结构关联。拜访者在阅读网站界面时，色彩可以带给拜访者愈加丰硕的信息内容。

如果你是一个opera的用户，可以找到一个名叫color picker的扩大运用。你会发明它与photoshop里的界面风格雷同。

这个例子是一个风趣的比较关联，同样还要留心差别部分滚动时，色彩关联的变更。在色彩实际的世界里，最好的效果是绝对的。

这就是说，明度是明暗水平，表现色彩的明与暗，也被称作亮度。色相是最基本的色彩术语，平日用来权衡现实的色彩，如蓝色、红色或黄色。色相是相称简略的，你可以经由过程记传统的色轮来记取它的法则。

网站barcamp omaha 2014 在持续滚动的页面地区，采用了大量差别的色彩。最突出的一点是，文本设计很好地融入到每一个背景部分。页面上对比度最大的，每每是图形或按钮。你可以在全部网站中都看到这种效果。

看duplos的网页，你可以看到一些色彩差别的对话气泡，运用雷同的白色文字。由于背景色彩够深，文字在各种色彩背景下都可读。这种不是纯真的基于文本的界面，值得我们在设计中去学习寻求。

paletton是我个人最喜好的，由于它提供了一系列基于调整饱和度的绝对色。它还提供了基于你所选择的色彩，雷同的色彩规模的预设方案。最主要的是，它是完整免费的！

最安全的选择是一直退回到一个明暗标准——灰色在白色上或白色在灰色上。深色的文字在亮色的背景上愈加明显，反之亦然。然而，一些色彩经常发生一种不协调的效果，如红色和绿色。这种对比在某些情形下是精美的艺术， 但不是任何情形下。在规划当中，如果碰到色彩丰硕的处所，在给链接和按钮用色时要异样小心。

邻近色在色轮上紧邻相互。很显然如许的配色方案不会发生高对比度。但在设计图形、banner、纹理或许背景，这些需要匹配全部网页色系的元素时，这是异样实用的。毕竟在总体规划上，并非全部都应该是需要高对比度。

迩来我发明了ian storm taylor写的一篇文章， ，标题叫做《不要运用黑色》。它指出，经由过程防止在界面上运用纯黑色，能更其实地反应现实世界。这可能是一个有偏见的说法，不外近些年来，我发明这是一个极好的建议。

互补色是色轮上绝对的两个色彩，它们之间的色彩对比异样激烈。比方，紫色按钮在黄色背景上异样的突出，由于它们是高对比度的配色。虽然，这还取决于每一种色彩的饱和度，经由过程实际来懂得是最好的。请记取：对峙对比！

入门色彩实际，最简略的方法可能是从一个单一的色彩开端着手，并运用在线指点工具。不人与生俱来就懂得色彩的选择。但随着一直的反复，它就变成了你的第二天性。

在线web运用，如paletton是晚期的方案设计中必不可少的。你输入一个单色，然后选择你喜好的（邻近色，三色式，四色式等）匹配方案。每种配色方案允许额外弥补一个，与你选择的色彩相反的色彩。

这个图是值得我们去懂得的，由于色彩都是绝对的。所以，一个“冷”色，像蓝色用在淡色中就不那么冷了，同样的“暖”色，在暗色中也就不那么暖了。色彩系统是一个奇怪的话题，由于它经常与其它色彩相互作用。如许听起来好像是不意思的，但你可以把它作为学习的例子，在现实的项目中一直训练。

将色彩添加到设计中使画面的抒发愈加丰硕。图形、字体、按钮和超链接，全部都可以在某种水平上匹配总体的基调。比方，葡萄园网站的色彩和水族馆网站的色彩是差别的。为什么呢？由于这是两种完整差别典范的网站，它们试图传达差别意思、目的或许情感给自己的目的受众。

当谈到提炼自己的配色方案，我激烈建议选择这两个中的一个。它们都是基于web的免费工具，并提供充足的功能，让你开端结构可憎和丰富多彩的项目。

当选择一个配色方案时，你有很多差别的情势可以遵守。虽然不是每个人都懂得如何选择色彩，幸好网络上有很多方便的资源，来赞助我们完成这个义务。我以为这些色彩折衷的网页做的很精彩，然而让我们探讨一些更风趣的选择吧。

本指南探索的主题是对网站和平面设计的色彩。学习进步的色彩实际最好的方法，是经由过程实际，而不是实际。然而为了进步，你必须有一个起点。除了有效的配色技巧和观点，你还可以发明很多宝贵的资源散落在整篇文章中。

三色式是在色轮上等距隔开三个独立的色彩，三种色彩在色轮上要呈正三角散布。当要摆弄这种配色方案时，一定要选出一种色彩作为主色，其他两种作为帮助色，均衡色彩，决议它们应该如何融入整体规划。饱和度在此中表演主要的脚色，然而整体的配色方案仍然不会因此发生大的变更。

从美学界失掉一些建议，就是防止纯黑色。当你看到现实生活中的物体，你简直看不到纯黑色。现实看起来很暗，但它的hex色值（十六进制）不太可能是＃000。你乃至可以实验拍摄照片，并在photoshop中测试它的hex色值。

如果你正在寻找预建的配色方案，有很多可用的网站。一种选择是colorschemer，它有大量的附加功能，如移动运用次序和桌面软件。但该网站本身是免费的，并提供了用户生成的一个大型的配色方案展示库。

iforex water 是一个视差网站，展示有关水资源消费的信息。不像我最后一个例子，此网站在每一屏都运用雷同的色彩，然而背景在一直变更。然而由于色彩都是深色，它们仍然可以作为背景畸形工作。

结果以表格情势列出来，说明了每个页面元素，在对比度和亮度方面的差别。这虽然也不是完美的，但它确实为新的设计师，提供一个精良的开端。

我喜好用具体实例来说明色彩的选择，而不是列一堆网站。这些例子可能不是色彩匹配的绝对典范，但它们确实为网页设计师提供了一个牢靠的学习教训。

但你会发明全部规划，还有其它的高亮色彩。橙色和浅蓝色的出现异样突出，与暗色背景造成对比。要记取在选择一个配色方案时，运用2个或3个差别的色彩，由于如许很可能会设计出一个异样棒的网站。

我们大多数人都知晓adobe产品中有拾色器，如photoshop或许illustrator。这是一个迫切需要的工具，由于它提供全部色谱，以及一个rgb和hex值。但当初大多数web浏览器插件，可以复制一个相似的色彩选择器。

选择配色方案的时间，会在启动一个web项目并网络设法（线框图，草图，页面元素）之后。这可能发生在设计一个简略的模型之前或许之后，但方法仍然是雷同的。只需选择一种色彩，可以与基于内容、情势、风格或情绪的规划很好地工作。

chroma是谷歌chrome浏览器为设计师和色彩爱好者，提供的一个免费扩大运用。它有一个正方形和圆形的色彩选择器，以及很广泛的差别明度的配色工具。 mozilla firefox浏览器有一个相似的扩大运用，叫做colorzilla，它有吸管功能，可以从网页选择色彩，并显示它的rgb及hex色值。

另一个盛行的选择是adobe color，它有异样相似的设置，但界面有些复杂。你仍然需要基于输入一个单色，来选择配色方案。不外adobe color运用色轮展示匹配的颜，每一种色彩是灵巧的，易于移动的，在保持色彩情势一致性之内。

决裂互补色异样像前面的互补色方案，但轻微有些变更。该配色方案是从色轮上的一个点开端，搭配与它绝对的两个相邻色，运用邻近色来取代互补色中的一个。决裂互补色的对比仍然异样激烈，但它并不会像互补色搭配那样刺目，使人感到不舒畅，它给色彩的选择提供了一点回旋余地。

虽然这种风格可能并非实用于每个站点，但他它却是混色的一个很好的例子。页面很轻易阅读，但并不以为对比度太强。找到一个甜蜜均衡的色彩是一个设计师的最终义务。

digimurai是一个更简略但典范的网站。不言而喻，网站的设计规划主要会合在暗蓝色的色彩中。这给人的印象是，蓝色占主导位置，并控制了大部分的设计。

最后，我生气这个指南能提供牢靠的起点给列位数字艺术家和网页设计师。色彩实际异样像音乐实际，此中主要的原理是经由过程实际获悉，而不是传统的实际分析。然而在起步阶段，可能会感到有些困难，等你积聚了相称一部分资源和实际基础之后会感到越来越顺畅。

如果你真的想懂得配色方案的选择，那么就要保持训练。刚开端的期望值不要太高，由于很有可能你在初始阶段的实际结果不会很成功，然而随着时间的推移，你会做得越来越好。