有时候做的网站觉得土到掉渣
未必是排版的问题
也可能是配色的锅
(也可能两个都有问题)
为啥上面两张剧照差距就这么大呢?
其实就是一个色彩饱和度的问题
要知道学过色彩绘画的人
都不会直接用颜料罐里的颜色
而是经过调色后再使用
因为纯度太高的颜色轻浮、不稳定
加入其他颜色调色后纯度降低
画面就会表现出沉稳厚重的高级灰色调
配色这个问题
如果要从基础理论讲
肯定没有几个人有耐心看
而我也没有耐心写
所以我只能给走捷径了
自己不会配不要紧
那就用已经被肯定过的配色啊
例如:专业的配色网站
配色网站中的每个颜色
都是经过设计师筛选出来的
确保颜色都是稳定耐看的
今天只抓一个渐变色来学习
接下来认真看啦
(不想学可以放进收藏箱吃灰)
我们可以开始了
结尾有彩蛋
渐变配色篇
渐变色经常被用来作为背景色使用
但是渐变色要想好看
其实也并不好把握
想过渡得自然和谐
前端和末端的色一定要匹配得好
像这些渐变色
已经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个】噢
“点点赞”再走吧!
@原创者,版权归原创所有,如有侵权,请及时联系联系我们:
江苏公司地址:江苏省无锡市江阴市人民西路317号1503室
兰州公司地址:甘肃省兰州市西津西路49号银信大厦1010室
张掖公司地址:甘肃省张掖市高台县城关镇西城河路222号
酒泉公司地址:甘肃省酒泉市肃州区风电大道2号鑫隆国际电子商贸中心一号楼85号公司电话:15509361688(同微信)0936-6669081、0937-2635511、0510-81825611
公司网址:https://hcds1688.com
电子邮箱:gthechuang@163.com

