10款优秀的免费在线配色工具,网页配色不再是难事!

作为网页设计师,我们最重要的选择之一就是颜色的选取。错误的配色可能毁掉作品,并且配色确实可以影响观众的心理。

比如,红色常被视为代表高能量的颜色,而蓝色代表清冷平静的感觉。如果你不相信,可以看一些儿童玩具网站,和律师事务所网站常用的颜色。通常情况下,前者是明亮且充满活力和色彩的,后者则以灰色和蓝色为主,突出了庄重之感。

colour tools for web designers - design, sharing - 10款优秀的免费在线配色工具,网页配色不再是难事!

但怎么知道哪些颜色的组合比较合适呢?幸运的是,为了配色你不必详尽了解颜色理论。为了帮助你更好地完成配色工作,这里为你介绍一些优秀的在线配色工具(在文末有一个专为Mac用户准备的工具)。

 

1.Adobe Color CC

68764518 - design, sharing - 10款优秀的免费在线配色工具,网页配色不再是难事!

https://color.adobe.com/create/color-wheel/?sdid=9J8K4JR6&mv=affiliate

免费配色工具Adobe Color CC已经上线有些时日了,它是最好的用调色板实现配色的工具之一。您不仅可以创建自己的配色方案,还可以查看别人创建的方案。

从色轮或图像中选取一种颜色,并选取一种规则来生成调色板,比如所选颜色的补色、明度或灰度。通过单击颜色并宣传色轮,可以自定义一组色板。所有生成的配色都可以保存到您的Adobe库中。

 

2.Colordot

23651896 - design, sharing - 10款优秀的免费在线配色工具,网页配色不再是难事!

https://color.hailpixel.com/

Colordot是一款Hailpixel旗下的优秀免费在线配色工具。使用简单的鼠标手势,就可以让你选择或保存颜色——在面板上移动你的鼠标可以调整颜色,上下移动鼠标可以改变饱和度,单击即可把当前颜色保存到调色板。点击Tog图标,可以查看图片的RGB、HSL或其他色值。

这款软件还有一款售价0.99美元的IOS平台的APP,允许您直接在相机内获取颜色。

 

3.147 Colors

16759157 - design, sharing - 10款优秀的免费在线配色工具,网页配色不再是难事!

http://www.colors.commutercreative.com/grid/

当你需要生成可读性较好的CSS时,有时候需要使用标准的颜色名称。而Brian Maier Jr创建的147 Colors,可以让您看到所有可用的颜色名称,您可以在其中选择。

它包含17个标准颜色,以及130个其他在CSS下可用的颜色名称,他们包括通过蓝色、绿色等颜色的混合。

 

4.Color Palette Generator

41567880 - design, sharing - 10款优秀的免费在线配色工具,网页配色不再是难事!

https://www.canva.com/color-palette/

如果你在寻找从图像提取颜色的配色工具,Canva是你完美的选择。你可以上传一个图像,工具可以返回包含五种主要颜色的调色板。

点击喜欢的颜色,即可复制它的HEX值。

 

5.Material Design Palette

37344843 - design, sharing - 10款优秀的免费在线配色工具,网页配色不再是难事!

https://www.materialpalette.com/

使用Material Design Palette,你可以选择两种颜色,然后将下载由他们转化的调色板,在下载前你可以预览他们。

通过这款工具,设计人员还可以调用同一颜色的不同色调及对应的HEX值。

 

6.ColourCode

56538715 - design, sharing - 10款优秀的免费在线配色工具,网页配色不再是难事!

http://www.colourco.de/

Tamino Martinius和Andreas Storm旗下的ColourCode和Colordot相似,但它功能更强大。使用ColourCode,可以沿着色轮,用不同的选项来创建各种颜色组合。

你可以保存颜色组合,或将其导出为SCSS或LESS格式。如果你愿意,甚至可以导出PNG格式。

 

7.Color Calculator

77471578 - design, sharing - 10款优秀的免费在线配色工具,网页配色不再是难事!

https://www.sessions.edu/color-calculator/

Color Calculator是一款很直观的工具:你需要选择一个颜色,以及颜色相关选项,即可计算得到一组配色方案。

这个网站还会为你提供一些颜色理论的细节,告诉你得到的颜色是如何计算出来的。

 

8.HTML Color Code

79126868 - design, sharing - 10款优秀的免费在线配色工具,网页配色不再是难事!

http://htmlcolorcodes.com/

Dixon和Moe提供的免费颜色工具,包括一个规则多样的颜色选择器,一系列标有平面常用色号的颜色表,Google的材料设计方案,以及网页安全颜色调色板。

该网站还为网页设计师们提供教程和其他资源,以及直接导出配色为HEX码、HTML、CSS和SCSS的功能。

 

9.W3Schools: Colors Tutorial

1318022 - design, sharing - 10款优秀的免费在线配色工具,网页配色不再是难事!

https://www.w3schools.com/colors/default.asp

如果你正在寻找一个包含配色指南的一体化解决方案,以及多种工具,W3Schools就是你完美的选择。

你不仅可以了解色轮和色彩理论,还可以用颜色转换器等在线工具,使用这种工具可以将任何颜色转化成名称、HEX值、RGB、HSL、HWB和CMYK值。

 

10.Digital Color Meter (Mac)

990505 - design, sharing - 10款优秀的免费在线配色工具,网页配色不再是难事!

Mac用户可以选择这款内置的Digital Color Meter工具,它可以从屏幕上任何一处抓取颜色,然后10进制、16进制或百分比形式获取它的色值。

此外,你可以直接将颜色复制,并黏贴为文本或图像。

 
本文被收录于配色理论大型综合攻略

 

文章来源:CreativeBloq

原标题:The best colour tools for web designers

原作者:Tammy Coron

翻译:卡米雷特

微信打赏支付宝打赏

感谢您的支持!

文章来源:卡米雷特的小站www.kamilet.cn)转载请注明出处。

卡米雷特

视觉控&技术控,不断学习中!


您可能还喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注