我们的设计师认真对待色彩，因为它是认真的。您选择的颜色不仅会影响您的网站给人的感觉，还会影响具有各种色盲类型的用户可以看到的内容。因此，明智地选择。

有各种各样的工具可以帮助我们完成重要的颜色选择任务。我们联系了数十位设计师（包括Webflow办公室的设计师），以了解他们使用的色彩工具和应用程序。看一看！

拾色器

拾色器是设计人员最常用的工具之一，因为它们可以让我们快速抓取和重用屏幕上看到的颜色。

1. ColorPick滴管Chrome扩展程序

ColorPick滴管是一款镀铬扩展件，非常适合任何设计师使用，它可以轻松使您识别将鼠标悬停在任何UI元素上的十六进制颜色代码。快速浏览在线浏览时获得灵感的颜色非常有用。

彩色吸管

ColorPick允许您查找任何元素的十六进制颜色代码

2. ColorSnapper 2

使用ColorSnapper 2

使用ColorSnapper 2的放大镜精确获取所需的阴影并将其保存以备后用。

在众多选择中，ColorSnapper被证明是我们设计师中最受欢迎的拾色器，这是有充分理由的。这款流行的Mac应用程序可让您在在线或离线状态下快速使用放大的拾色器。

选择颜色后，ColorSnapper会将其存储在颜色面板中供以后使用。需要立即复制颜色吗？只需单击存储的颜色，ColorSnapper就会自动将其复制到剪贴板。

3. Webflow Chrome扩展

Webflow的Chrome扩展程序启用了应用内颜色选择器

当然，如果我们不提及我们自己的Webflow Chrome扩展程序，那将会被我们遗忘，该扩展程序激活了Webflow内部颜色选择器，使Web设计人员可以轻松地从自己的项目中获取颜色。这使得从徽标，英雄照片或插图中提取正确的颜色变得非常简单，而无需离开应用程序。一旦掌握了颜色，就可以轻松地将其设置为全局色板，以在整个站点中快速轻松地重用。

方便吧？

配色方案和调色板生成器

调色板生成器为您提供了一种很好的方式来一起查看整个调色板。这可以帮助您确定原色和副色以及它们如何组合在一起。

实际上选择颜色可能很困难-幸运的是，有一些工具可以帮助我们做到这一点！

4.快乐的色调

由Mackenzie Child完全由Webflow创建，Happy Hues为您提供了各种灵感的调色板，并向您展示了这些颜色如何用于专业设计的真实示例。

麦肯齐儿童快乐的色调

Happy Hues既是帮助您找到适合您的设计的最佳颜色的绝妙资源，又可以帮助您学习色彩理论以创建出色的用户界面和体验。

5.颜色

调色板生成器

Color的色板生成器几乎与其名称一样直观，我们仍在努力了解其名称。您可以在浏览器中直接使用此生成器-因此，请尝试一下！

6.冷却器

使用冷却器创建调色板

<figcaption data-new-link="true" style="box-sizing: border-box; display: block; margin-top: 10px; text-align: center; color: rgb(51, 51, 51); font-size: 13px; line-height: 24px; letter-spacing: 0.1px; caption-side: bottom;">借助冷却器，可以轻松挑选和优化调色板。</figcaption>

Coolors 是另一种流行的调色板生成器。Coolors是另一种流行的调色板生成器。尽管（比）颜色（略）不那么直观（因此额外带o），但Coolors允许您在Adobe之类的工具中导出，存储和重用调色板。Coolors还具有一个移动应用程序，因此您可以在任何地方查看和修改颜色。

7. LOLColors

大声笑

LOLColors是策展的调色板的简单集合。该站点使“收藏”特定调色板变得非常容易，并且还可以根据其他人的投票查看最受欢迎的调色板。尽管它提供的音量不及该列表上的其他音量，但我发现调色板本身可以精美地组合在一起。

8. Brandmark的色轮

image

Brandmark的 色轮 使用AI自动为徽标，插图，线框和其他图形艺术着色。只需上传您的设计即可快速生成调色板。我们也喜欢此工具作为灵感来源。当您上传平面设计时，将为您提供数千种独特的颜色变化供您选择。

色彩灵感

由于CSS的进步，设计人员现在可以充分利用Web上的彩色渐变，而不必担心创建沉重的图像或编写复杂的代码。现在唯一的问题是试图缩小选择范围！

以下四个工具是我们指导调色板选择的首选工具。

9. Gradients.io

583347ca8f6c7ee0581121a9_image03.png

卢克·戴维斯（Luke Davies）与Gradients.io（一个简单的网站（由Webflow制作））结合了一个出色的解决方案，该网站展示了一些漂亮的渐变色组合。他友好地包含了十六进制值，因此您也可以在自己的设计中重新创建它们。

10. Adob​​e Capture CC

Adobe Color用户创建的调色板

有什么比我们周围的世界更好的获取色彩灵感的方法？Adobe的Color生态系统具有许多资源（包括样本生成器），但我发现自己使用最多的是其iOS应用程序Adobe Capture CC。

只需使用应用程序拍摄照片，它就会根据照片中的颜色自动生成调色板。然后，您可以保存这些颜色以在Photoshop项目或其他任何地方使用。

11.色彩意识

image

Colormind是一种调色板生成器，它使用深度学习从头开始或根据您的输入提出颜色建议。Colormind可以从照片，电影或其他可用作灵感的媒体资源中学习颜色样式，从而使其成为最聪明的调色板生成器之一-给我留下深刻的印象。

12.着色

image

通过Jxnblk开发，可着色很容易让使用他们的十六进制代码，网络和印刷设计人员测试了不同的颜色组合。该站点非常易于使用：只需将两种颜色的十六进制值相加，系统将根据WCAG可访问性准则对组合进行评分。此评级确保了色盲或视觉障碍的用户仍可以使用这两种颜色阅读设计。

该网站是我们当前的最爱之一-将可访问性放在其推荐的最前列。