大家好
我是
Why姐
·柚柚
我又来了
冬天码字真的好难鸭
举一个简单的栗子
从“辣眼睛”到被吹上天的“莫兰迪色”
只是一个于正的距离
啊呸……说错了
于正从被喷“直男”审美到咸鱼翻身
只是一个
配色的距离
澄清：《延》所运用的色彩搭配
其实参考的是中国传统古画的颜色
与莫兰迪色并无联系
所以有时候你做的图土到掉渣
未必是设计的问题
也可能是
配色的锅
为啥上面两张剧照差距就这么大呢？
其实就是一个
色彩饱和度
的问题
要知道学过色彩绘画的人
都不会直接用颜料罐里的颜色
而是经过
调色后
再使用
因为纯度太高的颜色轻浮、不稳定
加入其他颜色调色后纯度降低
画面就会表现出沉稳厚重的
高级灰色调
配色这个问题
如果要从
基础理论
讲
肯定没有几个人有耐心看
而我也没有耐心写
所以
我只能给你们捷径了
自己不会配不要紧
那就用已经被肯定过的配色啊
例如：
专业的配色网站
配色网站中的每个颜色
都是经过设计师筛选出来的
确保颜色都是稳定耐看的
本文集合了12个精选配色网
分成
三部分
介绍
1、渐变色配色
2、纯色配色
3、UI设计配色
想学就认真看啦！！
我们可以
开始了
渐变色经常被用来作为
背景色
使用
但是渐变色要想好看
其实也并不好把握
一不小心就是城乡结合的效果
想过渡得自然柔和和谐
前端和末端的色一定要匹配得好
像PS预设的这些渐变色
已经
OUT了
↓↓↓
https://webkul.github.io/coolhue/
这个网站给出了60种渐变配色
有同色系的也有对比色
↓复制出来
是这样的↓
background-image: linear-gradient
( 135deg,
#F0FF00 10%, #58CFFB 100%
);
我们只需要关注橙色部分就可以了
#XXXXXX
是前后的
颜色编号
10%和100%是
颜色位置
deg是角度 （可以不管）
把它运用到软件中就OK了
https://uigradients.com/#SummerDog
这个网站版面很大气
有
两种使用方法
第一种
随缘
一直按>翻页
随机挑选出现的渐变色
https://gradient.shapefactory.co/
可供选择的配色更多
渐变更加精致
是
四阶渐变
可以在线调整角度和色彩饱和度
https://webgradients.com/
180个线性渐变的免费集合
轻松复制CSS3跨浏览器代码
http://www.karlei.cn/
突然看到一个中文网站
是不是有点感动
除了纯色、渐变色和多色配色
比较特别的
是一个
上传图片生成配色
的功能
可以让系统默认抓取
也可以手动抓取图中的大色块
一张图片的配色就被我们copy走啦！
这个网站还有
在线调色
的功能
算是比较全面专业的配色网站了
最重要的是
它还是个
中文网站
啊！
我没有说自己英文不好的意思
只是我们公司的网速太烂了
每个色板的右下角可以看到上传时间
如果你对自己的审美没自信
可以参考左下角的
点赞人数
挑最受欢迎的准没错
Adobe霸霸出的配色网站
虽然网站不怎么好看
功能却
专业
强大
不懂对比色、同类色、类似色这些概念是啥？
不要紧 这个网站知道啊
选取你想采用的
配色规则
还有色彩模式
从图片提取颜色的功能它也有
但是想复制色号需要登录
所以这功能我就不太推荐了
https://color.hailpixel.com
一个很酷的
自助配色网站
移动鼠标即可换色
选好一组颜色后
点击页面右方即可增加一种颜色
操作以此类推
想搭配几个颜色都可以
https://www.palettable.io/91B324
和hailpixel相似
享受皇帝般的翻牌快感
碰到不喜欢的颜色
就点
【dislike】
碰到合口味的
就点
【like】
每确定一个颜色就会出现一个新色
https://peiseka.com/
也是一个中文网站
四色配色
https://www.schemecolor.com/
这个网站有点厉害
什么类别的配色它都有
平面设计、各国国旗标准色、
网页配色、品牌配色、
婚礼
配色
肤色、季节等……
点击网站右上角的
Menu
就能看到
光是肤色就有整整三页
一页就有辣辣多
比蕾哈娜彩妆的粉底色号还多
可以移动、修改、下载配色
存起来以后随时都可以用啦
UI设计的配色除了美观性
还要考虑
可读性
和清晰度
下面这两个网站就很适合UI设计师
http://www.flatuicolorpicker.com
网站简单明了的把颜色分成了
七个色系
分别是红、紫、蓝、绿、黄、橙、灰
https://yeun.github.io/open-color/
