经常有小伙伴吐槽：“一顿操作猛如虎，一看报表还是土”，报表配色和设计常常让报表开发者们愁秃了头，今天就给大家分享一篇图表配色心得，列举了一些图表常用配色和一些配色误区，希望给大家带来一些帮助：
1、常见配色误区1、颜色色值相差太大，比较刺眼
2、采用一些非主流的颜色和效果，太过个性
3、文体颜色偏淡，看起来累人
注：好看的图表应该以自然、不刺眼为主，给人以舒适的感觉， 过多闪亮的颜色会给领导晃眼的感觉，特别是给上级的图表，更要做到这点。
2、表格颜色搭配1、表格常见搭配
在此列举四个常用的图表搭配 ：
方案1（科技感1）方案2（科技感2）：页面背景：34405A（52,64,90）
字体样式：微软雅黑
标题背景：36507E（54,80,126）
标题字体：FFFFFF（255,255,255）
背景1：222C44（34,44,68）
字体1：FFFFFF（255,255,255）
背景2：222C44（34,44,68）
字体2：FFFFFF（255,255,255）
背景3：263856（245,245,245）
字体3：FFFFFF（255,255,255）
边框：无
方案3（淡蓝）：页面背景：364662（54,70,98）
字体样式：微软雅黑
背景1：587AB3（88,122,179）
字体1：FFFFFF（255,255,255）
背景2：587AB3（88,122,179）
字体2：FFFFFF（255,255,255）
背景3：445E89（68,94,137）
字体3：9DB5DB（157,181,219）
背景4：3C5276（60,82,118）
字体4：9DB5DB（157,181,219）
边框：无
方案4（淡蓝+淡紫）：页面背景：F7FAFD（247,250,253）
字体样式：微软雅黑
标题背景：无
标题字体：026392（2,99,146）
背景1：C6DAF2（198,218,242）
字体1：3E4A5B（62,74,91）
背景2：EAF6F6（234,246,246）
字体2：3E4A5B（62,74,91）
背景3：F5F8FD（245,248,253）
字体3：3E4A5B（62,74,91）
边框：FFFFFF（255,255,255）
页面背景：F7FAFD（247,250,253）
字体样式：微软雅黑
标题背景：无
标题字体：026392（2,99,146）
背景1：ABB4FF（171,180,255）
字体1：FFFFFF（255,255,255）
背景2：B7CEF9（183,206,249）
字体2：3E4A5B（62,74,91）
背景3：F5F5F5（245,245,245）
字体4：3E4A5B（62,74,91）
边框：FFFFFF（255,255,255）
2、 表格搭配注意点
标题应该显眼，以让读者了解到表格表达的是啥。可以选择色度深点的颜色 如深蓝，深绿，白色等，字体也可以较正文大一号，以进一步突出。字体选择一般 我搭配微软雅黑或者黑体，适当加粗效果也不错。数据对齐，一般正文居中对齐较多，金额可以适用右对齐。整体看起来比较美观。如想增加美观效果和可读性，可以在文字中添加小图标，如 TOP1-3 的皇冠等等。3、图表颜色搭配1、图表配色科普
标准色：通过整体颜色规范提取和增加，提炼出 6 个标准色，颜色使用较少时，首选标准色。
分别为：#60acfc 100% 、#32d3eb 100% 、#5bc49f 100% 、#feb64d 100% 、#ff7c7c 100% 、#9287e7 100%
基准色：通过标准色扩展出 24个基准色，相互链接组成基准色环，如果图表用色数量较多，标准色无法满足颜色要求，可以从基准色中进行拓展与标准色近似的色值。
扩展色：基础色相可以通过叠加 20% 白或者 10% 黑来扩展出不同明度的颜色，应用于颜色更加丰富的使用场景。
颜色对比型：推荐图表颜色之间对比较为明显的场景下使用；
冷色：推荐图表偏冷色系的情况使用；
暖色：推荐图表偏暖色系的情况使用。
配色示例：
2、透明度使用
在线性面积图表中，也要重视透明度这个因素。通常使用透明度时，图表会有很多堆叠层次，我们需要做到使每一个前景层都能够在背景层之上良好地显示，并且不产生相互干扰。
此时建议数据之间选择不同色相，面积区域使用 10% 不透明的标准色，建议数据叠加数量不超过4个，超过 4 个不建议使用线下面积图表
3、渐变色使用
有些情况下图表可以使用渐变色填充图表来表现特定场景，此时注意颜色选取为同一色系，渐变层级不宜过大，整体颜色需要与平台保持协调一致。
4、背景色使用
图表背景颜色必须要很好的衬托图表主体，又不产生喧宾夺主的效果。目前常见的背景色有深色系和浅色系两种。
深色系：
优点：更好的凸显主体，建立良好的视觉层次，反应图表内容，视觉吸引力强；
缺点：可读性低、对配色水平要求较高；
浅色系：
优点：适用性广，可读性高；
缺点：图表内容不易聚焦；
背景色建议：#ffffff#f7f7f7#333333
5、按图表主题的配色推荐
我们举以下电脑税务、保险、卫生、金融等行业的一些常规配色
金融：金融听起来就给人一种很高端，商务的感觉，需要选用一些低饱和度的图表配色，让人感觉高端、专业。
保险：保险行业数据图表一般浅色为主，给人一种舒适安心的感觉，选用高亮度的图表颜色可以产生安全放心的感觉。
司法：司法部门为政府单位，象征着权威。司法类数据图表可选用较为严谨深层的颜色，以突出政府的权威性。
教育：教育行业代表了希望和未来，所以我们的数据图表选用的颜色也用了更加活力的搭配方案。
电脑医药/药监：医药行业会让人想到白衣天使，需要有健康、干净的图表配色，故这边给出清新的，干净的色值样例。
电商\新零售：新零售、电商等行业需要有促销氛围，给人眼前一亮的感觉。故用到高明度、高饱和度的色彩凸显营销数据。
6、按图表类型的配色推荐
饼图配色：饼图由于其表达的信息有限，通常采用单色系配色，通过同一颜色的深浅明暗来表达数据的大小，示例如下：
电脑柱形图配色：柱形图以基于主题，并在其基础上做区分，每个分类推荐用鲜明点的颜色，用以做为区分，示例如下：
折线图配色：折线图绝非一个线条这么简单，华丽的、沉稳的、活泼的、动态的等等，线条的美化其实大有学问。折线图在分类不多的情况下可以参照淡色系配色，分类多的情况下则采用鲜明点的配色，但不易选取太刺眼的颜色，避免晃眼。示例如下：
散点图配色：散点图的存在是为了做类和类的区分，这边不推荐单系列色，因为散点图点数众多，单系列色区分不是很明显，所以这边推荐一些对比度大的颜色进行填充。当然撞色方案是不推荐的。示例如下：
发散框架图配色：发散框架图又称传播图，他可以用来表示信息的传递和发散关系，因此层和层之间色值需要比较明显，一般选择一些比较鲜明的颜色，示例如下：
地图配色：地图配色和主题比较有关，像深色主题则地图配色和旋深蓝色系和黑色系比较偏商务，至于浅色主题则可以选择素雅的地图搭配。而且地图板块的色系可以选的比较相近，如华北区一个大色系，华南区一个大色系。示例如下：
7、配色网站推荐
Material Palette：https://www.materialpalette.comFlat UI Colors: http://flatuicolors.com/Coolors: http://coolors.co/Brand Colors: http://brandcolors.net/中国风配色: http://zhongguose.comuiGradients: http://uigradients.co
