大数跨境

网站背景色土到掉渣?别慌,进来学习

网站背景色土到掉渣?别慌,进来学习 甘肃合创中小企业公共服务平台
2025-05-30
1
导读:有时候做的网站觉得土到掉渣未必是排版的问题也可能是配色的锅(也可能两个都有问题)为啥上面两张剧照差距就这么大呢

有时候做的网站觉得土到掉渣

未必是排版的问题

也可能是配色的锅

(也可能两个都有问题)



为啥上面两张剧照差距就这么大呢?

其实就是一个色彩饱和度的问题

要知道学过色彩绘画的人

都不会直接用颜料罐里的颜色

而是经过调色后再使用


因为纯度太高的颜色轻浮、不稳定

加入其他颜色调色后纯度降低

画面就会表现出沉稳厚重的高级灰色调



配色这个问题

如果要从基础理论

肯定没有几个人有耐心看

而我也没有耐心写

所以我只能给走捷径了

自己不会配不要紧

那就用已经被肯定过的配色啊

例如:专业的配色网站



配色网站中的每个颜色

都是经过设计师筛选出来的

确保颜色都是稳定耐看的

今天只抓一个渐变色来学习


接下来认真看啦

(不想学可以放进收藏箱吃灰)

我们可以开始了

结尾有彩蛋



渐变配色篇


渐变色经常被用来作为背景色使用

但是渐变色要想好看

其实也并不好把握


想过渡得自然和谐

前端和末端的色一定要匹配得好

像这些渐变色

已经OUT了

↓↓↓


下面三个网站

让大家轻易调出好看的渐变色


01 coolhue

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


这个网站给出了60种渐变配色

有同色系的也有对比色


点击色彩框的右下角<>

马上可以复制色彩编号


↓复制出来是这样的↓

background-image: linear-gradient

( 135deg, #F0FF00 10%, #58CFFB 100%);


我们只需要关注橙色部分就可以了

#XXXXXX是前后的颜色值

 10%和100%是颜色位置(可以不管)

deg是角度 (可以不管)

把它运用到网站中就OK了


看看实操示例

图片图片图片





确认后立马就可以看到效果啦!

(大佬:确定这叫好看吗?我:还不是为了突出效果图片


图片




02 uigradients

https://uigradients.com/#SummerDog


这个网站版面很大气

两种使用方法

第一种 随缘

一直按>翻页

随机挑选出现的渐变色


第二种 点击左上角

精确选择你喜欢的色系


图片






03 itmeo

https://webgradients.com/


180个线性渐变的免费集合

轻松复制CSS3跨浏览器代码


以上配色网站用法都一样

查看配色颜色值

到网站设计中设置对应颜色值




彩蛋篇


此处彩蛋介绍一个

好看又感觉没啥用的色彩网站


 中国色

http://zhongguose.com/


这个网站是模仿的一个日本色网站

一度在微博非常火爆

一是因为网站颜值高

二是因为它每个颜色都有名字

而且极富中国文化底蕴



虽然对配色来说它作用不大

秉着不浪费的目的

我觉得给文案师用来吹水还是不错的


比起:

品牌包装特地选用了淡紫色作为主色”

“搭配淡黄色别有韵味”


显然这么说更厉害:

“品牌包装特地选用了青莲色作为主色”

“搭配素馨黄别有韵味”



最后再唠叨一句

在使用配色前,请务必记住这个准则

↓↓↓

【建站渐变配色不要超过2个】噢



图片
- END -
图片

“点点赞”再走吧!


图片

@原创者,版权归原创所有,如有侵权,请及时联系联系我们:

江苏公司地址:江苏省无锡市江阴市人民西路317号1503室

兰州公司地址:甘肃省兰州市西津西路49号银信大厦1010室

张掖公司地址:甘肃省张掖市高台县城关镇西城河路222号

酒泉公司地址:甘肃省酒泉市肃州区风电大道2号鑫隆国际电子商贸中心一号楼85号公司电话:15509361688(同微信)0936-6669081、0937-2635511、0510-81825611     

公司网址:https://hcds1688.com

电子邮箱:gthechuang@163.com


【声明】内容源于网络
0
0
甘肃合创中小企业公共服务平台
1234
内容 0
粉丝 0
甘肃合创中小企业公共服务平台 1234
总阅读0
粉丝0
内容0