推荐多款好看的报表表单配色方案

2023年12月6日发(作者：记事作文300字)

-

推荐多款好看的报表表单配色方案

目前发现，大家大部分心思都是花在开发上面，对配色方面不会花太多时间精力，可能大家也不知道怎么调好看，所以一般就随意弄点颜

色，让报表不至于简陋，甚至直接就不给配色了。没有做美工的报表一般不会让人厌恶，但总是差强人意，而好的配色总能让领导眼前一

亮，让报表得到额外加分。

为了方便大家日后给报表做配色方案，这里我列举几个配色方案，方便大家日后的报表开发，让大家辛苦做出来的报表得到更高的分值。

（配上各个报表配色方案的 十六进制颜色码 和 RGB颜色值 ）

方案1（科技感1）：

页面背景：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）

边框：无

方案2（科技感2）：

页面背景：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）

边框：无

方案3（淡蓝+淡灰）：

页面背景：F7FAFD（247,250,253）

字体样式：微软雅黑

标题背景：E2E9F5（226,233,245）

标题字体：459DBF（69,157,191）

背景2：F3F3F3（243,243,243）

字体2：656565（101,101,101）

背景3：FFFFFF（255,255,255）

字体3：656565（101,101,101）

边框：A7A7A7（167,167,167）方案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）方案5（淡蓝+淡紫）：

页面背景：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）方案6（紫色）：

页面背景：F7FAFD（247,250,253）

字体样式：微软雅黑

标题背景：无

标题字体：026392（2,99,146）

背景1：636994（99,105,148）

字体1：FFFFFF（255,255,255）

背景2：ABB4FF（171,180,255）

字体2：3E4A5B（62,74,91）

背景3：D1DDF3（209,221,243）

字体4：3E4A5B（62,74,91）

边框：FFFFFF（255,255,255）方案7（灰色）：

页面背景：F7FAFD（247,250,253）

字体样式：微软雅黑

标题背景：无

标题字体：026392（2,99,146）

背景1：BCC7D4（188,199,212）

字体1：3E4A5B（62,74,91）

背景2：F0F0F0（240,240,240）

字体2：3E4A5B（62,74,91）

背景3：E6E6E6（230,230,230）

字体4：3E4A5B（62,74,91）

边框：FFFFFF（255,255,255）方案8（亮蓝）：

页面背景：无背景

字体样式：微软雅黑

标题背景：无

标题字体：0D6FCC（13,111,204）

背景1：339DDD（51,157,221）

字体1：FFFFFF（255,255,255）

背景2：C0EAF7（192,234,247）

字体2：000000（0,0,0）

背景3：FFFFFF（255,255,255）

字体4：000000（0,0,0）

边框：CCCCCC（204,204,204）（虚线）方案9（蓝色）：

页面背景：无背景

字体样式：微软雅黑

标题背景：无

标题字体：5393DA（83,147,218）

背景1：488DD9（72,141,217）

字体1：FFFFFF（255,255,255）

背景2：86BBE7（134,187,231）

字体2：000000（0,0,0）

背景3：E8F0F9 232,240,249）— FFFFFF（255,255,255）

字体4：000000（0,0,0）

边框：D0D0D0（208,208,208）方案10（亮绿）：

页面背景：无背景

字体样式：微软雅黑

标题背景：无

标题字体：18782B（24,120,43）

背景1：349C49（52,156,73）

字体1：FFFFFF（255,255,255）

背景2：F0F7F1（240,247,241）

字体2：000000（0,0,0）

背景3：FFFFFF（255,255,255）

字体4：000000（0,0,0）

边框：C2DFC2（194,223,194）方案11（深蓝+淡灰）：

页面背景：无背景

字体样式：微软雅黑

标题背景：52A8E6（82,168,230）→1A63AE（26,99,174）（渐变色）

标题字体：FFFFFF（255,255,255）

背景1：12529A（18,82,154）

字体1：FFFFFF（255,255,255）

背景2：F7F7F7（247,247,247）

字体2：7B7B7B（123,123,123）

背景3：EEEEEE（238,238,238）

字体4：7B7B7B（123,123,123）

边框：无边框

在日常的工作中，总有一些报表、图表的配色方案是值得我们参考的，但是因为没有颜色抓取工具导致大家没办法把配色给取下来。下面介

绍一下大家平时可以怎么抓取颜色：

平时大家都会登录QQ或微信，可以利用截图功能，抓取颜色：

① 同时按住 Ctrl + Alt + A，进入截图；

② 按住 Ctrl 键，光标处会显示光标位置对应RGB的6位十六进制颜色码；

③ 松开 Ctrl 键，光标处会显示光标位置对应RGB的3串RGB颜色值。

用好上面的取色技巧，可以大大加快项目组的开发速度和配色技能。

引用其他博主的部分总结：

① 标题部分的颜色要比次标题和数据部分颜色显眼，可以引用渐变色；

② 标题用微软雅黑和黑体字体时候，效果会更好，也可以加粗；

③ 表格的数据要对齐，单元格间距适中。对齐的时候，如果有金额数字的对比，最好用右对齐，一般居中对齐多一些；

④ 灵活用表格的边框，可以得到更好的一些效果，配合突出立体感（立体感的图表一般用灰色、浅灰、银色）；

⑤ 标题的位置要注意，居中、居左或居右都会有不同的效果；

⑥ 欧美风格的报表，一般是灰色、蓝色、深红色搭配，行与行间多以同色调的深浅区分，一般没有框线；

⑦ 可以在表头添加一些小图标，效果也不错的。

-