返回  

选择网站配色方案的10个工具和技巧

2017/12/29 10:14:21 来源:深圳网站建设公司Clh

为网站设计找到一套完美的色彩组合是一项具有挑战性的任务,尤其是当你试图使某个特定的设计符合客户的要求时。今天,我们挑选和整理了一些很棒的配色方案生成工具,希望可以帮助你轻松地创建完美的调色板!


如果你想为一个网站设计找到完美的配色方案,不要感觉无所适从,就算你并不是一个专业的配色专家,借助合适的工具,你同样也可以完美的完成你的工作。

但是,在你使用颜色工具之前,让我们弄清楚在设计中使用合适的颜色组合时需要考虑的一些事情。


1.选择配色方案的重要性

为网站设计或其他任何类型的设计选择颜色方案决不应随意进行,你应该密切注意找到适合行业、文化、品牌和企业或其代表的想法的合适的颜色。

无论如何,我都认为你一定不希望自己的网站时这样的:

best-tools-tips-for-choosing-website-color-scheme

你能相信以上的这个案例实际上是一个防自杀热线的网站吗?显然,任何访问这样一个网站的人,只要看一下这个设计,可能会感到更加沮丧。

即便你的设计并没有那么糟糕,你也需要一个外部的视角来真正地了解你在网站设计选择颜色时所犯的错误。

例如,你知道颜色对人的情感有很强的影响吗?


2.色彩心理学

色彩心理学是解释某些颜色如何影响我们的情绪或说服人们采取行动的理论。

根据研究,人们在看产品的头90秒钟内会对产品做出下意识的决定,其中90%的判断是基于颜色的。

你是否有注意到为什么那些“待售”或“促销”的标志在商店里总是红色的?这是因为红色是少数能立即引起人们注意的颜色之一。

为什么与环境有关的组织和房地产企业在他们的品牌中使用绿色?当然,这并不是因为青草和树木的颜色。这是因为绿色代表着成长、财富、和平和健康。

了解色彩心理学将对你网站设计的成功起到重要作用。因此,在选择配色方案时,学习如何使用它。


3.选择完美配色方案的秘诀

在为设计选择合适的颜色组合时,还有许多其他的事情需要记住。就像选择一种持久的配色方案,而不是盲目地追随潮流。

在选择配色方案时,要记住以下几点:

· 考虑到色盲,使设计更加友好

在设计中使用颜色时,设计师几乎总是忘记考虑现实中存在色盲这一情况,而且常常忽略了它对企业概念的影响。

当马克·扎克伯格设计FaceBook时,他选择使用蓝色作为用户界面的主要颜色,因为这是他眼睛所能看到的最丰富的颜色,马克·扎克伯格是色盲。

不要因为多数人就忽略了那些少数,你要让你的设计适合所有人。

· 想想你的受众

一个很受欢迎的网站使用了一个足够吸引人的色彩组合并不意味着你就可以直接使用它在你的设计中,你需要考虑你的受众。

如果你的网站目标偏向于国际群体,你应该试着去适应代表不同的文化和种族的颜色。例如,在西方国家,黑色代表奢华和大胆。在印度文化中,同样的颜色代表邪恶、消极和缺乏活力。

· 寻找代表品牌的颜色

最后,设计的主要目标应该是将你的品牌或商业信息传达给访问者。所以,选择你的颜色来帮助达到这个目标,使用品牌色和色彩心理学来达到这一目的。


现在,正如上面说提到的,这里有一些很好的工具可以用来为你的网站设计选择合适的配色方案。

1.)Adobe Color CC

best-tools-tips-for-choosing-website-color-scheme

适用于:更专业的用户

这是许多专业人员使用的工具。自从Adobe公司开发完成这一软件后,Color CC就配备了高品质的选项和功能,可以使用其来生成一个合适的色彩方案。

而且,它还涉及到很多更高级的定制和颜色选择,如单色,混合色等,这使得它更适合于更专业的设计师。


2.)Coolors

best-tools-tips-for-choosing-website-color-scheme

适用于:初学者

Coolors是一个可以快速生成调色板的应用,你可以使用它来即时创建一个你想要的配色方案为你的网页设计

你可以使用该工具轻松的创建漂亮的颜色组合,而无需任何经验。或者你可以探索和借鉴其他设计师创建的配色方案,为自己的项目“复制”他们的调色板。


3.)Colormind

best-tools-tips-for-choosing-website-color-scheme

适用于:网站以及UI设计师

Colormind可以从普通的配色方案中,“提炼”出更高层次的超越基础调色板颜色的配色方案。

在随机或手动生成颜色方案之后,该工具可以帮助你了解调色板中的每个颜色,同时建议在阴影、高光和背景中使用哪种颜色。它还将让你看到颜色如何与某些UI组件匹配,如按钮和选项卡。

对于网站设计者和用户界面设计者来说,这是一个很好的工具。


4.)Material Color Tool

best-tools-tips-for-choosing-website-color-scheme

适用于:UI设计师

这是一个专门为用户界面设计者寻找配色方案的工具。但是你也可以用它来为你的网站应用程序或者网页设计创建一个材质类的调色板。

这个配色方案生成器有一个很直观的预览模式,可以让你直接看看你选择的颜色在实际设计中会是什么样子。这将节省你的时间。


5.)Color Safe

best-tools-tips-for-choosing-website-color-scheme

适用于:初学者

Color Safe是一个有趣的工具,可以帮助你创建一个与符合WCAG指导色的配色方案。

这是可以生成设计师要遵循的保持前景色和背景色在4.5:1对比度规则的配色方案的一个重要工具(AA级)。生成器将帮助你找到满足这些指导方针的完美颜色。


6.)Paletton

best-tools-tips-for-choosing-website-color-scheme

适用于:更专业的用户

paletton是一个高级的颜色调色板,配有一套定制化的功能选项,是富有经验的网页设计师最理想的工具之一。

该工具可以定制和查看单色,相邻色等等。一旦你选择了一个配色方案,你也可以运行一个模拟,看看颜色如何在不同的屏幕环境下以及不同的屏幕条件下看起来的实际效果。


7.)Colordot

best-tools-tips-for-choosing-website-color-scheme

适用于:初学者

这个简单易用的配色方案生成器可以完美的帮助网页设计师立即生成一个他们需要的配色方案而不需要太多的技巧。

在最开始,你所要做的只是在屏幕上移动你的鼠标,找到你喜欢的颜色,然后左键单击选择那个颜色。你可以一直点击,直到你选择你想要的颜色。


8.)Colourcode

best-tools-tips-for-choosing-website-color-scheme

适用于:初学者

Colourcode是另一个快速选择配色方案的简单工具。它可以像Colordot一样进行简单的操作。

然而,Colourcode的定制功能更加高级一些,它允许设计人员尝试不同的组合。

一旦你选择你的配色方案,你还可以下载配色板以.scss或.less的格式,甚至是一个PNG文件。


9.)Palettr

best-tools-tips-for-choosing-website-color-scheme

适用于:初学者

Palettr不同于其他配色方案生成器。这个工具不是手动拾取颜色,而是根据主题或地点生成颜色方案,如纽约、巴黎、罗马或冬季和夏季。


10.)Material Design Palette

best-tools-tips-for-choosing-website-color-scheme

适用于:初学者

如果你打算制作一个网站或一个基于Material Design的应用程序设计,这个调色板生成器将很方便。

一旦你选择了两种颜色作为主要的和次要的色调,Material Design将给你一个真实的颜色效果以现实生活中的外观预览。然后,你可以下载调色板以CSS, SVG, SASS, LESS, PNG或更多的格式文件。


关于你

在遵循我们的技巧和使用这些工具的同时,也要密切关注你的客户的品牌形象。重要的是你要设计网站来代表品牌和公司。

此外,尝试探索一些已经在这方面做得很棒的网站设计,看看他们如何使用颜色并向他们学习。




----图文来自:design shack 

----由深圳网站建设公司-Clh翻译编辑整理,为您提供更多有关深圳网站建设网站设计网页设计及其他互联网应用服务