css 渐变色_『设计|分享』设计师的色彩网站推荐(一)—渐变色

整理:设计与设计师(ID:Design-Designer)
作者:设计与设计师
转载请注明出处。

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


1.GRABIENT

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

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

fa3043f1e0d32de97dbee951d83df145.png

2.uiGradients

网址:https://uigradients.com

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

17f7ee17e3f36e57a5c49ca28ea95741.png

3.Gradient Hunt

网址:https://gradienthunt.com/

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

6141f0406bee162b6c54f6f31dfa7e84.png

4.Color Spark

网址:https://colorspark.app

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

97f024fa3eb79419b43cb551db5de69a.png

5. eggradients

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

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

d39e0db64a21f19d0893c79f35257637.png

6.Gradient.shapefactory

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

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

cfb48ca45b5fcaea75fa44cdb300924e.png

7.Free Mesh Gradient Collection

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

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

eb34f36038e5d590682163486e378b97.png

8.Culrs

网址:https://culrs.com/

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

ce59d373122ab20f04b0bfa0cd682666.png

9.Coolhue

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

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

88218ca2f3b4237c6b19d99cf3125ec2.png

10.Web gradients

网址:https://webgradients.com/

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

870df4afa30d93a1d7f273b683eb109b.png

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


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