大总管默默

学UI网自2022年03月21日起新增干货小组/鉴赏小组

增加鉴赏类目:

#优秀作品鉴赏

其中包括APP界面鉴赏、平面视觉鉴赏、UI动效鉴赏等

增加干货类目:

#学UI网干货分享

其中包括在线配色网站、在线工具、插件等

还会有更多的小组和类目加入,感谢大家的持续关注和学U网的干货小组和解答团的辛苦整理!~

 

我们在搜索设计创意的时候,经常能看到一些酷炫的渐变背景,很多时候突然去找或者临时搜索,反而没有太好的渠道和路径,今天我把一些高大上的渐变配色实用网站整理在一起,方便新手朋友们用的时候更得心应手,朋友们,记得收藏一下哈。

 

01  Cool Backgrounds

网站链接:https://coolbackgrounds.io/

网站介绍:Cool Background 是由5个开源生成器整理组成的彩色渐变图像集合在一起的工具集,内置5种不同的背景风格,每一种风格还提供了简单的参数配置。非常的炫酷美观。

低模三角形

粒子

CSS渐变

阶梯渐变

图片

使用方式:左侧选择不规则形状、图形、渐变背景、图片等,右侧可以选择不同的色彩组合,选择适合自己的色彩风格后,点击下载即可。

 

 

02 180种渐变背景

网站链接:https://www.fengtupic.com/colortool

网站介绍:内含180种渐变配色方案,特别好看美观,适合各种场景模式下的背景使用。

使用方式:选择适合自己场景的渐变色,可拷贝css格式,也可下载png格式。

 

 

03 Pigment

网站链接:https://pigment.shapefactory.co/

网站介绍:可通过改变饱和度、色温和色系改变配色方案,还可通过查看场景效果观察此配色方案呈现效果。

网站截图

饱和度  亮度 颜色

选中和更多

使用方式:左侧可以选择不同的饱和度和亮度,选择其他色调,右侧放大可查看场景配色效果。

 

 

04 ColorSpace

网站链接:https://mycolor.space/

网站介绍:Color Space 是一款非常实用的渐变生成器,我们只需要选择一个颜色,就可以快速生成20-30种不同风格的配色方案。同时还提供了梯度和三色渐变选项,可以快速生成配色并查看 CSS 代码。

网站截图

输入颜色代码或选择颜色

生成方案

更多与修改

CSS代码模式

三色渐变

使用方式:上面输入色值,自动出来渐变方案,还可左右滑动选择适合自己的搭配方案

 

 

05 Adobe Color

网站链接:https://color.adobe.com/zh/create/color-wheel

网站介绍:可自由选择色环上不同的颜色值,依照类比、单色、三原色、补色等不同搭配模式进行搭配,下面展示一系列色值。同时可将看到的好的图片色纸上传上来,自动配比色值,同时,还能查看背景色与文字的对比度检测,非常适合网站多色搭配。

色轮

辅助工具

使用方式:滑动多tab滑块,选择色环颜色做不同类型搭配;利用协助工具查看文字与背景的对比检测。

 

 

06 BrandColors

网站链接:https://brandcolors.net/

网站介绍:这个网站是基于最大的官方品牌颜色做整理,包含了众多品牌颜色官网的配色方案,可作为网站或者品牌配色的借鉴。

颜色方案

选中后复制下载

使用方式:选择好相关品牌的色彩调性,可查看色值,可复制色值,也可以下载相关色值,超级方便。

 

 

07 Color Leap

网站链接:https://colorleap.app/home

网站介绍:一键生成复古风图片色调分离,可以选择年代搜索过去180种配色方案。

年份选择

年份列表

代表图片和查看颜色

查看颜色和查看图片

使用方式:选择年代,选择图片风格的配色方案,查看颜色,复制相关色调即可。

 

 

08 ColorBox

网站链接:https://www.colorbox.io/

网站介绍:ColorBox 是选择一个颜色,会生成一个颜色系列的颜色工具。可以帮助我们轻松地创建非常炫酷的色彩集,配色页面还有大量的个性化选项,满足我们的任何需求。

网站截图

饱和

使用方式:左侧可以添加不同的颜色分类值,右侧调整搭配的颜色系列和同色系和补色系不同选择,曲线直观展示出色调和饱和度的变化幅度。

 

 

09 Eggradients

网站链接:https://www.eggradients.com/

网站介绍:Eggradients 是一款收录了最新设计趋势渐变色彩的配色网站,以鸡蛋的形式展现,支持一键复制。

预选颜色

渐变调色板

使用方式:选择适合自己设计场景的配色方案,复制即可。

 

 

10 CoolHue 2.0

网站链接:https://webkul.github.io/coolhue/sketch-plugin/

网站介绍:CoolHue 2.0是一款免费的 Sketch 渐变配色插件和收集工具。

使用方式:在sketch下载插件,直接点击插件,选择相关配色。

 

 

11 Free Mesh Gradient Collection

网站链接:https://www.ls.graphics/meshgradients

网站介绍:包含100多个免费的渐变色合集,支持 Sketch、PNG、AI、JPG、EPS 等多种格式下载。

网站截图

翻译截图

渐变截图

使用方式:可选择ai、eps、jpg、png格式,选择好看的渐变色下载即可。

 

 

12 Grabient

网站链接:https://www.grabient.com/

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

网站截图

调整角度

调整颜色

渐变比例

使用方式:选择适合自己风格的配色方案,点开调整渐变梯度,下载即可。

 

最后感谢大家的欣赏和学UI网干货小组和学UI网解答团的辛苦整理;

后续仍然会给大家持续带来 #学UI网干货分享(其中包括在线配色网站、在线工具、插件等)

谢谢大家的持续关注!~

 

转载请注明:学UI网 » 12种超级好用的-免费渐变神器

登录收藏
 
你可能喜欢的:
设计基础(4):B端中后台管理系统色彩体系设计基础(4):B端中后台管理系统色彩体系
终于整理完了,这些图标库也太好用了!终于整理完了,这些图标库也太好用了!
有哪些高质量的设计周刊?有哪些高质量的设计周刊?
我的配色是真不行阿!我的配色是真不行阿!
如何更好的统一颜色规范?这个方法正在成为新趋势!如何更好的统一颜色规范?这个方法正在成为新趋势!
用海报留给龙虾最后的倔强用海报留给龙虾最后的倔强
B端设计师常用的七款 Figma 插件B端设计师常用的七款 Figma 插件
硬核干货!渐变色在设计中有哪些妙用?硬核干货!渐变色在设计中有哪些妙用?
设计效率工具趋势 | 综述篇设计效率工具趋势 | 综述篇
原来眼睛看到的都是骗人的原来眼睛看到的都是骗人的