在日常工作中,经常要用PPT来做工作汇报,或者使用Excel做数据报告,经常会涉及到配色这个难题,人是一个视觉动物,在什么情况下用什么颜色最佳?这个问题其实就是UI设计的范畴了,这里就总结下将UI设计原理怎么应用到我们日常工作中,比如Excel做表,PPT呈现,培养自己的色彩感知能力,久而久之就会对色彩很敏感了。既然说到色彩,当然是我们生活的大自然最美好不过了,多去感受大自然的美还是有助于我们对美的感知。
![](https://img.haomeiwen.com/i8720438/4acda4fbe206ec0f.png)
一、六种配色理论方案
方案1. 补色搭配(A complementary combination)
互补(或称对比)色是指伊登色环上相对位置上的两种颜色,搭配在一起,可以打造活力四射的强烈视觉效果,特别是在颜色饱和度最大的情况下。
![](https://img.haomeiwen.com/i8720438/ea8b5184f540a6e8.png)
方案2. 三角对立配色(The triad )
采用等边三角上的三种颜色进行搭配,可以在维持色彩协调的同时,制造强烈的对比效果。即便采用淡色或者不饱和色,这种搭配也可以营造出生气盎然的效果。
![](https://img.haomeiwen.com/i8720438/75b44e5f4dfd05c7.png)
方案3. 类似色搭配(An analogous combination)
选择色环上相邻的2到5种(最好是2到3种)颜色进行搭配,可以打造出一种平和而又可爱的印象。下图为5种类似色组合的一个例子。
![](https://img.haomeiwen.com/i8720438/d13ee14253d67e78.png)
方案4. 分裂补色搭配(The split complementary combination)
是补色搭配的变种。选定某主色之后,选择色环上与它的补色相邻位置上的两种颜色与之搭配。此种搭配既有对比,又不失和谐。如果你对补色搭配没有自信的时候,不凡用此方案代替。
![](https://img.haomeiwen.com/i8720438/306182066c0f3a82.png)
方案5. 四元组配色(The tetrad )
选定主色及其补色之后,第三种颜色可选择色换上与主色相隔一个位置的颜色,最后一个颜色选择第三种颜色的补色,在色环上正好形成一个矩形。举例见下图。
![](https://img.haomeiwen.com/i8720438/00dc0849c1aafe62.png)
方案6. 正方形配色(The square)
利用色环上四等分位置上的颜色进行搭配。这种方案,色调各不相同但又互补,可以营造出一种生动活泼又好玩的效果。举例如下图。
![](https://img.haomeiwen.com/i8720438/896d0954509cd222.png)
各种颜色的搭配推荐
这里推荐几个网站,基本上可以解决各种图表设计和PPT配色。
一、 LOL Colors
![](https://img.haomeiwen.com/i8720438/00e47661641399ad.png)
这个萌萌的网站配色低调而且简单实用,从网站上的颜色搭配也能知道某些颜色组合起来可能会有意想不到的效果。将鼠标光标移动到颜色上方就会立刻显示色码。你可以选取喜欢的颜色后直接复制代码使用到设计中。可以说非常便捷了。
二、在线配色神器(网站点击标题即可)
1、 Color Claim
![](https://img.haomeiwen.com/i8720438/69ab4f9ad39f64a3.png)
Color Claim它是一个设计大师自建的配色网站,每个都可以直接拿来取用。打开网站都是看起来很普通的图片,其实都是从大神个人多年来的设计中提取出的配色,凝结着配色智慧的结晶。
虽然看起来都很简单,颜色不超过三种,一共102款,但每个都有其鲜明的风格特色,我们总能从中找到适合自己的配色风格。
2、Material Design Colors
![](https://img.haomeiwen.com/i8720438/212e46c34a49b842.png)
在这个网站可以找到19种颜色的14种渐变色的十六进制颜色码。
3、Colourco
![](https://img.haomeiwen.com/i8720438/a14fa21333e29326.png)
这个网站有多重选择,就是根据上面说的色谱原理来设计的,
单色Monochrome:表示一种颜色不同色阶选择
![](https://img.haomeiwen.com/i8720438/6cf4940e7334aea1.png)
单色和深灰色:单色和深灰色搭配在一起的配色方案
![](https://img.haomeiwen.com/i8720438/3bf93e1111617639.png)
单色和浅灰色:单色和浅灰色搭配在一起的配色方案
![](https://img.haomeiwen.com/i8720438/4eba41dc54bdb87c.png)
类比:类似上面的类似色配色方案
![](https://img.haomeiwen.com/i8720438/93c1df5986bedffb.png)
互补色
![](https://img.haomeiwen.com/i8720438/72a84da6b0b10cdf.png)
三角对立
![](https://img.haomeiwen.com/i8720438/aea081d08526e829.png)
四元组配色
![](https://img.haomeiwen.com/i8720438/93fa6cfeeafcffcf.png)
简单介绍一下在这个网站里可以通过鼠标滑动来改变颜色:
色调:鼠标左右移动或「Ctrl+ ← + →」
亮度:鼠标上下移动或「Ctrl + ↑ + ↓」
饱和度:Ctrl+ Shift + ↑ + ↓
鼠标单击锁定颜色,点击“垃圾桶”图标删除颜色
2、RGB颜色值与十六进制颜色码转换工具
但是在Office办公软件里只有RGB颜色值,所以就需要有一个工具将他们转化,请看下面这个网站
![](https://img.haomeiwen.com/i8720438/b31feebebe5579be.png)
3、当你看到一种颜色,但是不知道它的RGB颜色值,又该怎么办?
其实我们日常截图的时候就会出现这个RGB值。试了下钉钉的截图没有用,但是使用了搜狗输入法里面的截图工具,来看看怎么获取。
![](https://img.haomeiwen.com/i8720438/488489872f9c998c.png)
只要把鼠标放到你想获取的颜色范围里,就会出现(255,102,0)这个就是颜色的RGB颜色值。
![](https://img.haomeiwen.com/i8720438/34e3bdb198560544.png)
三、理论应用
话说这么多理论和工具到了实际运用还是不会,这个就需要多实践才可以运用自如,这种专业性配色本来就是UI的技术活,我们只要懂的基本运用就好。小编也是对数据可视化感兴趣,所以把这些总结下来,接下来我也会出几篇文章怎么将这些技术运用到Excel制图和PPT配色。
1、这里介绍一个需要用到上面的东西:阿里巴巴矢量图标
相信大家一定在PPT里面经常会用到一些矢量图标:
![](https://img.haomeiwen.com/i8720438/d19f516d6dce70fb.png)
这些图标是没有颜色的,需要你自己配色,然后下载下来
![](https://img.haomeiwen.com/i8720438/7c71d6e0768550ab.png)
这里介绍几个其他的矢量图标网站:超实用的矢量图标库
一份优秀的PPT都是由很多小的组件构成的,文子,图标,图表,各种需要展现出来的,但其实最核心的是PPT的逻辑思维,这点也是最需要学习的。
2、来看看几个Excel图表设计
![](https://img.haomeiwen.com/i8720438/cb3baa0bb166a43f.png)
更多内容,后面还需继续更新怎么运用这些到Excel图表和PPT设计。
参考文字链接:
1、https://brightside.me/article/the-ultimate-color-combinations-cheat-sheet-92405/
2、收藏这7个在线配色神器,再也不愁配色灵感了
网友评论