整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

配色小白必看!这四个超经典的在线色彩网站,每个都好用到爆

果你是配色小白,那么这篇文章真的对你超级有用!当然了,如果你对颜色的搭配有点研究的话,这篇文章也是对你会有不少帮助的!

这里直接分享四个超级好用的在线色彩搭配网站,每一个都是提高你工作效率的绝对利器!

第一个网站:Designspiration

这个网站简直太好用了!其中有着超级强大的颜色搜索功能,这是区别其他设计网站的一个很好用的特色!网站的页面也很有设计性,同时也做到了简约干净:

这里我们看一下这个颜色搜索功能,在网站的右侧会有一个调色板,我们只需要在这里替换成你需要的颜色搭配,那么就能检索以这种配色为主的所有灵感设计参考了:

比如我们选择这几种颜色,然后网站就会根据我们选择的配色,给你生成一些参考:

除了根据色彩搭配来筛选,我们还可以点进任意一个设计作品,详细页面也会有一个简单的色环和色卡,这个时候我们就可以使用PPT中的取色器进行取色了:

如果我们还需要这种色环的配色,还可以点击这里的小色环,还能继续得到类似的配色参考:


第二个网站:Alwane

这个网站简单的来说是一个可以提取网页配色的神器!如果你浏览到一个很有设计感的网站,想要复制别人的配色,这时候该怎么办呢?所以,这里就介绍一款网页色彩提取工具:

你只需要在这个网站的左上角输入栏中添加想要提取颜色的网址,预设情况下会从HTML和CSS样式表单获取颜色搭配:

然后你可以从提取的颜色中看到颜色的具体数值,包括颜色的预览、色码等信息:

当然了,当你切换成程序代码的模式后,这些颜色的CSS代码也会标注出来:

要是想保持网站的配色信息,直接点击网站右上角的Generate即可:



第三个网站:Adobe官方配色网站Adobe color

这个网站相信很多人都知道吧?如果不知道的话,在这里我也简单介绍一下,这是Adobe官方推出的一个配色网站:

当我们在做设计的时候,如果想做一些渐变色的设计,这个网站真的超级好用!在中间的色款中输入色值,然后网站会自动生成颜色搭配,

然后这些颜色做成渐变后,效果相当不错:

要是你觉得颜色跨度不够大,还可以手动拖拽色轮上的控点进行调整,渐变色依旧能做的很出彩:

不仅仅是生成邻近色,你在网站的左侧选择不同的套用颜色调和规则,中间的色轮会自动生成不同的配色方案!

比如你选择单色,这时候的色卡中的颜色就以单色为规则进行搭配。直接保存页面右上角的色卡就能进行取色:

还有三元群、辅色、分割辅色等等:



第四个网站:Coolors

这个网站是在太强大了,而且网页的设计十分的简洁干净,而且每一组的配色都超级经典好看!

你只需要打开这个网站,在页面通过空格键随机生成色卡,每一组的配色都相当不错:

图源网络

而且这里还会给很详细的颜色信息,包括颜色的名称、色调、色温、配色建议、色彩和谐度等等!最重要的这个网站出了app版本,大家可以尝试在手机上下载对应的app进行配色的参考:

这四个网站看完后,是不是觉得很实用呢?

这些配色网站网址链接我给你整理好了,关注我+回复(关键词:配色网站)就可获取!

#ppt# #职场达人炼成记# #神器#

的配色网站,可以给到设计师们更好地创作灵感。今天这个合集,主要为大家推荐一些好用的配色网站。

免费白嫖的素材管理工具安利:Billfish!

Billfish素材管理工具


1、materialpalette

传送门:http://www.materialpalette.com/

Material Palette是一款提供线上颜色组合配色工具,它的用法很简单,你只要找出想要搭配的两种颜色,它就会显示出两种颜色搭配在一起的效果预览,并提供你较深或较浅的颜色选项,以及其他你可能会用到的颜色代码。

2、flatuicolorpicker

传送门:http://www.flatuicolorpicker.com/

FlatUIColorPicker提供最好的扁平化UI设计配色方案,快速方便的颜色选取工具,右上角有多种主色可供选择。一个超好用的配色网站,轻松触发你的配色灵感。

3、flatuicolors

传送门:http://flatuicolors.com/

4、FlatUIColors是一个扁平化设计配色网站,可以吸取复制任何你看中的色彩。可以通过选择相似的色调和饱和度,来达到快速配色。还可以免费选择和下载设置到本地。

4、http://colorme.io

传送门:https://colorme.io

一个简单CSS色彩可视化工具,其特点是有非常多的参数可以设置,包括:透明度、饱和度、色调、亮度、着色、阴影、R/G/B、白色、黑色、对比度的设置等等。

5、Muzli Colors

传送门:https://colors.muz.li

可以在线快速生成和编辑多种配色方案,并根据我们自己的颜色选择预览和下载自定义UI工具包。

6、Colorable

传送门:https://colorable.jxnblk.com/

一款非常实用、用来评估配色可访问性的工具。

7、Historys Palettes

传送门:https://colorleap.app/home

一键生成复古配色,搜索过去4000年来最具有代表性的的180个配色方案。

8、Picular

传送门:https://picular.co/

Picular是一款基于谷歌图像搜索的色彩生成器,只需输入描述词,就能快速生成配色方案。

9、Colourcode

传送门:https://colourco.de/

Colourcode是一个让色彩理论可视化的配色网站,选定一个颜色即就能看到它的互补色、相似色等等。

10、BrandColors

传送门:https://brandcolors.net/

BrandColors是最大的官方品牌配色合集。有包括500多个品牌的十六进制颜色代码,包括Facebook,Twitter,Instagram等等。

以上就是关于10个配色网站的推荐了,有需要的小伙伴可以查看视频,最后有一个链接合集,直接截图保存就可以了。

择一套优秀的配色方案不应该是一个悲催的任务。选择适合的工具,再有一双懂美的双眼,就能让你的设计工作事半功倍。

虽然,我不会直接给你一份合适的配色方案,但今天分享的一些色彩工具,或许对提升你的工作效率和审美有所帮助。

由于这些工具便捷、易用,并且完全免费,你可以将它们收藏起来,以便经常使用。它们使用范围广泛,WEB 端、移动端、或者打印都可以满足你的选色需求。

1.ColorHexa

最近我在浏览网页的时候,偶然发现了 ColorHexa,它是迄今为止我见过的最酷的选色工具之一。

在技术上,它跟颜色生成器或配色工具有所不同,它拥有一个全面的色彩信息库,让你对颜色的选取(相近颜色、配色方案,相关的渐变和阴影等),以及颜色代码(十六进制,RGB,CMYK,CIE-LAB,HSL等)都能直观的了解。

如此完整的颜色信息列表,帮助设计师们研究颜色能起到莫大的帮助,相信,你会对它爱不释手。

网址:https://www.colorhexa.com/

2.Colors.css

如果你对色彩心理学有所研究,就会了解色彩叠加的学问以及它们是如何影响人们的心理和情绪。

每个浏览器都有默认的颜色,通常它们却略显生硬。但 Colors.css 改善了这个问题。它是一个可调预设颜色的免费 CSS 库,这样你便有了更多选择颜色的机会,而不是局限在“红”与“蓝”这两类固定的颜色上。

你甚至还能发现一个功能完善的辅助页面,它提供了众多的配色方案,能够帮助你提高网站的易读性。

网址:http://clrs.cc/

3.ColorPick Eyedropper Extension

你经常浏览一些配色网站吗?我总是在发现酷站后,却为了取色而苦恼。

如果你使用 Chrome DevTools 取色,那么还需要在代码中提取十六进制的颜色。但使用专为 Google Chrome 设计的 ColorPick Eyedropper 扩展程序,将极大的提高你的取色效率。

你只需要单击扩展程序面板的切换窗口,然后鼠标悬停在你想选择的任何颜色上,就能得到一个完整的十六进制代码以及“复制”链接,点击复制链接就可以完成取色。

是不是很酷,并且它还是免费的,值得你拥有。

网址:

https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg

4.Coolors

Coolors 是一个在线的配色方案生成网站,你可以在上面找到数十种色彩生成器,并且它还支持 Adobe 自带的组件。

它真正的价值在于,能够超快速的生成配色。你还可以混合各种锁定的颜色进行更改、调整,并且可以限定条件随机生成可选方案。你可以将其作为 Chrome 扩展,也可以在手机上安装它的 iOS 应用。

如此便捷的应用,你只需要 15 分钟左右就可以了解其原理,并完全掌握它。

网址:https://coolors.co/

5.Palettte App

Palettte 是一款色彩编辑和重映射工具,它能够帮助你构建从一种颜色到另一种颜色的色彩方案,也支持微调单个颜色,并且你还可以导入、分析和编辑现有的色彩方案。

如果你对这个工具很感兴趣,了解下原作者在设计这款工具背后的故事,将会让你受益匪浅。

网址:https://palettte.app/

6.Material UI Colors

用谷歌搜索,你能轻松的找到大量的 Material Design 相关工具,它们为数众多,大多工具也都能生成符合 Android 应用中常见的颜色样式。

使用 Material UI Colors WebAPP,你将会找到符合 Google Material 指南的完美配色方案。通过屏幕左上角的滑块,你可以轻松的调整各种颜色的色调。此外,你也可以随机选择颜色来匹配原网站的颜色,并且根据自身需求,在 HEX 和 RGB 间随意切换相应的格式。

对于 Material Design 爱好者来说,这款应用一定能带给你不少的惊喜。

网址:https://materialuicolors.co/

7.Color Supply

Color Supply 是个匠心独具的网站,但它也显得有些特殊。它提供了一系列有趣的色彩工具,满足你对配色效果的不同需求。用鼠标拖动色轮的取色杆,你就可以直观的看到页面上的选色效果。

网站还根据色彩设计理论,提供了 5 种实用的配色方法。当你选好颜色后,在网页下方可以看到色值。此外,你还能够在线预览平铺的图案和不同颜色的渐变效果,是不是很方便?

网址:

http://colorsupplyyy.com/app/

8.Color Safe

W3C 组织致力于推动 WEB 技术的发展,WCAG 便是成果之一。颜色则是作为构建可访问性网站最简单的方式之一。

Color Safe 是一款免费的 WebAPP,它依据 WCAG 文本和背景对比度指南,帮助你检测颜色的选择是否符合标准。通过选择前景色、背景色以及字体的大小,可以直观的了解 WCAG 评级,同时还能得到相关选色建议。对于关注 Web 可访问性的朋友来说,它是一款非常棒的工具。

网址:http://colorsafe.co/

9.Color Hunt

Color Hunt 这个免费项目已历经了数年,并成为设计师的灵感源泉。用户通过提交各种配色方案,并以票选的形式列出最漂亮的方案,供大家参考与了解。你可以按最新或最受欢迎的方式进行排序,也可以投票支持自己收藏的方案。

由于它是个简单 Web 应用,所以功能相对有限,但对于发掘配色灵感,还是不可或缺的。

网址:http://www.colorhunt.co/

10.Open Color

如果你正在寻找一些能够提升网站可访问性的工具?那么,推荐你了解下 Open Color 这个开源库。

它是一个围绕网站可访问性和浏览器支持的开源色彩库。无论你的网站 UI 是何样式,你都能获取到经过优化,且易于匹配的颜色、字体、背景和边框等。

如果你感兴趣,不妨看看其 GitHub 仓库,并可以下载源文件。

网址:

https://yeun.github.io/open-color/

11.HTML Color Codes

HTML Color Codes 是一款全方位的在线选色器,你可以在线选色并导出 HTML / CSS 代码。它还具备颜色检索功能,你可以根据网站的建议,检索任何你想要的颜色。此外,网站还拥有颜色图表工具,并提供 Adobe Swatch 文件格式下载。

对于经常使用选色器和调色板的设计师来说,这个网站相当的方便。

网址:http://htmlcolorcodes.com/

12.Adobe Color CC

Adobe Color CC 是一款基于 Web 的取色器,简直酷到没朋友。

它以前叫作 Adobe Kuler,虽然历经了多次迭代,UI 已经改变了不少,但其核心功能(调色、取色)并未改变,仍然是一款让设计师们爱不释手的在线工具。

它在同一个方案中支持多达 5 种不同的颜色,你甚至可以上传图像来自动提取动态的配色方案。如果你是 Adobe 用户,那么将其收藏起来是个不错的选择。

网址:

https://color.adobe.com/create/color-wheel/


感谢你的阅读。若你有所收获,欢迎点赞与分享。

注:

  1. 本文版权归原作者所有,仅用于学习与交流;
  2. 如需转载译文,烦请按下方注明出处信息,谢谢!

英文原文:Top 12 Web-Based Color Tools for Web Designers

作者:Jake Rocheleau

译者:IT程序狮

译文地址:

https://zhuanlan.zhihu.com/p/56525701

更多文章:

  1. 推荐!设计师与程序员不能错过的 10 个酷站
  2. 精选推荐!11 款专为设计师打造的热门工具
  3. 10 个优质的 CSS 与 JS LOGO 动画示例