首页 > 编程知识 正文

报表配色最佳方案,报表色彩搭配

时间:2023-05-04 20:03:49 阅读:275811 作者:268

目前发现,大家大部分心思都是花在开发上面,对配色方面不会花太多时间精力,可能大家也不知道怎么调好看,所以一般就随意弄点颜色,让报表不至于简陋,甚至直接就不给配色了。没有做美工的报表一般不会让人厌恶,但总是差强人意,而好的配色总能让领导眼前一亮,让报表得到额外加分。

为了方便大家日后给报表做配色方案,这里我列举几个配色方案,方便大家日后的报表开发,让大家辛苦做出来的报表得到更高的分值。(配上各个报表配色方案的  十六进制颜色码  和  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颜色值。
用好上面的取色技巧,可以大大加快项目组的开发速度和配色技能。

引用其他博主的部分总结:
① 标题部分的颜色要比次标题和数据部分颜色显眼,可以引用渐变色;
② 标题用微软雅黑和黑体字体时候,效果会更好,也可以加粗;
③ 表格的数据要对齐,单元格间距适中。对齐的时候,如果有金额数字的对比,最好用右对齐,一般居中对齐多一些;
④ 灵活用表格的边框,可以得到更好的一些效果,配合突出立体感(立体感的图表一般用灰色、浅灰、银色);
⑤ 标题的位置要注意,居中、居左或居右都会有不同的效果;
⑥ 欧美风格的报表,一般是灰色、蓝色、深红色搭配,行与行间多以同色调的深浅区分,一般没有框线;
⑦ 可以在表头添加一些小图标,效果也不错的。
 

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。