Marinerer
commented
6 years ago 配色
配色是设计师的基本功，也是日常设计中最核心的部分，甚至是每个设计师每天都得做的功课。为网页选择一种基础色并不难，但是想要一套可用的色彩组合，则是一件相对棘手的事情。所以，很多时候，借助配色工具来寻求配色方案是一个颇为不错的想法。
配色方法和配色工具有很多，有的工具需要配合特定的方法，而有的工具则只能应对特定的需求。今天为你整理的这个合集主要是为网页设计师所准备的在线配色工具。
配色工具
1. Adobe Color CC ✨
你应该知道这款Adobe 出品的配色工具，早期它是以 Adobe Kuler 的名字投入市场的，现在正式更名为 Adobe Color CC，并且纳入到创意云套装当中了。
- 主题库
- 创建主题 (可通过图像获取色彩)
- NOUEBO Original主题
- Flat-UI主题
2. ColourLovers
ColourLovers 是一个配色爱好者社区，它包含大量的图片和它们相应的配色方案。许多配色爱好者会从漂亮的图片当中获取相应的配色方案，帮助设计师们更好地搭配。
3. Coolors
Coolors 是一款直观而快速的配色工具，你可以以更加简单的方式创建色彩组合，同样可以直接从图片中取色，还可以生成不同的格式，比如SVG、PDF或者SCSS，可用于Android、iOS、PS和AI等不同的平台。
4. Color Snapper 2
Color Snapper 2 是一款为OS X Yosemite 所专门创建的配色工具。它为专业的平面设计师而生，可以在屏幕上挑选，调整，修改，组织，保存和导出各种颜色。
5. Colordot
Colordot 这款配色工具有网页版和iOS APP两个版本，你可以直接从调色板来创建配色方案，也能通过图片和拍照来取色，并且轻松地分享出去。
6. Adobe Capture CC
Adobe Capture CC 和 Adobe Color CC 虽然都是取色工具，但是各自偏重不同。Capture 是基于你所拍摄的照片来获取配色方案，然后你可以用这个配色来创建笔刷或者图案。这款工具同时兼顾到了桌面端和移动端的需求。
7. LOL Colors
想要获得更多配色方案上的灵感？LOL 将许多配色方案打包提供给你，每个方案都有HEX和RGB等代码，确保你立刻可以上手使用。
8. Gradients.io
Gradients.io 让用户可以使用渐变色来覆盖图片。这个网站中整个页面中塞满了各式各样不同的渐变色配色方案，并且搭配了这些配色方案对应的HEX值。
9. Color Sphere
Color Sphere 同样是一款具有针对性的配色方案，它主要是帮你生成同一色调下的配色方案。每套配色方案的色彩都会生成对应的HEX值。
10. CheckMyColours
CheckMyColours 可以帮你检测和对比网页中所有的位于前景和背景的DOM元素的色彩，确定他们的对比度是否合理，视力障碍人事能否清晰地分辨出这些元素。
11. Color Hunter
Color Hunter 是一个简单而实用的工具，你只需要上传你喜欢的图片，它就能帮你生成一套调色板。
12. TinEye
TinEye 允许你从Flickr 那超过2000万的 Creative Common 图片中提取色彩。你只需要选择一种色彩，滑动选取你想要的颜色，便能在搜索框中加入这个色彩对应的标签。
13. Pictaculous
Pictaculous是MailChimp推出的配色软件，它只有一个目的：从照片中获取配色方案。它的操作也极为直接：点击“browse”按钮选取图片文件，点击“GET MY PALETTE”按键得到色版。
14. Paletton [配色工具] ✨
Paletton 是一款和 Adobe Color CC 非常类似的工具，不同之处在于，它不再受限于5种配色，而是能够调用更多的色彩。
Paletton 可以用来为整个界面进行配色。你设定一个基色，然后通过它的一些选项和微调参数生成一套配色方案。除了Kuler的一些相同功能外，它还有个比较有意思的地方，它可以模拟色弱看到的颜色以及不同显示器参数下的颜色。另外还可以模拟一个按照这套配色方案生成的网页demo。
15. Colorspire
Colorspire 是一个三步式的配色搭配工具。你挑选出基本色之后，它会生成对应的配色方案，然后你就可以预览这套配色的应用效果了。
16. Hexu.al
Hexu.al 是一项有意思的服务，旨在为用户的留言添加色彩。当然它也能为图片和设计添加色彩。
17. Color Explorer
ColorExplorer 可能是目前功能最全面的在线配色工具之一。在它的帮助下，你可以创建、分析和自定义配色方案。更重要的是，它是完全免费的。
18. 0to255
0to255致力于帮你找到同一个色彩对应的深色和浅色，它可以帮你查找特定色彩的同色系的其他色。
19. ColorRotate
ColorRotate 是一款为平板而生的色彩编辑APP，它的3D取色系统让你可以完全掌控配色方案。
20. SpyColor.com
SpyColor.com 是一款完全免费的线上配色工具，它可以提供任何色彩的信息，包括它们在不同配色体系下的代码和值，比如 RGB、CMYK、HSL、HSV等等。同时，它还提供各种相关的配色方案，无论是对比色还是近似色，或者是三色、四色、五色等多种不同类型的配色。
21. Designspiration
在这个网站上，你可以生成最多5种不同色调的配色方案。然后，网站会将数据库中使用类似配色的图片都展示给你，供你参考。
22. Color Blender
Color Blender 是一款非常易用的配色工具，它能根据你所选取的一种颜色，生成一套6色的配色方案。
23. Colors on the Web
Colors on the Web 是基于色彩理论来帮你探索色彩在网页中的运用。使用其中内置的配色向导、色轮和对比度分析器三个工具搭配起来能够让你更好的配色。
24. ColorMunki
ColorMunki 也是一款帮你创建自己配色方案的工具，你可以借助它找到相似的色彩，并且正确的将他们搭配成配色方案。
25. Pantone
这一服务是为苹果用户所定制的，你可以借此探索色彩的世界，发现新的色彩，了解色彩之间的关系，如何协调地搭配等等。
26. ColorZilla
在Colorzilla的帮助下，你可以让你所浏览的页面更加多彩，这款插件可以快速取色并粘贴到其他程序中。此外，Colorzilla可以帮你放大正在查看的页面，测量页面上任意两点之间的距离。Colorzilla内置了调色板，一方面可以方便用户获取预设的色彩，也可以保存自己从网页中抓取的色彩。DOM Spying功能能帮你监测DOM元素的各种信息。
27. Color Hunt
Color Hunt 是一个为配色爱好者所准备的社交媒体频道。你可以在这里找到精心挑选的配色方案，还可以获得一些热门的随机配色方案运用在自己的设计项目当中。
28. Material UI Colors
Material UI Colors 为扁平化风格的设计提供了对比度良好的配色方案。
29. ColorDrop
只需要托拽，你就可以借助 Colordrop 轻松地调整UI元素的色彩。只需要安装一个Chrome插件，就可以帮你搞定这一切。
30. BrandColors
BrandColors搜集了世界上最受欢迎的品牌的官方配色的配色方案，可以说是相当有价值的配色参考。
31. ColorHexa ✨
类似 Paletton ，功能更简单，界面更清新
32. Webcolourdata [配色方案参考]
这个应用很简单，输入你喜爱的网站地址，它就能获取这个网站的配色方案。搜索栏下方成列了一些诸如Facebook、Google、Firefox等知名网站的配色方案。
33. UiGradients [渐变色]
这是一个托管在github上的开源项目。打开网站映入眼帘的就是一整个屏幕的双色渐变，而且颜色相当舒服。你可以通过左右切换来探索更多的搭配方案。细心的同学会发现有一个按钮能将所有这个应用收集列表中的美丽渐变色全部显示出来。同时你还能提交自己觉得出彩的渐变给他们。对于前端工程师来说，它还提供了一键获取渐变色CSS代码的功能。小而强大。
34. DraGGradients [渐变处理]
这个应用的界面和上面那款非常像，而且也都是处理渐变色的。不过区别在于这个应用可以让你自定义渐变，并且不止两个颜色。右侧的加号按钮可以新增颜色，然后移动画面当中的白色控制点然后移动渐变色。
35. Colours [随机颜色]
这个应用功能性不是很大，主要是每次随机罗列一套颜色，而且每个颜色上都标了css中对应的英语名字及Hex格式和Rgb格式的颜色码。也许在你没有灵感时，看看这个随机的列表会有所启发哦~另外，当你点击顶部色带中某个颜色，那么页面就会显示所有这个颜色的不同明度亮度等的衍生色。
36. ColorFavs
- 可以直接挑选官方推荐的色卡里喜欢的配色。
- 上传图片获取配色方案。
- 创建随机色卡。
37. okaybueno
从绘画作品中获取配色
38. Flatuicolors ✨
Flat UI Colors 2有13个颜色的调色板。与世界各地的13位设计师合作，共280种颜色可供您在下一个项目，设计，演示中使用。
39. Klart color
数据驱动的调色板集合
web模板
1. Reeoo
Reeoo可以根据配色筛选好的网站，其实不考虑色彩，Reeoo上已经都是顶级设计网站了，非常非常多牛逼设计师提供的顶级设计，让Designer们长期追捧。而按照颜色筛选这个功能，简直是让人欢喜到无以复加，真心的非常方便。
2. Straightline
一个日本的网页设计汇总网站，日本的隐忍的设计风格，的确让人欲罢不能，属于超级耐看型，比起中国的浮躁、花哨，世界的潮流、多变，日本的设计潮流一直是简约、大气，设计于无形中渗透到网站里，非常值得学习。
3. Inspired UI
Inspired UI有iPhone设计模式，又有Android设计模式，又有iPad设计模式，内容相对比较全面，但是APP更新不够快，不过也可以作为参考，也有分类切换的方式。
4. Mobile Pattern
APP设计收集网站
5. Lovely UI
又是一个设计模式收集网站，APP更新不够快，但是信息组织方式挺不错的。热门的标签全部都罗列在最上面，可以快速的切换筛选。
6. Envato
网站模板
设计理论