图片变色_『设计｜分享』设计师的色彩网站推荐（一）—渐变色

整理：设计与设计师（ID：Design-Designer）
作者：设计与设计师
转载请注明出处。

---

配色对一项设计的重要性，这边就不多加赘述。在色彩设计应用中，我们对颜色不同程度的理解，将影响到产品，设计页面的表现，熟练地运用色彩搭配，设计时可以事半功倍。一个优秀的设计作品，它的色彩搭配必定和谐得体，令人赏心悦目；这一系列文章推荐色彩网站。第一辑就从十个渐变色网站开始，请君观赏。

---

1.GRABIENT

网址：https://www.grabient.com/

Grabient是一个专注于网页渐变色配色方案的网站，网站自身提供了多种渐变色方案供用户选择，这些每一种配色方案都可以非常简单方便的进行修改，网站提供的功能可以让用户进行渐变色角度调整、颜色选择、复制渐变色css代码等。

---

2.uiGradients

网址：https://uigradients.com

这个网站直接将渐变色填充成背景，可以非常直观的看到效果。点击右边的下载按钮，可以将当前的渐变背景下载到本地

---

3.Gradient Hunt

网址：https://gradienthunt.com/

Gradient Hunt 是一个免费开放的色彩灵感平台，有数千种时髦的手工制作的颜色渐变。

---

4.Color Spark

网址：https://colorspark.app

Color Spark是一款非常易用的选色器，开启网站按下開啟網站按下「Generate」按钮，每次都会随机出现一种颜色，同时也会显示Hex颜色代码，可以快速复制。

---

5. eggradients

网址：https://www.eggradients.com/

但渐变颜色无处不在。这种设计每年都在发展。最重要的设计，颜色，开始进化。包含200+渐变背景色的渐变调色板。

---

6.Gradient.shapefactory

网址：https://gradient.shapefactory.co/

Gradients of Shapefactory 其实是整个网站的功能之一，其他功能你可以自行去发掘。整个界面显示当前色系的不同渐变颜色；点击色盘，可以更改色系。拖动左边的球形按钮，可以改变色度和亮度；鼠标放在某一色块上，点击圆圈并旋转拖动可以改变渐变色的角度。同样可以复制 16 进制色值，以及 CSS 代码；点击图片，可以看到全局。

---

7.Free Mesh Gradient Collection

网址：https://www.ls.graphics/meshgradients

100种渐变色配色方案，可以下载配色方案图片。

---

8.Culrs

网址：https://culrs.com/

作为设计师，当你为一个设计作品配色时，并不是色彩好看就行，还需要根据作品表达的情绪、受众群体等方面去考虑。比如开心、愤怒、目标人群是儿童、青少年、男性还是女性等等。所以颜色是不能随便用的。Culrs 刚好是拥有这些分类的一个在线配色工具网站。

---

9.Coolhue

网址：https://webkul.github.io/coolhue/

CoolHue 首页大概有 60 种渐变色背景，当然，这个数目会持续增加。选择你中意的配色方案，点击下载即可获得一张适当分辨率的方形 PNG 图片。点击代码图标，可以复制该渐变色的 CSS3 语法。在一些网页设计中，直接应用，相比上传渐变色图片，更省流量。下方可以直接复制 16 进制代码，用于 PPT 或者 PS ，甚至电脑画图程序当中。

---

10.Web gradients

网址：https://webgradients.com/

最后再推荐一个网站，里面的渐变样式非常漂亮。Webgradients 大概拥有 180 种渐变配色，在首页点击色块即可全屏显示当前配色方案；同样，在底部可以复制 16 进制色值以及 CSS 代码，点击色块右上角，即可下载 PNG 格式图片。

---

本文由设计与设计师原创整理，转载请注明出处。

---

免责申明：公众号宗旨是收集好的资料分享，非盈利性质。部分内容来源于网络或网友自主投稿编辑整 理，版权归原作者所有，其内容为作者个人观点，并不代表本公众号赞同其观点和对其真实性负责。如您(单位或个人)认为本公众号某部分内容有侵权嫌疑，请通知我们，我们将第一时间予以更改或删除。