158
30
6个🌈渐变色配色网站推荐 | 背景 按钮 banner header logo都适合的渐变色
2021-08-11 18:02:09
5点赞
11收藏
0评论
创作立场声明：利益相关：推荐前端和设计所需的网站，同时为自己的B站视频增加播放量。
详细介绍和预览的视频(文章中每段标题就是网站超链接哦)：
Gradihunt
这个网站可以很便捷地收藏喜欢的配色，只需要将光标悬浮在喜欢的配色方案上，然后点击出现的小心心即可。
每一个配色方案的右上角点一下都可以进入详细预览。然后可以在右上角复制CSS，也支持作为图片文件下载。
下面这里可以预览和不同颜色的文字的组合效果。首页默认的随机配色大多都是清新风格，预览的选项非常多，还可以选择一定的风格或者自定义一些参数随机生成新的配色。
壁纸区的设置中，渐变轴的角度调整起来比之前的方便很多，然而不能复制CSS，而前面可以复制CSS的地方渐变轴角度调整又没有这么方便，得数字+1-1或者直接输入一个数字那样调整。
这边还可以设置中间的文字，不过只能设置大小和字体，位置不能改变。然后内容的话也不支持换行。对中文来说也只能显示根据所选的英文字体有无衬线来分别制定宋体和黑体。
CoolHue
这家网站还提供Figma和Sketch的插件。
每个配色的右下角可以一键复制CSS代码，在网页右上角会有复制成功的提示。也可以下载图片，但是下下来的图片的尺寸是1000乘1000，不知道这个尺寸的图片可以用来做什么。
它这里的话就只有这种小方块的预览，不过我们可以通过ctrl和加号或者ctrl和滚轮去放大网页来看，还是不是很方便。下面的文字颜色也挺有槽点的，看得出是想用两种渐变两端的颜色做文字颜色，结果上面这个文字还是黑色的。
最大的问题是只有60种搭配，貌似他们家的插件可以随机生成，有条件的同学可以试一试。
WebGradient
每次打开这个网站必定有一段我个人觉得不怎么好看的动画，需要等待的时间还挺长……
这个网站的特点呢是预览是圆形的，然后点一下就可以全屏预览，本身设计很好看也方便挑网页背景。右下角可以复制CSS代码，左下角可以复制颜色十六进制，右上角可以作为图片下载。
这个网站也提供对应的sketch和Photoshop文件，由此也可以看出他们家提供的配色方案并不多……
CSS Scales
相比之前推荐的网站都是两种颜色的渐变，这个网站是11个颜色。作为网页设计用的话，个人感觉没有别的网站的配色那么惊艳。但是！！！倒是很适合给内存条配色……比如我的内存条是
说起来老的华硕灯光同步软件是可以调整每个灯珠的色值的，新的不可以了，有没有大佬知道为什么的
uiGradients
这个网站的话进去就是其中某一个配色霸占整个屏幕，正上方的颜色的十六进制码可以直接点击复制。右边可以复制对应的CSS代码，比较有特色的是它的CSS代码自带对应低版本浏览器的兼容性代码。还支持一键旋转渐变轴，但是只支持自上而下、从左到右和相反的共四个方向。还可以作为图片下载，这个网站提供的图片是这次几个网站中唯一一个尺寸比较正常的，虽然只提供2K也不咋正常。左右可以切换新的配色方案，比较有特点的是每一个配色方案都会有一个比较好听的名字。
想要一览所有搭配的话要点左上角或者按shift。同样支持选择查看某个色系下的渐变色搭配。
Gradient by ShapeFactory
这个网站是我最喜欢的一个，因为它可以非常直观地任意调节渐变轴角度。
下方可以直接复制CSS代码或者颜色16进制。然后也可以收藏喜欢的配色，也可以根据色系显示配色方案，还可以自主调节色系内所有配色方案的对比度和明度并获得及时预览，不过要注意开始拖动时不要点得太边缘不然会无法正常拖动。。同样可以全屏，全屏后仍然可以360度调节渐变轴角度，同时右上角可以作为图片或sketch文件下载，图片的话是这次推荐的几个网站中唯一一个支持矢量图的。
网站链接的话直接点每段那个标题就好啦，也可以去我对这次的推荐专门做的一个小导航页：渐变色配色网站推荐 (bb5bb.cn)，注意其中有几个网站可能对网络条件比较高的哦。
