配色是设计师绕不开的一个主题和元素，用好了可以为你的设计增光添彩，用不好可能满盘皆输。每个人对色彩的感觉不同，好的配色会让人心情愉悦，提升用户对产品的好感度，而不好的配色可能会让人心理和生理上产生双重抗拒。以下是我平时收藏的配色工具，筛选一些比较实用的分享出来，希望可以为大家提供一些灵感和帮助，多分析好作品的配色，慢慢你就会发现，其实色彩也并没有那么神秘。

---

一、色板类

设计师挑选一些时下流行的配色为我们配好的色板，点击相应的颜色可以复制色值，选择你喜欢的配色直接应用在设计作品中，可以方便快速的做一个不出错的设计。但同时缺点是，少了一些可变性和让设计师主动思考的空间，属于懒人型工具。

推荐指数：★★★☆

推荐网站：

（1）Color Hunt

网址：https://colorhunt.co/

（2）Trendy Palettes

网址：https://trendypalettes.com/

（3）Color Drop

网址：https://colordrop.io/

（4）LOL Colors

网址：

https://www.webdesignrankings.com/resources/lolcolors/

（5）COLORION

网址：https://www.colorion.co/

（6）Colors-House of van Schneider

网址：https://www.colorion.co/

（7）peise.net

网址：http://www.peise.net/

（8）Design Seeds

网址：https://www.design-seeds.com/blog/

二、色轮类

这一类网站工具就多了一些灵活性，设计师可以自主挑选配色，调节好后下载到本地。前三个网站可以上传自己喜欢的图片，自动分析配色方案，十分方便。

推荐指数：★★★★

推荐网站：

（1）Adobe Color CC

网址：

https://color.adobe.com/zh/create/color-wheel/

（2）Generate-Coolors

网址：

https://color.adobe.com/zh/create/color-wheel/

（3）colorfavs

网址：

http://www.colorfavs.com/palettes/157472/

（4）Colourcode

网址：https://colourco.de/

（5）Colordot

网址：

https://color.hailpixel.com/#032B20,261E03,2B3904

（6）HUE/360

网址：http://hue360.herokuapp.com/

三、Material Design

Material Design是Google I/O 2014年发布的全平台设计语言规范，在Android手机系统以及Windows桌面端广泛应用，对于UI设计师来说掌握Material Design意义重大，同时Material Design对于颜色的使用也作了规范和限制。以下网站集合了可以使用的颜色，供设计师挑选。

推荐指数：★★★★

推荐网站：

（1）Material Design Palette

网址：https://www.materialpalette.com/

（2）Flat UI Colors 2

网址：https://flatuicolors.com/

（3）Material Design Colors

网址：https://www.materialui.co/colors

（4）Material UI Colors

网址：http://materialuicolors.co/

四、网页安全用色

身为设计师，我们有时候不能一味的追求视觉效果，也应该考虑到你的用户中可能会有一些特殊群体，包括盲人和低视患者、聋人和重听人、学习障碍、认知障碍、行动不便、言语残疾、光过敏患者和这些病症的复合患者。这些网站可以来帮助检测你的设计是否符合WCAG原则，WCAG是内容无障碍指南，他针对如何让你的web内容更易为广大残疾人士所接受提出了一些建议，遵循这些原则，可以让你的网站内容更容易被访问，提升用户体验。目前的版本为WCAG2.0。

推荐指数：★★★★☆

推荐网站：

（1）ColorSafe

网址：http://colorsafe.co/

（2）ACCESSIBLE COLORS

网址：http://accessible-colors.com/

五、颜色分类推荐

在这里你可以自己选择某一种颜色，网站为你挑选相应主题色的作品，可以参考借鉴别人是如何使用这类配色的，让你的搜索更有针对性，属于设计师必备灵感神器。

推荐指数：★★★★★

推荐网站：

（1）CSSWINNER

网址：

https://www.csswinner.com/colorsearch/blue

（2）Behance

网址：https://www.behance.net/for_you

六、日本传统色系

日本传统色系，指的是日本古典文学里经常采用的颜色。这些颜色常被用于和服或其他日本传统艺术和手工艺中。——维基百科

这些色板为我们展示了日本传统色系，如果你刚好需要做一个日式的设计作品，那么你应该会用到它。

（1）NipponColors

网址：http://nipponcolors.com/#momo

（2）优设网-日本传统色彩

网址：https://color.uisdc.com/jp/

（3）Colordic

网址：https://www.colordic.org/w

同时在这里也为大家安利一个霓虹国传统颜色APP——Nihon，它内置451种日系元素色彩，每一种色彩都有自己的专属名字，这里还给每种颜色提供了5种样式的壁纸。整个界面设计的清新简洁，从交互动效到UI界面，每一处细节都经过作者的精细打磨，独立开发者Byzantine General说他希望Nikon不仅仅可是是一个对设计师有用的作品，普通用户也可以从中感受到轻松和美。所以除了有 RGB、CMYK 以及 HEX 这样的专业色值以外，这里还采用了在日本商用甚广的 A1 明朝字体，这样不仅中国和日本用户可以感知颜色的名字，欧美用户也可以感知到东亚独有的这种有力的字形结构。

以上就是所有的配色工具推荐，相信有很多人跟我一样，网站收藏了一大堆，但是都没有用心去分类整理和研究。虽然工具的种类很多，但是挑选出最合适自己的一两种就足够了。

---

下面是一篇来自Tubik的文章，作者给我们分享了6个有用的UI配色技巧，掌握工具的同时也要熟悉配色原理，才能做出好的设计。

用户体验设计需要包含许多经过深思熟虑的过程，这样可以确保你设计的界面能满足目标用户群体的需求。每一个步骤都需要对各种细节进行深入研究，即使有一些小结构看起来并不复杂。

配色一直在UI设计中占据着主导地位，同时也是相对比较费时费力的一步，设计师有时候需要花费好长的功夫来选择合适的色板。在这篇文章中，我们会介绍六种有用的配色技巧，来帮助UI设计师简化这个过程，提高工作效率。

一、60-30-10原则

这个原则，或者说技巧来自于室内设计，它经常被用在房间装饰上。其实这个原理很简单。为了平衡整个空间组合，颜色的比例应该是60%-30%-10%。主导色应该占据比较大的面积，辅助颜色大概占据30%，剩下百分之10用于点缀。

这种颜色搭配让人视觉上感觉比较舒适，因为它给人一个逐渐感知视觉元素的过程。知道了这个合适的比例，设计师们就可以自由的搭配组合颜色，而不会让你的UI界面最后变成五彩斑斓的黑色。

二、巧用对比色

对比色往往是视觉设计中很关键的一部分。它为每一个UI元素赋予了独特性，让他们更易被识别。如果你的设计作品全部使用的是相同色系的颜色，而仅仅是以阴影来区分每一个组件的话，它们很难吸引到用户的注意力。而且在这种UI界面中，如果你想复制些内容，往往很难识别，这给用户与产品的交互带来了很大的阻碍。

设计师应该根据设计目标来控制颜色的对比度，比如，如果你需要用户注意到界面中一个特别的UI组件，就可以用一些对比强烈的颜色，比如蓝色跟红色。高对比度设计一般用在CTA（行为召唤）按钮中。

然而，对于整体的UI设计而言，高对比度并不总是最好的选择。如果复制的时候选中的内容与背景颜色对比度太高，会让用户难以阅读或者识别。这就是为什么我们一般比较推荐设计师选择一个相对温和的对比区间，只是为需要某些高亮显示的元素使用高对比度配色。在不同的设备上进行可用性测试可以确保设计方案的有效性。

三、色彩心理学

正如我们在之前文章中提到的，心理学是整个设计流程的辅助内容之一，其中的一个分支显示了色彩对人们情绪以及某些行为的影响，我们称它为色彩心理学。它表明了我们的大脑会对不同颜色作出相应的反应，但是这个过程我们往往察觉不到。当我们的眼睛接收到一种颜色时，我们的大脑会对分泌系统发射信号，从而释放出一些影响我们情绪的激素。

每种颜色对我们大脑的影响都是不同的，了解人们这些不同的反应可以帮助设计师们在作品中正确传达信息和设计理念，引导用户做出相应的预期行为。这里简单列举下不同颜色所代表的含义。

红色：它同时有好和坏两种含义，它代表着爱、自信、激情但是同时它也是危险的象征。

橙色：一种充满活力且温暖的颜色，会给人带来愉悦感。

黄色：它代表着幸福、阳光、快乐和温暖。

绿色：来自大自然的颜色，让人感觉平静祥和并且生机勃勃。

蓝色：它经常被用于企业色，也会让人联想到距离感和忧郁。

紫色：代表着贵族和财富，同时也带有一丝神秘和魔力。

黑色：象征着悲剧、死亡和神秘，它既传统又现代。

白色：这个颜色意味着纯洁和纯真，很有整体性，并且很透彻。

此外，设计师也要知道，每个人对于色彩的感知都是不同的。像年龄、性别这些因素往往都会对颜色喜好产生很大的影响，所以了解你的目标用户群体尤为重要。你可以在我们之前的文章中找到关于颜色含义和不同喜好的详细描述。

四、不要忘记文化差异

每一种文化都有它自己的传统和信仰，所以在选择配色之前，你需要确保它们按照你的想法向用户正确的传达设计理念。问题在于，有的时候一种颜色可能在不同国家代表着完全不同的含义。例如在欧洲国家白色代表着纯洁，经常用在婚礼上，但是在很多亚洲国家，这个颜色意味着死亡和悲伤。颜色的误用可能会让用户产生误解，对于一个产品来说这可能是致命的。通过了解因为这些文化差异而造成的用户对于颜色感知的差异，可以帮助设计师规避掉很多风险。

五、色彩平衡

让色彩保持平衡是UI设计追求的目标。为了让用户感觉愉快并且舒适，设计师们努力让UI界面中的元素互相和谐共处。和谐的色彩搭配通过排列组合，让用户以最快速最有效率的方式获得感知，帮助网页或者APP获得良好的第一印象。

经过这么多年的探索，设计师们梳理出了一些基础的配色方案，来让工作变得更有效率，我们可以一起学习一下。

同类色：基于同一色系的不同色调或明度。

邻近色：在色环上彼此邻近的色系。

互补色：在色环上彼此相对的色系，通常用来作为高对比度配色。

分裂互补色：跟上一种配色方案类似，但是他需要用到更多的颜色。比如说如果你选择了蓝色作为主色调，那你需要再选择它相对的颜色周围的两个颜色，，也就是红色和黄色，来进行互补。

三色系：它是位于色环上的三个不同位置的颜色，彼此之间距离相等，一般建议选择一种颜色作为主色调，其他两种颜色作为辅色。

四色系：四种颜色两两互补，如果你把它们在色环上连接起来，就是一个四角矩形。

六、从大自然中汲取灵感

我们的大自然母亲是世界上最好的艺术家和设计师，我们能看到的最完美的色彩组合，往往来自于自然环境中。人们钟情于日出日落，春去冬来，因为它们是大自然最好的配色作品。

那么，你为什么不尝试去借用一些想法呢？出去走走或者拍一些好看的照片，一定会从中获得一些灵感的火花。

一件数字设计作品的成功的往往取决于其UI的配色，好的配色可以让用户在使用你的产品时感觉很舒服。设计师们可以通过不同的配色方案引导用户的行为，做出最明智的选择。

—— End ——

---

原作者：Alina Arhipova

编译：视觉派Pie

原文链接：

https://tubikstudio.com/color-matters-6-tips-on-choosing-ui-colors/

版权声明：本文在不改变作者愿意的情况下，做了删减和编排，版权属原作者所有。本文仅为翻译，不代表本人观点。