可搜索课程、软件、讲师、读书、直播
温馨提示：本文分为两Part，前半段推荐网站，后半段讲配色的重点。因公众号不支持外链，请在文末领取本期推荐工具在线链接。
你认为有用的方法，可以收入囊中；不太认可的方法，可以浅尝辄止。关键是摸清这些方法背后，传递的对颜色的知识和配色的奥义。你不需要纠结哪一种方法是正确的，但一定要了解颜色背后的原理，才可得渔非鱼。
例如对“色环”、“明度”的认识，可以让你对颜色的运用更加和谐。对“颜色对比度”、“WCAG标准”有所了解，可以让你在用户体验的优化上，更有理有据。
但在还没有熟练积累理论知识之前，既然大家对配色的需求这么大，我整理了5个适合UI的在线配色工具。希望能够帮助到你们。
1.COOLORS·关键词：自主配色|颜色库|明度判断COOLORS功能很全，可以以基础色生成配色，也可以参考网站提供的优质配色方案。亮点是支持以明度方式查看颜色组。
同时COOLORS提供iOS端移动版和Adobe插件（不过这些功能需要付费），绑定账号后可以云端搭建个人颜色库，这让一些需要在iPad上创作或者想让颜色库插件化的朋友，对配色组的管理变得更便捷了。2.ColorHunt·关键词：主色辅色|配色标签ColorHunt无法根据基础色生成配色，只能根据网站提供的色板来选取你心仪的色组。
但它的特色在于给配色方案引入了标签，针对你当前的产品或页面的调性，你可以根据例如「金色」、「春天」、「圣诞节」等等标签，对配色组进行筛选。
并且ColorHunt将主色以大色块展示，让你对该色板内的主色、辅色的应用心中有数。3.AdobeColor·关键词：色彩调和|视觉残障体验|Behance一直致力于视觉研究，拥有Photoshop、Illustrator等众多设计产品的Adobe公司，也有在线配色生成器，采用的配色方法也更加专业，支持在色环上以互补色、对比色这样的色彩调和方式生成配色。
而且拥有大厂光环的Adobe对色彩的用户体验也更加注重，带有色盲辅助工具，时刻提醒着设计师要注重色彩的友好体验。
虽然不支持自主添加基础色，生成渐变参考，但我认为WebGradients是我看过大量渐变参考网站中，模板质量较高的，并且配色更适合UI设计师（相比一下可能更适合美术绘画类的参考网站而言），值得一淘。
并且WebGradients支持CSS代码拷贝，为前端小哥省事了~真是维护同事关系的好帮手~5.Grabient·关键词：渐变色|自主调色|CSS代码生成和WebGradients大量的渐变模板比起来，Grabient提供的渐变方案较少一些，但允许你手动添加更多的颜色做渐变，并且可以改变渐变角度。
改变了颜色和角度之后，还可以生成CSS代码，也是一个UI和前端的好帮手。配色参考价值没有WebGradients高，但实用性上更胜一筹。参考网站很多，该怎么用？
配色参考网站其实很多，远远不止我推荐的这5个，但是它们是我筛选出来，自认为更适合UI设计师的5个。工具不在于数量，而在于质量！
参考网站那么多，真正会用的朋友可能并不太多。配色网站并不是直接拿上配色，就开始往页面或作品中套的。
注意以下的点和步骤，可以帮助你更好地使用配色工具：
1.明度的调节配色网站的受众群很多，为了方便让各个领域的设计师使用，给出的配色方案可能比较混杂。比起一些夸张的方案，UI设计师可能需要的是更加理性的配色。
协调的明度，让主色、辅色更加和谐，我在《产品色彩系统居然可以套数学公式？》中就有讲过。还不知道明度的意义的朋友，建议阅读。这是我为什么推荐COOLORS的原因。
2.主色辅色的比例尽管是在线生成的不错的配色方案，但也不要无脑地往页面里随意填充，依然是要区分主色、辅色、点缀色。并且对主色、辅色、点缀色运用的比例大约在6：3：1左右。
这一点和选色无关，而是和色彩的运用有关。很多朋友用了在线配色工具去设计产品或者页面，会有“为什么搞出来还是不好看”的问题，很可能并不是因为你选错了颜色，而是你用错了颜色。
3.颜色的用户体验
会用色之后，就可以尝试多考虑颜色的进阶知识点了：用户体验，例如我在《配色的用户体验：颜色对比度》中提到的一样。这也是我推荐AdobeColor配色工具的原因。