跳到主要内容

适用于网页设计师的最佳色彩工具

Heaps of brightly coloured powder

作为网页设计师,我们做出的最重要的选择之一与我们的颜色选择有关。选择错误的,你可能会失去机会。这是真的 - 我们选择的颜色会对那些观看它们的人产生心理影响。

例如,红色通常被视为高能量颜色,而蓝色则意味着平静和平静。为了说明这一点,请考虑您在销售儿童玩具的网站上使用的颜色与律师事务所的网站。机会是,你会为前者带来明亮鲜艳的色彩,而后者则是蓝色和灰色的柔和色调。

但是,您如何知道哪种颜色可以很好地协同工作?幸运的是,你不必成为一名高手色彩理论组合一个可行的调色板。为了帮助您完成颜色选择的重要任务,这里有一些最好的免费颜色网页设计工具(对于Mac用户,最后加一个特殊奖励)。

01. HueSnap

hue snap colour tool

随时随地捕捉灵感并将其变成调色板

灵感可以随时发生。它可能是一个酒店房间的装饰或一个晚上公园的灯光,为您的下一个网站配色方案激发灵感。当发生这种情况时,HueSnap会随时为您提供帮助。您可以拍摄照片并使用HueSnap从图像中提取颜色并将其制作成调色板。

该应用程序专为移动使用而量身定制,您可以与他人保存和共享您的调色板。有许多功能可以帮助您修改调色板,例如选择补色和复合颜色的选项,您的调色板每个最多可以有六种颜色。

02. Khroma

khroma colour tools

Khroma使用AI来建议您喜欢的颜色

Khroma是一种AI颜色工具,旨在帮助您轻松浏览和比较原始颜色组合。通过它,用户可以训练AI算法,就像他们大脑的延伸一样。用户首先选择他们喜欢的50种颜色,这些颜色用于训练可识别数十万种其他类似颜色的神经网络。了解有关Khroma的更多信息以及如何在此处使用它

03. Coolors.co

Laptop, desktop and mobile screens displaying colour palettes

探索部分包括数百个(如果不是数千个)调色板选项

Coolors提供各种工具,可根据您的需要调整调色板。此外,您可以以多种不同的格式导出最终创作,以便您可以在任何地方使用它。

Coolors不仅仅是一个创建调色板的工具,它还允许您查看其他用户的其他完成的创作,以便您可以汲取灵感。探索部分有数百个(如果不是数千个)调色板,您可以自己查看,保存和编辑。更好的是,Coolors可以在桌面计算机上使用,也可以作为iOS应用程序,Adobe Photoshop和Illustrator插件使用 - 甚至可以通过Google Chrome扩展程序轻松访问。

04. Adobe Color CC

Colour wheel selection screen with adjustment tools

这已经有一段时间了,但仍然非常有用

免费工具Adobe Color CC已经存在了一段时间,它是选择调色板的最佳颜色工具之一。您不仅可以创建自己的配色方案,还可以浏览其他人创建的配色方案。

从滚轮或图像中选择颜色并应用颜色规则,例如仅使用补色,单色或所选颜色的阴影,以生成调色板。或者,单击每种颜色并浏览色轮以自定义选择。另外,您可以将创建的主题保存到Adobe库中。

05. Colordot

Bars of colours with reference numbers

使用简单的鼠标手势来构建调色板

Colordot by Hailpixel是一款出色的免费在线工具,用于创建调色板。使用简单的鼠标手势,您可以选择并保存颜色。前后移动鼠标以获得色调;上下轻盈;滚动饱和度并单击以将颜色保存到调色板。单击tog图标以查看每种颜色的RGB和HSL值。它还有0.99美元/0.99英镑IOS应用这使您可以使用相机捕捉颜色。

06. Eggradients

eggradients screen shot

渐变的灵感和发人深省的名字

Eggradients提供了在您的设计作品中使用的美丽渐变的想法,由一个既有色彩的眼睛和有趣的幽默感的人组合在一起。每个渐变,以蛋形显示,都有自己的发人深省的名字。例如“浅蓝色的沃兹尼亚克破碎的心”和黄色到绿色过渡的“仁慈的敌人”。

07. 147种颜色

Grid of multicoloured swatches

这个免费工具包括标准的CSS颜色

当你负责生成时易于阅读的CSS,有时使用标准颜色和颜色名称是要走的路。感谢Brian Maier Jr的147色,您可以一瞥所有这些,并选择适合您的那些。

它包含17种标准颜色,以及130种其他CSS颜色名称。按蓝色,绿色等阴影过滤结果,或从147种颜色的完整彩虹中选择。

08. Canva调色板生成器

Canvas tool colour selection screen

根据图像创建调色板

如果您想要根据特定图像创建调色板,Canva的调色板生成器是完美的。虽然其他工具提供类似的选项,但Canva的使用非常简单:上传图像,生成器将返回其中包含的五种主要颜色的调色板。您可以单击您喜欢的颜色并将HEX值复制到剪贴板。

不幸的是,这就是Canva产品的实用性结束的地方,因为这是你可以用它的调色板生成器做的全部 - 你无法调整调色板的颜色。您拥有的唯一其他选项是复制提供的十六进制值或上传另一张照片。

09. 材料设计调色板

Material Design Palette selection screen

根据Google的Material Design原则创建调色板

使用Material Design Palette,您可以选择两种颜色,然后将其转换为全色调色板供您下载,并附带预览。

该公司还提供材料设计颜色,使设计师能够看到颜色的不同色调,以及相应的HEX值。

10. ColourCode

Bars of colours with HEX values

将调色板保存并导出为SCSS,LESS或PNG文件

Tamino Martinius和Andreas Storm的ColourCode与Colordot类似,但它提供了更多的指导。这个免费工具直接击中你的面部,展示一个背景,通过光标移动改变颜色。除此之外,该工具还为调色板提供了不同的类别(模拟,三重,四边形,单色,单色光等)。

使用ColourCode,您可以沿着色轮设置不同的选项以创建原始组合。您还可以保存调色板或将其导出为SCSS或LESS文件。如果您愿意,甚至可以导出到PNG。

11. 颜色计算器

Colour Calculator instruction screen

选择颜色和颜色和谐,此工具将生成调色板

颜色计算器非常简单:您可以选择颜色和颜色和谐选项。作为回报,您将获得推荐配色方案的结果。

然而,这个网站的好处在于它还会详细介绍颜色理论及其与颜色选择的关系。

12. HTML颜色代码

HTML Color Code download screen

这套工具包括标准颜色名称列表

Dixon&Moe提供的这套免费工具包括一个深入的颜色选择器,有大量的颜色规则解释;一系列采用平面设计色彩的彩色图表,Google的Material设计方案和经典的网页安全色调;以及标准HTML颜色名称和代码的列表。

该站点还为Web设计人员提供教程和其他资源,以及从其工具导出结果的选项,如HEX代码,HTML,CSS和SCSS样式。

13. W3Schools:颜色教程

Colors Tutorial naming examples screen

这个免费的教程包括许多方便的颜色工具的链接

如果您正在寻找包含颜色指南的一体化解决方案,以及许多不同的工具,那么W3Schools的Colors Tutorial是您的最佳选择。

您不仅可以了解颜色理论,色轮和色调,还可以使用其他工具,例如彩色转换器。使用此工具,您可以将任何颜色转换为名称,HEX代码,RGB,HSL,HWB和CMYK值。

14. 数字色度计(Mac)

Example of Digital Color Meter in action

Mac的内置工具可让您从屏幕上抓取颜色

好的,Mac用户......这个适合你。使用您机器的内置数字色度计工具,您可以从屏幕上的任何位置“抓取”颜色,然后将该颜色的值作为十进制,十六进制或百分比。此外,您甚至可以将所选颜色“复制”为文本或图像。

阅读更多:



翻译字数超限