UX设计师的基本色彩工具

来源:设计前沿 作者:尼克·巴比奇 时间:2017-08-06

颜色是设计师工具包中最强大的工具之一。同时,颜色是一个棘手的概念,掌握 - 无限数量的可能的颜色组合在那里,可能很难决定在您的网站或应用程序使用什么颜色。为了使事情更容易,我创建了一个选择调色板的最佳工具列表。我相信他们会节省你很多时间。在本文中,您将找到可帮助您的工具:

寻找灵感创建自己的配色方案使颜色方案可访问

寻找灵感

性质

已经有很多灵感。要得到灵感,只需要环顾四周。打印设计,室内设计,时尚...有如此多的鼓舞人心的地方聚集起来。最好的颜色组合来自大自然 - 只需拍摄一张美丽的时刻,并从这张照片创建您的配色方案。
配色方案

最好的颜色组合来自大自然。您可以从拍摄中创建配色方案。

Behance的

Behance展示并发现各行各业的创意人才的顶级在线投资组合的最新作品。这也是灵感的重要来源。找到新鲜有趣的创意工作,只需按颜色过滤即可。
配色方案

运动颜色

Dribbble是用户界面灵感的最佳选择之一。它具有通过颜色搜索的工具,所以当您想对其他设计师使用特定颜色进行视觉研究时,请转到dribbble.com/colors并选择所需的颜色。
配色方案您还可以指定包含颜色的拍摄的最小百分比(例如拍摄是30%的蓝色)。
配色方案

指定包含颜色的拍摄的最小百分比

Designspiration

当您有一个想法您的调色板,但您想要看到这个组合的例子,设计感觉是一个伟大的工具。您可以选择最多5种颜色,并搜索符合您的查询的图像。
配色方案配色方案

设计指导将提供相关示例

Tineye Multicolr

Tineye将帮助您搜索照片中的颜色混合,甚至指定每个颜色的颜色(颜色比)。本网站使用来自Flickr的2000万个Creative Commons数据库。这可能是以完美的颜色组合获得自由图像的最快方式。
配色方案

Colorzilla

ColorZilla是可用于Google Chrome和Mozilla Firefox的扩展程序,其中包括一系列与颜色相关的工具,包括颜色选择器,滴答仪,CSS渐变生成器和调色板浏览器。
配色方案

ColorZilla适用于Chrome和Firefox

Canva

Canva设计维基上的颜色教你所需要知道的关于颜色,意义和颜色组合的一切,希望能给您的下一个设计灵感!
配色方案配色方案

Shutterstock频谱

有时,如果一个配色方案能奏效,最好的办法是通过选择股票图像。所有主要的股票图像服务都提供这种工具,但是Shutterstock Spectrum拥有非常好的界面,具有大型预览图像。您甚至不需要订阅,因为具有水印的预览图像将足以生成调色板。
配色方案

2.创建配色方案

材料设计色彩工具

材料设计颜色工具可以创建,共享和应用调色板到您的UI,以及测量任何颜色组合的可访问性级别。
配色方案

Coolors.co

Coolors是一个强大的工具来创建多彩多姿的方案。您可以简单地锁定所选颜色,并按空格键生成新的调色板。这个工具很酷的事情是,你不仅仅只有一个结果 - 只需修改参考点就可以接收几种配色方案。
配色方案使用此工具也可以上传图像并从中调出调色板。
配色方案

Coolors可以让您上传图像并从中调出调色板。

Adobe Color CC

该工具以前被称为Kuler已经和我们在一起了很长时间。它可以作为网页和桌面版本使用。使用网页版本的工具,可以使用色轮创建配色方案:
配色方案

Color CC允许您创建和保存各种颜色方案,每种颜色方案由一组五种颜色组成。

从现有图像创建配色方案:
配色方案
从现有图像创建配色方案。

或者在“浏览”部分浏览Kuler社区的数千种颜色组合:
配色方案如果您使用的是桌面版本,则可以将颜色方案直接导出到Photoshop,Illustrator和InDesign中。

Paletton

Paletton类似于Adobe Color CC。不同之处在于,您不仅限于5种音色,还可以播放额外的音色。
配色方案

颜色可及性

视觉问题比我们大多数人意识到的更为普遍。全球2.85亿人的视力受损。更多的视频难度低或中等。确保为视力障碍的用户提供选定的配色方案至关重要。

WebAIM颜色对比度检查器

一些颜色相互交流,而其他颜色会相互冲突。令人惊讶的是,有多少网站和应用没有通过AA测试。不要成为其中之一!在使用文本时,必须检查UI颜色的颜色对比度可访问性。使用WebAIM颜色对比度检查器来测试颜色组合。
配色方案

WebAIM Color Contrast Checker是一种基于浏览器的工具,用于测试以十六进制值指定的颜色代码。

Coolors

冷却器可以测试您的色盲方案。所有您需要做的是在界面中选择颜色。
配色方案

选择一组反映您的配色方案的颜色

将模式从“正常”更改为要测试的模式。
配色方案
选择一种色盲

你会看到一个颜色不足的人会看到你的配色方案。
配色方案
一个有素质的人如何看待配色方案

NoCoffee Vision Simulator for Chrome

NoCoffee Vision Simulator可用于模拟Chrome浏览器中可查看的任何页面上的色差缺陷和低视力条件。例如,使用“色差”设置“achromatopsia”,您可以灰度查看网页。
配色方案

一个有deuteranopia的人会看到CNN网站

结论

上述工具可以轻松找到合适的颜色组合。请记住,学习创造令人惊叹的配色方案的最佳方式是练习很多。

作者主页:http://babich.biz/colorstools/