可视化配色方案建议

以下方案面向“增长看板 + A/B 测试”，以“融合品牌主色 + 漏斗关键突出”为核心目标，给出可落地的色板结构、映射规则与实现方法。方案采用“角色化色彩体系”（品牌主色系、语义色、类别色、中性色）并强调对比度、色盲可访问与统计显著性表达的一致性。

一、设计目标与原则

• 可读性优先：图表主体以中性色为基底，颜色仅用于表达信息层级与状态，避免色彩噪声。
• 品牌一致：品牌主色承担“主题/关键”角色，贯穿关键数字、关键阶段、显著胜出结果。
• 语义清晰：正向/负向/警示/不显著使用语义色与图形编码组合（颜色+线型/透明度/纹理）。
• 可访问性：确保文案/标注对比度≥4.5:1；避免仅用红/绿区分；考虑常见色觉缺陷（Deuteranopia/Protanopia）。

二、色板结构（角色化）

1. 品牌主色序列 Primary（从品牌主色生成）

• 用途：关键KPI、漏斗关键阶段、高优先级序列、胜出Variant。
• 结构：P50–P900（浅→深），建议主用P500/P600为“强调”，P200/P300为“背景/面积填充”，P700/P800用于小面积强强调。
• 生成建议（HSL）：以品牌主色H为基准，构建9阶序列。示例步进（可依据品牌色实际微调）：
  • L（亮度）：从P50到P900递减，步长约6–8%，整体跨度≈45–55%。
  • S（饱和）：中段（P400–P600）略高；极浅/极深端适当降低饱和度，避免偏灰或偏浑浊。
  • 同步生成透明度层（alpha 0.12/0.2/0.32）用于阴影、置信区间与选区高亮。

2. 中性色 Neutral

• 用途：背景、坐标轴、网格、非关键元素、对照组(Control)默认色。
• 结构：N50–N900，背景建议N25–N75（极浅），网格线N150–N200（细），文本：正文N800/N900，次要说明N600/N700。
• 对照组(Control)建议用N500–N600为主线，N300–N400为置信区间填充（alpha 0.2），避免与Variant形成“误导性显著”对比。

3. 语义色 Semantic

• Success（正向）：默认使用品牌主色系（如P600）表达“正向/提升”，增强品牌一致性。
• Warning（注意）：琥珀/橙系（S≥70%，L≈55%），用于数据量不足、边界值或潜在风险提示。
• Danger（负向）：红系（S≥70%，L≈50%），用于显著下滑、漏斗流失、负向效应。
• Not significant（不显著）：中性灰（N400–N500）+ 降低不透明度，搭配虚线/点线。

4. 类别色 Categorical（围绕品牌主色构建）

• 用途：多序列时区分不同Variant或渠道。
• 生成策略：
  • 以品牌主色H为中心，构建“近似色带”（H±20°）与“分裂互补色”对（H+150°、H+210°）作为备选强调色，控制数量≤6。
  • 保持各类别色在相近亮度级别，避免仅因亮度差导致视觉偏好。
  • 确保任何两色之间色相差≥35°且色相对比+亮度对比兼具，以兼容色觉缺陷。

三、图表映射规则

1. 漏斗图（突出“关键阶段”）

• 非关键阶段：使用中性色梯度（N200→N400），保持整体素雅。
• 关键阶段（当前优化焦点或瓶颈）：使用P600（填充）+ P700（边框/标签），形成高对比聚焦。
• 流失量/流失率：Danger系（红），强饱和+中等亮度；如为“轻微风险/待观察”，用Warning（橙）。
• 转化率标注：文本与箭头使用N800；若为显著提升，标注用P600；显著下降用Danger。
• 对比多个渠道/版本漏斗：控制台每个漏斗仅突出一个“关键阶段”，其余保持中性，以免过度着色。

2. A/B 测试（控制偏见、强调显著）

• 控制组 A（Control）：主线N550±50；置信区间填充N300（alpha≈0.2）；标记符号空心。
• 变体组 B/C…（Variant）：使用品牌主色系或类别色系之一，保持与Control亮度相近。推荐：
  • B：P600（主线/柱面），区间P400（alpha≈0.2）
  • C：类别色C1（如H+20°），区间用其浅阶（alpha≈0.2）
• 胜出标识：仅当达到预设显著阈值（例如α=0.05、BF或PPS门槛）时，将胜出序列提高一个饱和/亮度等级（如P700）或加粗线宽；未显著不改变主色，避免“色彩诱导”。
• 效应图（差值/提升率）：使用发散（Diverging）色带，以品牌主色为正向端，Danger为负向端，中性为N400。
  • 0 基线：N500 实线
  • 正向：由P200→P700的连续梯度
  • 负向：由浅红→Danger的连续梯度
  • 不显著：整体降低不透明度或改用N系
• 多变体柱状/条形：Control用N系，变体按类别色映射，柱边框统一N600以稳定轮廓；误差线用同色深一阶。

3. 时间序列/累计转化/留存

• 多序列时：Control灰 + 单一强调（当前关注Variant用P600），其余变体降饱和或降透明。
• 置信区间/显著窗口：用序列色的浅阶填充（alpha 0.12–0.24），显著区加底纹或上方标记带。

4. 热力图（如留存/转化强度）

• 单指标：顺序色带，以品牌主色为高值端（P200→P700），低值端接近白/极浅中性（N50/P50）。
• 双向偏差：使用发散色带（负向红–中性N–正向品牌主色）。

四、对比度与可访问性

• 文本/图标与背景对比度≥4.5:1；小文字或细线建议≥7:1。
• 不用纯红/绿对立表达；推荐“品牌蓝/紫/青 vs 橙/红”的冷暖对比。
• 同时提供形状/线型/纹理编码：Control=虚线/空心，Variant=实线/实心；不显著=降低透明度。
• 使用色盲模拟（Deuteranopia/Protanopia）验证类别色可分辨；必要时增大明度差或添加图案填充。

五、实施要点与生成方法

1. 从品牌主色生成序列（伪代码）

• 输入：brand_hex
• 转换到HSL(H,S,L)
• 生成P50..P900：
  • 预设亮度序列L_seq=[92, 86, 78, 68, 58, 50, 42, 34, 26]（示例，可依品牌调优）
  • 预设饱和修正S_seq=[-10,-6,-3,0, +4, +6, +4, 0, -6]（相对S的百分比调整）
  • 对每一档：P_i = H, S*(1+S_seq[i]%), L_seq[i]
• 生成透明度层：alphaTokens=[0.12, 0.2, 0.32] 用于阴影/区间/选区
• 中性色：在同一亮度网格上定义N50..N900，避免色偏（S≈0–5%）

2. 类别色生成

• 以品牌H为中心，派生：
  • 相邻色：H±20°（保持家族感）
  • 分裂互补：H+150°、H+210°（提供冷暖对照）
• 将类别色的L校准到与P500相近（±5%），以减少“明度偏见”。

六、示例色板（占位示例，可替换为自家品牌主色）

• Primary（示例主色偏冷）：P700 #1F5BD7, P600 #2D6CDF, P500 #4C84E8, P300 #8FB0F3, P100 #EAF1FF
• Neutral：N900 #111827, N700 #374151, N500 #6B7280, N300 #D1D5DB, N100 #F3F4F6, N50 #FAFAFB
• Semantic：Success=用Primary，Warning #F59E0B, Danger #EF4444, Info=Primary
• Categorical（围绕主色）：C1（H+20°）#5F7AE6, C2（H-20°）#2F8ACB, C3（H+150°）#E37A4A, C4（H+210°）#62B06A 说明：以上为演示值，实际应从品牌主色计算并经可访问性与色盲模拟验证后定稿。

七、在关键图表中的具体用法速查

• 漏斗：非关键N300填充；关键段P600填充+P700标签；流失Danger；小计/箭头N800。
• A/B 柱状：A=N500；B=P600；置信区间=各自浅阶(alpha 0.2)；显著胜出将B升至P700或加粗。
• 效应条（uplift）：负向→Danger梯度，0= N500线，正向→Primary梯度；不显著降透明度。
• 时间序列：Control灰实线；关注Variant用P600实线；其他变体浅色或虚线。
• KPI卡：正向数值用P600，负向用Danger，环比/同比箭头颜色随之变化；未达显著阈值用N600。

八、质量保障与发布

• 测试：WCAG对比度、色盲模拟、投影/屏幕多设备对比、打印黑白可读性。
• 限制色彩密度：单个视图中色彩面积占比不超过总面积的20–30%，避免“彩虹化”。
• 统一主题变量：以token管理（Pxxx/Nxxx/Danger/Warning/alpha层），在BI工具（Tableau/Power BI/ECharts/Vega-Lite）中统一引用，保证跨图一致。

通过以上方案，可在增长看板与A/B测试中：以品牌主色作为“正向/关键”的稳定锚点，中性色控噪，语义色表达风险与方向，利用发散与顺序色带处理提升与漏斗，以及用显著性规则决定“强调”的触发时机，最终实现美观、一致且统计严谨的可视化表达。

以下为可直接用于 Web/App 的“统一图表主题与色板规范（含色盲友好与对比度建议）”。方案兼顾品牌中立、跨框架可实现性（ECharts/Chart.js/D3 等）与 WCAG 2.2 AA 无障碍要求。

1. 目标与约束

• 一致性：不同图表类型共用一套设计令牌（颜色、线宽、网格、交互态）。
• 可访问性：满足 WCAG 2.2 AA 中的非文本图形对象对比度≥3:1；文本标签对比度≥4.5:1（大文本≥3:1）。
• 色盲友好：对常见色觉缺陷（Deuteranopia/Protanopia/Tritanopia）仍可区分；颜色不作为唯一编码。

2. 基本无障碍与对比度原则

• 背景 vs 数据元素：对比度≥3:1（线、柱、面积、点）。
• 文本/标注：正文与关键指标≥4.5:1；大号或粗体≥3:1。
• 系列彼此区分：优先利用色相差 + 明度差（建议 OKLCH/CIELAB 中 ΔL≥25 或相近），叠加形状/线型/纹理区分。
• 叠加关系：面积图和热力图优先用顺序色带（感知单调、明度单调），避免“彩虹色带”。
• 不能仅靠颜色：用点形（○ △ □）、线型（实/虚/点划）、纹理（斜线/点状）和直接标注。

3. 统一主题设计令牌（Light / Dark）

• Light 主题
  • 背景-bg: #FFFFFF
  • 面板-surface: #FAFAFA
  • 坐标轴/文字-textPrimary: #1F2328（主文本）、textSecondary: #6B7280（次要）
  • 网格-grid: #E5E7EB（主网格），#F1F3F5（次网格）
  • 边框-stroke: #D1D5DB
  • 选中/高亮-highlight: #7C3AED（紫，强调态），hoverAlpha: 0.12
• Dark 主题
  • 背景-bg: #0B0F14
  • 面板-surface: #111827
  • 文字-textPrimary: #E5E7EB、textSecondary: #9CA3AF
  • 网格-grid: #2A2F36（主），#1C2229（次）
  • 边框-stroke: #374151
  • 选中/高亮-highlight: #A78BFA，hoverAlpha: 0.18
• 中性灰阶（两主题共用，用于禁用/分隔/参考线）
  • Gray-50 #F7F7F7, 100 #EFEFEF, 200 #E0E0E0, 300 #C6C6C6, 400 #A8A8A8
  • 500 #8B8B8B, 600 #6E6E6E, 700 #515151, 800 #323232, 900 #121212

4. 分类色板（Categorical，色盲友好）

• 推荐 A：Okabe–Ito 8 色（CVD 友好，广泛验证）
  1. 蓝 #0072B2
  2. 橙 #E69F00
  3. 天蓝 #56B4E9
  4. 绿 #009E73
  5. 黄 #F0E442
  6. 深蓝 #0072B2（与1相同，不重复使用，改用）藏青 #3B4A9A
  7. 朱红 #D55E00
  8. 洋红 #CC79A7 使用建议：
  • 首选顺序：蓝→橙→天蓝→绿→朱红→洋红→黄→藏青。
  • 避免将“黄”用于细线或小点（在浅色背景下对比度偏低），可用于填充大片区域或配深色轮廓。
• 推荐 B：Paul Tol Muted 9 色（CVD 友好、低饱和更稳重） [#332288, #88CCEE, #44AA99, #117733, #999933, #DDCC77, #CC6677, #882255, #AA4499] 使用建议：适合仪表板长驻视图、报表类。优先保证线/柱对比度，再考虑饱和度。

扩展超过 8–9 个系列的策略：

• 首选拆分为小倍图（small multiples）。
• 或分层编码：主 6 色 + 次级为同色系变明度/线型/点形；同时提供“聚焦/其余淡化”。

5. 连续色带（Sequential，感知单调、CVD 友好）

• 方案 S1：Viridis（推荐，深背景亦适用）
  • 端点与关键色：#440154 → #482878 → #3E4989 → #31688E → #26828E → #1F9E89 → #35B779 → #6DCD59 → #B4DE2C → #FDE725
  • 特性：明度单调递增、对色盲稳定。热力图、密度、面积堆叠透明度叠加均表现良好。
• 方案 S2：Cividis（黄-蓝调，色盲表现更稳）
  • 端点：#00204C → #44536A → #7E7E66 → #B2A96C → #FDE445
  • 适合等值面、地理底图叠加，文本可读性好。
• 方案 S3（灰阶，用于打印/高对比）：#111111 → #FFFFFF（或反转）

6. 发散色带（Diverging，用于偏差/正负）

• 方案 D1：蓝–灰–橙（基于 Okabe–Ito 端点，CVD 表现稳定）
  • 负端：蓝 #0072B2
  • 中性：浅灰 #F2F4F7（Light），深灰 #2A2F36（Dark）
  • 正端：橙 #E69F00
  • 生成方法（保证感知均匀）：在 OKLCH/CIELAB 空间从负端→中性、再到正端分段插值（建议 5/7/9 级），控制彩度 C 在 0.08–0.12 区间，明度 L 单调接近端点。
• 方案 D2：Blue–Orange（感知均匀版）
  • 负端 #2B6CB0 → 中性 #F5F7FA → 正端 #ED8936（Light）
  • Dark 模式中性改为 #2A2F36；端点轻度降明度以防眩光。

7. 语义状态色（用于 KPI/阈值/告警）

• Positive: #16A34A（绿，文本/线在 Light ≥4.5:1；Dark 版本 #4ADE80）
• Negative: #DC2626（红；Dark 版本 #F87171）
• Warning: #D97706（琥珀；Dark 版本 #FBBF24）
• Info: #0284C7（蓝；Dark 版本 #38BDF8）
• 注：用于柱/点填充时配深色轮廓或投影，以确保与背景≥3:1。

8. 线、点、网格与透明度规范

• 线图：主线宽 2.0–2.5 px，次级或对比线 1.5 px；强调线 3 px。
• 点图：半径 3–5 px；多点重叠启用抖动/透明度（alpha 0.6–0.8）。
• 面积图：填充 alpha 0.25–0.35；边界线与背景≥3:1。
• 柱图：分组柱间距 30–40%；柱边框 1 px，颜色为柱色加深 15–25%。
• 网格：仅保留主网格；Light：#E5E7EB / 0.7，Dark：#2A2F36 / 1.0；次网格弱化或隐藏。
• 参考线/阈值：颜色 #6B7280（Light）或 #9CA3AF（Dark），虚线 4–6 像素间隔；标注气泡白底深字（Light）/深底浅字（Dark），阴影提升可读性。

9. 交互与强调

• Hover：在原色基础提高亮度 8–12%（或加描边），并提升线宽 +0.5 px。
• 选中：统一使用 highlight 色（Light: #7C3AED / 0.12 背景晕圈；Dark: #A78BFA / 0.18）。
• 禁用/其余：降不透明度至 40–60% 或转为灰阶（Gray-300/500）。

10. 图表类型与默认色用法

• 折线/面积：使用分类色板顺序配色；超过 6 条线，改用 small multiples 或将次要线灰化。
• 柱/条：单系列用顺序色带或单色不同明度；多系列用分类色板，保持同类在相邻图中颜色一致。
• 热力图/等值面/栅格：使用 S1/S2 顺序色带；标注极值时用等值线+数值标注，不仅靠颜色。
• 偏差图/瀑布图：使用 D1/D2 发散色带；零线加粗，正负配不同形状端帽以加强识别。
• 地图：底图降饱和与对比；数据层使用 S2（Cividis）或定制顺序；边界线淡灰；交互区域加描边/阴影。

11. 对比度与色盲测试流程（建议纳入 CI）

• 对比度校验：计算元素与背景的相对亮度比值，图形对象≥3:1，文本≥4.5:1。
• 色盲模拟：对成品图在 Deuteranope/Protanope/Tritanope 模式下检查类别可区分性（推荐工具：Colorspacious、Coblis、Highcharts/Chrome DevTools 仿真、Figma Stark 插件）。
• 感知单调检查：顺序/发散色带在灰阶模式仍能正确表达大小/方向。

12. 实施示例（设计令牌）

• CSS 变量（可被 ECharts/Chart.js/D3 读取）
  • --chart-bg: #FFFFFF; --chart-surface: #FAFAFA; --chart-text: #1F2328; --chart-grid: #E5E7EB
  • --cat-1: #0072B2; --cat-2: #E69F00; --cat-3: #56B4E9; --cat-4: #009E73; --cat-5: #D55E00; --cat-6: #CC79A7; --cat-7: #3B4A9A; --cat-8: #F0E442
  • --seq-viridis-0: #440154; ... ; --seq-viridis-9: #FDE725
  • --div-neg: #0072B2; --div-mid: #F2F4F7; --div-pos: #E69F00
• 生成发散多级色：在前端用 OKLCH/CIELAB 插值库（如 culori.js）按端点与中性点生成 5/7/9 级，确保明度单调。

13. 常见误区与替代方案

• 避免“彩虹”连续色带（红→紫），对色盲不友好且非单调；替代用 Viridis/Cividis。
• 避免浅黄/浅灰细线；在浅色背景难以达标 3:1，对线条请用较深中性色。
• 不要用“仅颜色”表达状态；叠加形状/纹理/标签，支持打印与低分辨率。

14. 快速校验清单

• 背景与主数据对比度≥3:1；标签≥4.5:1。
• 分类色使用上限 6–8；超出改策略（分面/分层/灰化）。
• 连续/发散色带在灰阶模式仍可判断大小/方向。
• 交互态有明显但不过度的视觉反馈（亮度/线宽/描边）。
• Light/Dark 两套主题在颜色语义与顺序完全对齐。

如需，我可以基于上述规范为指定图表库（ECharts、Chart.js、D3）输出可直接粘贴的主题配置，或按照贵司品牌主色定制与验算对比度后的派生色板。