数据可视化配色方案指南

数据可视化配色方案指南

专业设计师精选的配色方案，让您的数据图表更加美观易懂

蓝色专业系

适合企业报表、金融数据展示，传达专业、可信赖的感觉

配色方案：

 深蓝 #1e3a8a

 主蓝 #3b82f6

 亮蓝 #60a5fa

 淡蓝 #93c5fd

 极淡蓝 #dbeafe

应用示例：月度销售趋势

   1月    45万  |      2月    60万  |      3月    52万  |      4月    68万  |      5月    75万

珊瑚活力系

适合市场营销、用户行为分析，充满活力和吸引力

配色方案：

 橙红 #f97316

 珊瑚 #fb923c

 桃色 #fdba74

 浅桃 #fed7aa

 奶油 #ffedd5

应用示例：用户转化率分析

   访问    12%  |      注册    28%  |      激活    45%  |      付费    68%

紫色优雅系

适合创意产业、科技产品，展现创新和独特性

配色方案：

 深紫 #581c87

 主紫 #9333ea

 亮紫 #a855f7

 淡紫 #c084fc

 极淡紫 #e9d5ff

绿色自然系

适合环保、健康、农业数据，传达生长和和谐的感觉

配色方案：

 深绿 #14532d

 主绿 #16a34a

 亮绿 #22c55e

 淡绿 #4ade80

 极淡绿 #dcfce7

多彩分类系

适合需要区分多个类别的数据，每个颜色都有足够区分度

配色方案：

 红 #ef4444

 橙 #f59e0b

 绿 #10b981

 蓝 #0ea5e9

 紫 #8b5cf6

 粉 #ec4899

单色渐变系

适合展示数据密度、热力图等需要连续变化的场景

配色方案：

 深蓝灰 #0f172a

 深蓝 #1e40af

 蓝 #3b82f6

 亮蓝 #60a5fa

 淡蓝 #93c5fd

 极淡蓝 #dbeafe

 蓝白 #eff6ff

数据大屏专用

为深色背景的大屏展示优化，颜色饱和度高，视觉冲击力强

配色方案：

 霓虹蓝 #00d4ff

 霓虹绿 #00ff88

 霓虹粉 #ff0080

 霓虹橙 #ffaa00

 霓虹紫 #b967ff

使用建议

1. 根据数据类型选择配色
 • 分类数据：使用对比度高的不同颜色（如多彩系）
 • 顺序数据：使用同一色系的不同深浅（如渐变系）
 • 发散数据：使用从负到正的双色渐变（如红到蓝）

2. 无障碍设计考虑
 • 确保颜色对比度满足WCAG标准（至少4.5:1）
 • 不要仅依赖颜色区分数据，可结合形状、纹理
 • 使用色盲友好的配色方案（避免红绿组合）

3. 品牌一致性
 • 优先使用品牌主色调
 • 保持整体风格统一，避免过多颜色
 • 建立团队共享的配色规范文档

4. 技术实现建议
 • 将配色方案定义为CSS变量或JS常量
 • 支持主题切换功能（亮色/暗色模式）
 • 使用CSS预处理器（Sass/Less）管理颜色变量

欢迎关注公众号：数据可视化仓库

DataVRAP 官方团队

专注低代码数据可视化，定期分享模板与技巧。