整合营销服务商

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

免费咨询热线:

分享一波常用取色网站

理了一些本人开发中用到的和接触到的一些取色的网站,有色彩搭配的,也有直接生成css 代码的,值得一试的。

中国色

分享一个有中科院科技情报编委会名词室.科学出版社色谱,对应的有中文名称,英文名称,色值对应有 RGB / CMYK 格式 印刷标准FOGRA39,网点补正值 15%

zhongguose

Color Hexa

这个突出的一点就是你可以根据一个颜色范围值搜索相近的色值,并且还有相关的示例文本和css 代码,还有多种色值格式Hex,RGB,CMYK,HSL 等多种格式

colorhexa.com

Color Hunt

免费开放的平台,提供数千种时尚的手工挑选的调色板,对于有颜色搭配困难症的人来说简直太爽了,不用纠结该怎么搭配了。

colorhunt.co

Html Color Codes

获取HTML颜色代码,十六进制颜色代码,RGB和HSL值与我们的颜色选择器,颜色图表和HTML颜色名称。

htmlcolorcodes.com

HSL Color Picker

这个就没有设计好的了,需要自己选择色值范围自己搭配颜色选择色值了。

hslpicker.com

Picular

这个网站也挺不错的,可以根据中文名称加载相关的颜色,也支持一键复制。

picular.co

Material UI Colors

可以设置明暗程度,也可以点击更多查看相近的同号色值。

materialuicolors.co

Color Spark

随机生成渐变色和单色,支持一键copy css 代码

colorspark.app

Neumorphism

新拟态样式生成,使用超级简单,选择主色调整大小,边角半径,漂亮的新拟态样式就生成了,一键copy css 代码就完成了,很赞!

neumorphism.io

浏览器F2

其实以上网站在开发只是为了取色辅助,本人最常用的是这个,直接调试看效果,效率嘎嘎滴!

浏览器自带控制台调试


就分享这么多吧,上面网站的地址都放在图片备注中了,需要查看的直接搜索就能找到了,如果你们有更好的欢迎评论区告诉我,我也去试试,然后今天1024祝大家节日快乐#1024程序员节#

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

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

第一个网站:Designspiration

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

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

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

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

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


第二个网站:Alwane

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

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

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

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

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



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

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

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

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

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

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

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

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



第四个网站:Coolors

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

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

图源网络

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

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

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

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

源:BIGD

众所周知,配色是设计中非常重要的部分,一个好的配色不仅能让我们的设计更加出彩,还能对用户产生情感影响。小编今天给大家整理了Muzli上 58个今年最佳的配色工具,相信一定能对你们有所帮助~

1.Muzli Colors

https://colors.muz.li

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

2. Colorable

https://colorable.jxnblk.com/

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

3. History’s Palettes

https://colorleap.app/home

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

4. Picular

https://picular.co/

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

5. Colourcode

https://colourco.de/

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

6. Palettte App

https://palettte.app/

palettte是一款色彩编辑和重映射工具,能够可视化的看到不同颜色之间的过渡流畅度,匹配出更和谐的色彩,还支持单个颜色微调。我们还可以导入、分析和编辑现有的色彩方案。

7. Colorinspire

https://www.colorinspire.io/

收录了很多场景的精选配色方案,为我们提供源源不断的色彩灵感。

8. ColorSpace

https://mycolor.space/

Color Space是一款非常实用的渐变生成器,我们只需要选择一个颜色,就可以快速生成20~30种不同风格的配色方案。

9. Pigment

https://pigment.shapefactory.co/

Pigment可以通过饱和度、色温以及色系来生成我们独特的配色方案,还可以查看不同配色的配色场景图片。

10. Adobe Color

https://color.adobe.com/create

Adobe Color通过拖拽色轮或输入自定义色值,我们可以创造出基于相似、互补、三原色等不同色彩规则的配色方案。除此之外,还支持CMYK、RGB、HSV多种色彩模式的配色调整。

11. Colors & Fonts

https://www.colorsandfonts.com/

Colors&Fonts是由国外一名设计师Michael Andreuzza创建的配色网站,里面收录了超多他精心收藏的配色方案,我们只需要输入描述词,网站就会推荐相应的配色方案,除此之外还有渐变、字体等多种选择,一键复制色值。

12. HueSnap

https://www.huesnap.com/

「HueSnap」是一款实用的取色工具,我们可以从图像中捕捉到色彩的详细信息,包括十六进制、RGB、CMYK、HSV、HSL等等。除此之外,我们还可以在社区中浏览超多非常棒的配色方案灵感,并收藏和保存它们。

13. Culrs

https://culrs.com/

Culrs是一个综合型的配色网站,可以通过邻近色、三色、四色和单色来搜寻灵感配色。除此之外,每种色彩规则下还有明暗分类,相当方便。

14. Eva Design System

https://colors.eva.design/

Eva Design System是一个基于深度学习算法的配色网站,适用于给我们的产品或品牌生成一个系统的配色方案。

15. Scale

https://hihayk.github.io/scale/

快速色标生成器

16. Site Palette

http://palette.site/

Site Palette是一款设计师和前端开发人员必备的谷歌插件。可以自动吸取网站的主要颜色,帮助我们建立色板,以及寻找相关配色的图片,并一键下载配色方案。

17. BrandColors

https://brandcolors.net/

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

18. Colorwise

https://colorwise.io/

Colorwise将时下最受欢迎的配色方案按照适用场景分类,以便我们快捷地寻找配色灵感。

19. HTML Color Codes

https://htmlcolorcodes.com/

颜色图表和带有Hex颜色代码,RGB和HSL值的HTML颜色名称,轻松查找网站的HTML颜色代码。

20. ColorBox

https://www.colorbox.io/

ColorBox可以帮助我们轻松地创建非常炫酷的色彩集,配色页面还有大量的个性化选项,满足我们的任何需求~

21. Generate — Coolors.co

https://coolors.co/

几秒钟之内创建,保存并分享好看的配色方案。

22. Color — Cloudflare Design

https://cloudflare.design/color/

专为UI设计师创建的配色工具,支持根据用户界面元素预览配色、循环浏览可访问的颜色组合并手动创建配色方案、通过网址导入或生成配色。

23. Instant Duotone Effect Generator

https://duotones.co/

双色调效果生成器,支持用户在线选择多达几十种双色调配色。

24. Material Design

https://material.io/resources/color/#!/?view.left=0&view.right=0

为UI创建和共享调色板,并测量任何颜色组合的可访问性。

25. Blendy

https://blendy.ml/

Blendy是一种快速预览CSS背景混合模式的工具。我们可以使用混合模式,颜色,渐变并在图像上进行尝试。

26.LOL Colors

https://www.webdesignrankings.com/resources/lolcolors/

LOL Colors是一款可爱的配色网站,色彩大多明快清新,直接拖动鼠标即显示色值,方便收藏色卡。

27. Color Hunt

https://colorhunt.co/

Color Hunt是一个免费开放的色彩灵感平台,拥有数千种时尚的配色方案。

28. ColorMe

https://colorme.io/

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

29. Polarite

https://www.polarite.app/

Polarite是一款智能配色应用程序,用户只需左右滑动颜色选择喜欢/不喜欢的色彩,系统就会根据其结果智能生成一系列我们喜欢的且和谐的配色方案。

30. Gradient Hunt

https://gradienthunt.com/

精选数千种时尚的渐变色,并且每天都会更新。

31. Palettable

www.palettable.io

可以自己随意搭配色彩方案的网站,用户只需要选择喜欢/不喜欢,直到搭配出想要的色板。

32. ColorSpark

https://colorspark.app/

一个简单而有效的工具,随机生成好看的颜色、渐变色,可以一键复制 CSS 代码。

33. SVG Colorizer

https://www.iconshock.com/svg-color/

SVG着色器,自动为SVG图标和SVG矢量着色

34. Sip

https://sipapp.io/

适用于Mac的Sip ColorPicker。可以帮助我们更好的收集整理和分享配色方案。

35. CoolHue 2.0

https://webkul.github.io/coolhue/sketch-plugin/

一款免费的sketch渐变配色插件和收集工具。

36. Color Koala

https://colorkoala.xyz/

Color Koala是一个快速配色生成器。

37. SchemeColor

https://www.schemecolor.com/

SchemeColor可以下载、创建和分享成千上万种美丽的配色组合,获取十六进制颜色代码的详细信息,并将其转换为RGB和CMYK等色彩模式。

38. Free Mesh Gradient Collection

https://www.ls.graphics/meshgradients

100多个免费的渐变色合集,支持sketch、png、ai、jpg、eps等多种格式下载。

39. WebGradients

https://webgradients.com/

WebGradients是一个由顶级设计师策划的免费渐变配色网站,拥有180种漂亮的线性渐变,并支持CSS3、Photoshop和Sketch等多种格式。

40. Gradient Buttons

https://gradientbuttons.colorion.co/

炫酷的渐变按钮,还有悬停的动画效果,一键copy css代码。

41. ColorKit

https://colorkit.io/

多种色彩渐变生成器,只需输入开始和结束颜色以及混合步骤数,就能一键生成流畅的配色方案,并支持svg格式导出。

42. Eggradients

https://www.eggradients.com/

一款收录了最新设计趋势渐变色彩的配色网站,支持一键复制十六进制和CSS代码。

43. Cool Backgrounds

https://coolbackgrounds.io/

Cool Background是设计师Moe Amaya将5个开源生成器的简化版整理组成的工具集,内置五种背景风格,每一个种风格还提供了简单的参数配置。分别是:

低多边形风格

trianglify.io

动态粒子效果

marcbruederlin.github.io/particles.js

渐变

cssgradient.io

渐变层生成器

s.muz.li/NTFiZjk0ZWFh

Unsplash图片集

unsplash.com

44. Art Palette

https://artsexperiments.withgoogle.com/artpalette/

基于Google AI的智能配色工具,它会根据你所提供的配色方案来提供相符合的配色主题的艺术图片。

45. GradPad

http://ourownthing.co.uk/gradpad.html

CSS渐变生成器,我们可以自己设置渐变色彩、透明度、位置和角度,还可以查看流行的热门渐变色彩,并直接使用现成的颜色代码。

46. Khroma

http://khroma.co/

Khroma号称是“设计师的AI颜色工具” ,会先让你从大量的颜色中选择你最喜欢的50种,然后利用神经网络驱动算法来帮你生成最符合你审美要求的配色方案,并且它所有给出的的配色都是从最流行的配色方案中学习得来。

47. Color palettes

ttps://www.canva.com/colors/color-palettes/

Canva上数千种精选色彩组合

48. Color Safe

http://colorsafe.co/

Color Safe是一个基于Web内容无障碍指南(WCAG)的配色网站,可以根据我们提供的色彩检测可访问性,并给出相应的调整方案。

49. Paletton

http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF

Paletton 是一个在线的色环配色工具。我们可以根据需要选择单色、相近色、对比色等规则来查看配色,也可以实时查看其在网页中的搭配效果。

50. Colordot

https://color.hailpixel.com/

动一动鼠标就可以不断生成的新的色卡。非常适合毫无灵感、不知从何下手的设计师。

51. Colors

https://klart.io/colors/

100%由数据驱动的配色方案集合。

52. Contrast Ratio

https://contrast-ratio.com/

一款轻松计算颜色对比度的配色工具。

53. Color Lisa

http://www.colorlisa.com/

世界上最伟大的艺术家的色彩杰作。

54. Color Designer

https://colordesigner.io/

只需选择一种颜色,Color Designer就会帮助我们构建一个系统的配色方案,并基于我们所选的颜色生成多种色调和阴影等。

55. Color.review

https://color.review/

测试颜色对比度的配色工具

56. Blend

http://www.colinkeany.com/blend/

Blend - 创建和自定义漂亮的CSS3渐变。

57. Contrast

https://usecontrast.com/

一个用于快速测试WCAG颜色对比度的macOS应用程序

58. Grabient

https://www.grabient.com/

一个非常漂亮且实用的渐变网站,支持 CSS 样式代码复制、360度渐变旋转、自由增加或删除渐变颜色等功能。

今天的内容就到这里啦~

小伙伴们还知道哪些超赞的配色网站呢?

记得留言告诉我们哦~

*商品入驻和分销,请发送具体信息到:ponyco@126.com