设计师都爱用！51 个免费配色工具推荐：配色参考、技巧及灵感
不管是做什么样的设计，颜色美学都一直占很的大的比重。颜色不仅可以传达不同的含义，不同的配色甚至可以带给你不一样的心理感受。但身为初学者要在短时间内掌握配色的技巧哪有那么容易？因此，我们想分享在设计界中超好用的配色、选色和调色网站，而且还通通都免费。
无论你是设计专业人士、没基础的学生都适合，使用这些工具不需了解色彩理论的确切来龙去脉，就可以轻松掌握颜色并帮助你：
- 检查网站上的颜色可视性、对比度
- 快速找到颜色色票、名称、色码
- 为设计带来新的配色灵感并训练色彩敏感度
设计师们都离不开的色彩工具推荐49 种
Eagle App – 用颜色管理设计＆灵感档案
https://www.zhihu.com/video/1664168527945830400
想用颜色来分类你的设计档案吗？没问题！交给Eagle 就可以了！Eagle是一款专门为设计师开发的素材管理工具，不管是图片、影片、logo档案、photoshop的设计档案，都可以直接无痛预览，并且帮你自动建立色票，让设计工作变得更直觉！
Eagle 不仅有强大的颜色筛选功能，还有许多筛选器类别，例如：档案大小、长宽高、评分等功能，帮你将档案轻松分类！不用再烦恼档案永远找不到啦！
官网：tw.eagle.cool
1. Adobe Color
图片来源：Adobe Color
Adobe Color 是一个Web 应用程式和创意社群平台，你可以在这建立你喜欢的颜色并与其他设计师分享颜色灵感。如果你也使用Adobe 家族的产品，则可以将颜色色票储存到Adobe Creative Cloud Libraries 中，随时与产品搭配使用，如Adobe Photoshop、Illustrator 和Photoshop 中使用。
价格：免费
2. Coolors
图片来源：Coolors
Coolors 是新增和收集调色盘的必备工具！它可以帮助你在几秒钟内产出完美对应的颜色。即使你在设计方面不是那么熟练，只要按下空白键即可生成随机调色盘，若你想要从一张照片中生成照片颜色调色盘，只要上传它就能生出一个专属于照片的调色盘！
Coolors 上还有许多颜色小工具，包括RGB、CMYK、LAB、HSB 和几个流行的颜色库，如Pantone、Copic、Prismacolor 等，非常丰富等你来探索！
支援平台： Website、iOS app、Adobe 外挂、 Chrome 扩充
价格：
- 网页版和 Chrome 扩充 免费
- iOS app： USD $2.99
- Adobe 扩充：USD $3.49
3. Colors
图片来源：Colors
Colors 是一款免费且简单的颜色工具。借助色彩的不同功能，如色彩调和、色彩细节、色彩混色器、色调等，像是互补色、类比色、三色色、分裂互补色、四色和方形搭配，产生统一和谐的效果！
价格：免费
4. Color Hunt
图片来源：Color Hunt
Color Hunt 是由Gal Shir 以色列设计师建立的美丽调色盘的整理。你可以随机浏览数千种调色盘，建立和搜集最喜欢的调色盘，甚至可以提交你配出来的调色盘颜色供所有设计师使用，团队每天都会审核提交新的配色，如果被挑上的话，隔天就会出现在首页给全世界的设计师当作配色参考。
支援平台：网页版及Chrome 扩充
价格：免费
5. Color Parrot
图片来源：Color Parrot
想像你拥有一只会说话的鹦鹉指引你认识色彩的世界， Color Parrot 是Twitter 上的机器人，只要推文给他的帐号@color_parrot并附上一张图片，这只鹦鹉就会告诉你图片上的颜色名称并识别图片上的颜色代码，超方便！
价格：免费，喜欢的话欢迎赞助
6. BrandColors
图片来源：Brand Color
BrandColors 由DesignBombs 所建立的，目标是将最常见的品牌颜色代码整理成一个完整的配色参考资源。这个网站是世界上最大的官方品牌颜色代码集合，如果你需要特定品牌的颜色色票，千万别错过这里！
价格：免费
7. Dopely Colors
图片来源：Dopely Colors
无论是调色盘生成器、渐变颜色生成器、调色剂、混色器还是颜色吸取器……等等，在Dopely Colors 你都可以在这里找到符合的配色功能，简单来说是一个超实用的颜色工具箱。
价格：免费
8. ColorDrop
图片来源： ColorDrop
ColorDrop 是一款直观好上手的配色参考工具，可以帮助你生成你喜欢的颜色调色盘、扫描图片颜色生成、查询扁平颜色色号以及颜色代码转换器和颜色渐变编辑器，还可以将页面主题更改为深色模式或不同的颜色，以检查颜色是否与你的设计相呼应！
价格：免费
9. Khroma
图片来源：Khroma
Khroma 使用AI 来了解你喜欢的颜色，并新增无限的调色盘供你探索、搜寻和储存。要开始让AI 挑出你的喜好，你必须选择你最喜欢的50 种颜色，接着AI 会根据你的选择生成你的个人化调色盘，接着你可以将客制化出来的颜色进行排版、渐变等，蛮有趣的！
价格：免费
10. Mesh
图片来源：Mesh
你喜欢在你的作品中加入一些渐变设计吗？Mesh 是一种使用WebGL 着色器建立出漂亮渐变的工具。单击网页上的任意位置以添加一个点并拖动以创造出属于你独一无二的渐变效果。
价格：免费
11. Colors
图片来源：Colors
Colors 是来自Klart 书签工具的调色盘集合及配色整理。如果你突然缺乏灵感，可以随机选择并找到不同的调色盘、配色参考及颜色色票想法喔！
价格：免费
12. Culr
图片来源： Culr
还在脑力激荡吗？落伍了啦！Culr 是一个调色盘整理库，可帮助你整理颜色，帮助你查看是否适合你的设计作品。如果你对色彩理论一无所知，它甚至会在一一的指导你，让你无脑就配出适合的颜色！
价格：免费
13. Color Lisa
图片来源：Color Lisa
你有没有想过艺术家的颜色代表是什么？Color Lisa 将世界上最伟大艺术家的杰作制作出一个调色盘列表。每个调色盘都是由痴迷于色彩的设计师、艺术家、博物馆馆长和色彩理论大师精心配出来的颜色。不论是知名画作蒙娜丽莎的微笑的配色或是亚维农的少女配色，只要是你想得到的作品，这里通通都找得到！
价格：免费
14. Color Designer
图片来源：Color Designer
Color Designer 是一款免费工具，除了帮助你建立调色盘还可据调色盘建立出色调和阴影。你只需挑选一种你喜欢的颜色，其余的由内建的功能帮你完成。你可以使用预选颜色或颜色选择器进行更多配色调整。
支援平台： Web, Figma addon, Adobe XD addon
价格：免费
15. Pigment by ShapeFactory
图片来源：Pigment
Pigment 是Shape Factory 制作的一款工具，可以让你使用亮度和饱和度探索各种不同颜色，只需调整左侧的设定即可找到全新的颜色。Shape Factory 也有推出其他颜色小工具，如：渐变工具，可以帮助你轻松建立漂亮的彩色渐变，还有一个双色调工具可以帮助你在几秒钟内将图片转换为双色调。
价格：免费
16. Color Leap
图片来源：Color Leap
你想像过历史是什么颜色吗？Color Leap 拥有180 种不同调色盘，展示了12 个从古到今不同历史时期所代表的颜色，如公元前、文艺复兴、二战…等，总共覆蓋4000 年。每个调色盘都是透过对那个时期的艺术品进行采样而建立的。每种颜色都可以透过单击复制并在你自己的设计中使用喔！
价格：免费
17. Picular
图片来源：Picular
你有没有想过海洋是什么颜色的色票？冰冻的天空或薄荷冰淇淋可以用哪个颜色代码代表？Picular 是一个平台，帮助你分类东西及物品的颜色。就像一本色彩字典一样，只要输入特定的文字，它会生成与文字相匹配的调色盘！
价格：免费
18. Sip
图片来源：Sip
Sip 是一款专为设计师和开发人员打造的颜色筛选器，可让你在Mac 系统上收集、整理和编辑颜色。它甚至可以与其他的绘画软体搭配一起使用，共用颜色调色盘及色票。其中他的智慧格式功能最推荐，它会自动检测你正在使用的软体，然后相应地为你更改成那个系统使用的相似颜色格式或代码，如果你使用的是Mac 且每天工作流程都需要使用到颜色，那你一定要试试看这个好用的工具！
支援平台： Mac
价格：免费试用15 天，试用期后USD $10 一个装置，支援一年更新。
19. Color Kit
图片来源：Color Kit
Color Kit 是一个提供颜色混合、颜色深浅和色调功能的网站。透过混合两种颜色之间的阴影来生成色票。
若想要颜色混合，输入开始和结束颜色，然后选择混合数量，就会显示出阶梯渐变。若想要阴影和色调，输入基底色，然后选择数量，就会生成一组以黑色及白色为基准的混合。生成出来的颜色可以下载URL 或SVG 格式未来放入你的设计之中。
价格：免费
20. Muzli Colors
图片来源：Muzli colors
Muzli Color 是由Muzli 团队制作的调色盘生成器。你可以输入颜色代码、颜色名称或图片以生成调色盘来激发灵感。目前，它还可根据你的调色盘上的颜色展示Live UI 的功能，可以直接查看颜色在不同图表或介面上的实际外观。
价格：免费
21. Nipponcolors
图片来源：Nipponcolors
你喜欢日式设计甚至颜色吗？在这个网站上，有许多传统的日本颜色，每种颜色都有一个独特而美丽的名字。它还提供了孟塞尔颜色系统视图（Munsell Color System），透过明度、色相及彩度三个维度来描述颜色的方法来呈现颜色的维度，非常令人印象深刻！
价格：免费
22. Color Contrast Checker
图片来源：Color Contrast Checker
这个工具提供的功能就跟他的网站名称一样，它是一个颜色对比度检查器，它可以帮助你在文字与背景之间设计出足够的对比度，以便视力低下的人可以阅读。该网站是根据WCAG 2.0 AA 级建立的，符合普通文字4.5 和大文字3 的对比度要求，若是你不知道对比是什么那也没关系，用这个网站来测试绝对不会错。
价格：免费
23. Eva Design System
图片来源：Eva Design System
跟其他的颜色生成器不一样，Eva Design System 是一个深度颜色生成器，它可以根据你选定的原色建立出4 种新的语义化颜色，也就是帮你分类不同情境可以使用的颜色，如：成功讯息、一般资讯、警告讯息和危险讯息颜色。你还可以锁定颜色以避免在选择不同的原色时，生成出不符合你要的结果。它支援JPEG、JSON、Nebular Theme、UI Kitten 汇出，是一款受到很多设计师喜爱的免费配色参考工具。
价格：免费
24. ColorBox
图片来源：Colorbox
ColorBox 不仅提供色相和色调功能，任何有关颜色的身家调查你都可以透过它查询，还可以自定想要的资讯，包括对比色和比率。使用ColorBox，你可以将生成的颜色组合快速汇入Figma 或使用JSON 汇出。
支援平台： Website, Figma plugin
价格：免费
25. Leonardo
图片来源：Leonardo
Leonardo 是一个对比度颜色生成器，它可以帮助设计师为他们的UI 建立颜色。根据所需的对比度生成颜色，并且可以非常容易的透过URL 与团队成员共享。它还提供了许多不同的图表和模型供你分析作品成果会长什么样子，非常周到！
价格：免费
26. whocanuse
图片来源：whocanuse
在检查网站或是设计作品时，是否希望有一本手册来精准地告诉你所选颜色是否符合WCAG 的标准？或是还差多少符合标准？那你一定要试试看whocanuse，载有不用担心有一天视觉疲劳怎么办了，它会清楚的告诉你应该改进和调整的部分。
价格：免费
27. Palettte
图片来源：Palettte
是不是常常觉得整个作品都设计完成了，但还差一点什么？有时你可能需要的就是将UI 变化一点色调就可以画龙点睛。Palette 是一个很棒的工具，可帮助你分析现有调色盘并将其编辑调整为一组新的调色盘，它提供色调微调、渐变、饱和度等功能。只需简单地汇入你的颜色，它就可以发现错误或自动从新调色板中帮你调整成适合你的设计，然后快速汇出到你的设计中。
价格：免费
28. Contrast
图片来源：Contrast
Contrast 是一款免费的macOS 应用程式，可用于快速检查WCAG 颜色对比度，它的浮动视窗能够让你在边使用设计软体时一起使用，只需手动输入色码或使用内建颜色吸取器直接从设计中采样颜色看有没有符合WCAG 标准。
价格：免费
29. Color Tool by Material Design
图片来源：Color Tool
Color Tools 为你提供了一个快速建立、共用调色盘、将颜色应用到UI 以及检测颜色组合可视性的工具。从调色盘中选择一种颜色（或自定颜色）就以轻松查看它在UI 中的成果。
价格：免费
30. CSS Gradient
图片来源：CSS Gradient
CSS Gradient 主要是一个帮网站新增渐变背景的工具。除了作为css 渐变生成器之外，网站还有许多关于渐变的丰富内容，从技术文章到现实生活中的渐变参考案例，如Stripe 和Instagram，如果你想要找渐变灵感，到这里就对啦！
价格：免费
31. Gradienta
图片来源：Gradienta
Gradienta 提供多色渐变和纯CSS 程式码、SVG 和JPG 下载。它还带有渐变编辑器，可让你建立不同的渐变图案，若是想要找特别的渐变样式，那这里会是你需要的配色参考灵感！
价格：免费
32. Eggradients
图片来源：Eggradients
你是否正在寻找某些颜色的替代色调？或适合背景的渐变？Eggradients 除了网站上著名的蛋状造型以外，还可以找到有趣又实用的颜色工具，例如：随机颜色生成器、蛋形渐变背景颜色、免费背景资源、免费知识电子书、免费工具等。
价格：免费
33. Happy Hues
图片来源：Happy Hues
不确定在设计中要使用什么颜色或在哪里使用正确的配色？那请先将你要使用的颜色，拿到Happy Hues 上试试看吧！它还提供了一个颜色词典，可以帮助你识别颜色的氛围和情绪，以便你将符合的感觉带给观众！
价格：免费
34. Duo
图片来源：Duo
想找新的色彩组合ideas 吗？Duo 是Alex Pate 英国设计师本身在网路上搜集及自己工作时遇到的有趣颜色组合集合， 当你缺乏灵感时到这里也许可以激发你不同关于配色参考想像喔！
价格：免费
35. Shade Generator
图片来源：Shade Generator
如何为你的设计新增对比色效果？当你要调色时，白色或黑色部分如果没有配好，将会形成不适合的色调或阴影，这时候要修复可能不是使用退回键这么简单。如果你有这样的问题的话，那就用这个工具修复它吧！
价格：免费
36. Color Picker
图片来源：Color Picker
寻找完美的颜色从来都不是简单事，使用Color Picker 可以快速浏览数百万种颜色和颜色调和。你还可以找到从RGB 到HEX 色码转换器、颜色图表、颜色名称甚至颜色资源库和一些颜色课程的资源！
价格：免费
37. Paletton
图片来源：Paletton
你心中是否已经想好一个主要颜色了，但只是不知道哪种颜色能帮助作品更上一层楼？在Paletton 的色轮帮助下，你可以轻松找到你需要的配色参考并且同时符合色彩学的标准。Paletton 不仅仅是一个专业工具，它的色轮可以运用在不同地方，例如设计作品、居家配色、装潢色调等都可以派上用场。你只要选择一个基本颜色就可以开始探索！
价格：免费
38. Color Safe
图片来源：Color Safe
想要根据WCAG 标准配出适合的颜色吗？你可以在此处设定字体、颜色、文字和比例，让使用者无论视觉能力和萤幕解析度如何都可以阅读内容！
价格：免费
39. Color Review
图片来源：Color Review
在Color Review 可以确保你挑的颜色都符合WCAG 标准的颜色，把你的颜色输入看看是否通过AA 级或AAA 级评分。
价格：免费
40. DeGraeve
图片来源：DeGraeve
想要知道照片上的颜色，获得与图片对应的调色盘，只需要将你的照片URL 输入，就可以马上帮妳生成结果！这个网站上还有其他很酷的工具，例如logo 制作工具、网站图示生成器、名片生成器等。
价格：免费
41. Color Space
图片来源：Color Space
输入颜色到Color Space 以查询对应的颜色、生成漂亮的调色盘、渐变、3 色颜色渐变并了解有关颜色的更多资讯。如果你是Android 使用者，他们也将推出与颜色有关的程式供你在手机上使用！
价格：免费
42. Get Stark
图片来源：Get Stark
Get Stark 是一个帮助设计师工作流程的扩充和附加工具。从对比度检查器、智慧颜色建议、视觉模拟、视觉生成器等。它甚至支援Figma 最新推出的FigJam 团队协作工具呢！
支援平台： Figma、Sketch、Adobe XD 和Google Chrome
价格：
- Basic：免费
- Pro：USD $6/月
- Team：请联系业务获取报价
价格：免费
43. COLOURLovers
图片来源：Colour Lovers
COLOURLovers 是一个为热爱设计图案和色彩的人而设的社群。你可以在这里发现调色盘、色票、配色参考、图案等来激发创意。在你甚至可以找到与成千上万颜色的爱好者，不妨交流一下吧！
价格：免费
44. uicolors
图片来源：UI Colors
想要看颜色放到网站背景会是长什么样子？Uicolors 允许你选择一种颜色作为介面背景色，特色是能够快速找你要的效果。
价格：免费
45. Stylify Me
图片来源：Stylify Me
有没有想过你最喜欢的网站上的颜色是什么？只需在Stylify Me 上插入URL，就可以发现你最喜欢的网站中使用的所有背景颜色、文字颜色和排版。
价格：免费
46. TinEye- Multicolr
图片来源：TinEye
想要使用颜色找出图片吗？这个网站使用multicolorengine 也就是一个根据图片常见的颜色找图片的API，将Flickr 上的2000 万张图片中做颜色分类，使图片可以按颜色搜寻。你只需选择一种颜色并调整颜色的细节和标签即可找到所需的图片结果。
价格：免费
47. Designspiration
图片来源：Designspiration
Designspiration 是一个蛮著名的设计师和创意专业人士寻找不同设计灵感的网站，最特别的是他的搜寻功能，'你可以输入颜色查询图片，也可以登入会员新增自己的设计灵感并与上面的社群分享喔！
价格：免费
48. FLAT UI COLOR 2
图片来源：Flat UI Colors 2
Flat UI Colors 2 拥有13 个以上的调色盘，与13 位来自世界各国不同的设计师合作而建立出来的颜色，总共有280 种颜色可供复制/ 贴上使用。此外，点击网站名称可以发现一个可爱的惊喜喔！（需开声音）
价格：免费
49. 网页设计常用色彩搭配表《配色表》
图像来源：网页设计常用色彩搭配表《配色表》
这一个配色表是少数中文的配色网站，界面非常简单直观。网站中你可以看到他使用两个不同皮肤分类：色相及印象形容词，点选类别皮肤下的词可以看到相匹配的色彩。若你想出了形容词但对颜色没灵感，就到这来找答案吧！
价格： 免费
50. 365传统色
图像来源： 365 传统色
365 传统色是一款移动跟 iPad App，也是少数以中文为主的配色进程。它以华色、和色、洋色和原色四种传统色为基础，兼具名言短句赏析和日历的应用。应用集合了中国传统色、日本传统色、世界传统色和 Web 色上千种颜色，帮助你在一年 365 天都可以欣赏到不一样的颜色。同时，为了满足增添更多乐趣，在欣赏传统色时，还推荐一段名言短句！
支持平台： iPadOS、iOS 及 MacOS 11.0 以上的 M1 晶片计算机
价格：¥1
51. 色采 – 配色助手 色卡工坊
图像来源：色采
这是一款配色 APP，无论你是配色初学者，还是专业设计师都能通过软件内提供的多种配色方式，寻找配色灵感，并轻松搭配出好色彩。比较特别的是他支持 iPad 功能，也可以搭配绘图软件一起使用，在屏幕上做分屏、浮屏、横竖屏实时切换，超多设计师爱用，先从他的免费版本试试看吧！
支持平台： iPadOS、iOS 及 MacOS 11.0 以上的 M1 晶片计算机
价格：
- 免费会员，功能较少
- 高级会员：¥12.00/月缴，¥68.00/年缴
结语
有超多很棒的配色网站适用于不同的设计工作流程，上面介绍的工具或推荐网站哪些是身为设计师的你必备的呢？欢迎分享让我们知道！
如果你正在寻找一种使用使用颜色来整理所有设计档案的方法，那么强大的颜色整理工具Eagle 你千万不能错过！Eagle 会自动检测你设计档案中的所有颜色，并生成相对应的色票，你可以轻松的进行标签、评分、资料夹分类，是身为设计师必备的档案管理神器！更不用说复制每个图片上的颜色色码有多容易，快来试试看吧！
https://www.zhihu.com/video/1664396916690214912
除此之外，Eagle 部落格更提供你好用的设计资源、资讯懒人包，让你成为更好的设计专业工作者！如果你还是觉得缺乏灵感或创作动力，欢迎到Eagle 设计资源社区走走，这里有着数以万计的设计师分享好用工具与灵感网站，Eagle 就是要帮助你在设计之路上更省力！
这篇文章对你有帮助吗？分享给朋友
上一篇