设计使用 | 四个免费的渐变配色网站

简介: 在进行设计工作时,有时候需要一些渐变的配色做底图更好看些,本来用Photoshop也可以自己制作,但是经常一做就很丑,所以还是直接找其他网站上的吧

在进行设计工作时,有时候需要一些渐变的配色做底图更好看些,本来用Photoshop也可以自己制作,但是经常一做就很丑,所以还是直接找其他网站上的吧

一、CoolHue

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

 

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

1.png

二、Uigradients

地址:https://uigradients.com/#BrokenHearts

 

一款简单的配色网站。点击左上角的菜单,即可显示所有内容。通过不同颜色选择不同配色。点击右上角的方向箭头,可以旋转配色角度;点击代码按钮,可以复制它的CSS代码,用于其他设计。点击下载按钮,即可获得一张足够分辨率的 JPG 图片。当然,你还可以直接点击顶部的色值,复制 16 进制色值

2.png

三、Webgradients  

地址:https://webgradients.com/

 

大概有180种渐变配色,在首页点击色块即可全屏显示当前配色方案;同样,在底部可以复制 16 进制色值以及 CSS 代码,点击色块右上角,即可下载 PNG 格式图片

3.png

四、Gradients of Shapefactory

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

 

整个界面显示当前色系的不同渐变颜色;点击色盘,更改色系。拖动左边的球形按钮,可以改变色度和亮度;鼠标放在某一色块上,点击圆圈并旋转拖动可以改变渐变色的角度。同样可以复制 16 进制色值,以及 CSS 代码;点击图片,可以看到全局

4.png

目录
相关文章
|
5月前
|
前端开发 数据安全/隐私保护 容器
简约渐变色登陆布局html+css代码
这是一段包含HTML和CSS代码的摘要。HTML部分定义了一个基本的网页结构,包括`<html>`、`<head>`、`<body>`标签,以及一个简单的登录界面,由一个容器`.container`包含一个登录框`.login-wrapper`,登录框内有输入框和登录按钮。CSS部分设置了全局样式,如字体、边距,并为HTML元素添加了样式,如背景渐变色、文字对齐、输入框和按钮的样式等。整个代码展示了创建一个具有响应式布局和特定视觉效果的简洁登录页面。
61 0
|
6月前
|
UED
【专栏:交互与用户体验篇】网页中的色彩搭配与配色方案
【4月更文挑战第30天】网页设计中,色彩搭配影响用户体验。了解色彩心理学、搭配原则及配色方案至关重要。色彩能传达信息、影响感知,通过对比与和谐、色彩平衡和层次创造良好视觉效果。单色、类似色、对比色和互补色四种配色方案各有优缺点,需根据目标用户和网页需求选择。恰当的色彩运用能提升美感,增强网页吸引力。
127 5
|
6月前
微信小游戏制作工具中关于背景图的设置
微信小游戏制作工具中关于背景图的设置
210 0
|
前端开发 小程序
分享几个工具配色的网站!
今天给大家分享几个无论是前端页面美化,还是网站页面设计都会用到的配色网站
204 0
|
机器学习/深度学习 安全 Android开发
搞颜色指南|巧用色彩搭配,制作吸睛网站。
建站|全网最系统的色彩搭配指南,教你制作吸睛网站
434 0
|
Web App开发
5款免费的优秀网站配色方案工具
网站的配色方案决定了访问者对网站的第一印象,有很多工具可以帮助选择合适的配色方案,本文为网站设计者介绍五款免费的优秀网站配色方案工具。 1. Kuler Kuler是一款倍受专业网页设计人员喜爱的工具,它在配色方案中增加了社会化媒体和网络因素,设计人员使用Adobe注册账号登陆后可以创建调色板并且互相分享,也可以根据自己的需求修改别人的调色板。
1580 0