OpenMontage D3.js 配色方案完全指南从内置色板到可访问性最佳实践【免费下载链接】OpenMontageWorlds first open-source, agentic video production system. 12 production pipelines, 100 tools, 700 agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage导读本文是 OpenMontage 项目中 D3.js 数据可视化技能.claude/skills/d3-viz/SKILL.md配套的配色参考文档colour-schemes.md的完整展开版。它系统讲解 D3.js 内置分类 / 连续 / 发散三类色板的选型、色盲友好配色的落地方法、自定义色板的感知均匀插值技巧以及 WCAG 对比度与冗余编码等可访问性规范。读完本文你将掌握面对任意数据集如何快速选对色板、如何编写可复制的 d3 配色代码、如何在深色背景与多系列图表中保持专业观感的完整实战方案。一、先建立体系interpolate 函数与 scheme 数组是两套 APID3.js 的配色能力来自d3-scale-chromatic模块它提供了两套互补的 API理解二者的区别是正确选型的前提d3.schemeXxx是离散数组直接给出固定数量的色值例如d3.schemeCategory10返回 10 个十六进制字符串配合d3.scaleOrdinal()做分类编码d3.schemeBlues[9]则是 9 步的离散渐变版本。d3.interpolateXxx是连续函数接受[0,1]区间内的归一化数值并返回对应颜色配合d3.scaleSequential()/d3.scaleDiverging()做连续数值编码。两者可以互相转换d3.quantize(d3.interpolateViridis, n)可以把连续插值器切成 n 段离散色值详见下文动态配色选择。与这套体系配套的完整尺度用法scaleOrdinal、scaleSequential、scaleDiverging、scaleSequentialQuantile以及interpolateLab/interpolateHcl/interpolateHsl等色彩空间插值记录在同目录的 scale-reference.md 中本文第 6 节会重点展开其中的 Lab / HCL 插值。二、内置分类色板Categorical Schemes分类色板用于离散类别 → 颜色的映射最常见的载体是d3.scaleOrdinal()。D3 内置了 10 套方案覆盖从默认到专业到柔和的各种需求。Category10默认d3.schemeCategory10 // [#1f77b4, #ff7f0e, #2ca02c, #d62728, #9467bd, // #8c564b, #e377c2, #7f7f7f, #bcbd22, #17becf]特性10 个相互区分的颜色对色盲有较好的可辨别性大多数分类数据的默认选择饱和度与亮度均衡适用场景通用分类编码、图例条目、多数据系列。仓库中的 d3 模式库d3-patterns.md在树状图、矩形树图treemap、旭日图sunburst、弦图chord、堆叠柱状图、气泡图等多个模板中都直接使用d3.scaleOrdinal(d3.schemeCategory10)作为开箱即用的着色方案例如 chord 图中d3.scaleOrdinal(d3.schemeCategory10).domain(nodes)。Tableau10d3.schemeTableau10特性10 个为数据可视化优化的颜色外观专业区分度出色适用场景商业仪表盘、专业报告、演示文稿。Accentd3.schemeAccent // 8 colours with high saturation特性明亮、鲜活的颜色高对比度现代审美适用场景突出重要类别、现代 Web 应用。Dark2d3.schemeDark2 // 8 darker, muted colours特性低调的调色板外观专业适合深色背景适用场景深色模式可视化、专业场景。Pairedd3.schemePaired // 12 colours in pairs of similar hues特性明暗两两成对适合嵌套类别12 个可区分颜色适用场景分组柱状图、层次类别、前后对比。当类别数超过 10 但不超过 12 时Paired 是官方速查表推荐的第一选择见第 12 节。Pastel1 Pastel2d3.schemePastel1 // 9 colours d3.schemePastel2 // 8 colours特性柔和、低饱和度温和的外观适合大面积填充适用场景背景色、弱化分类、安静舒缓的可视化。Set1、Set2、Set3d3.schemeSet1 // 9 colours - vivid d3.schemeSet2 // 8 colours - muted d3.schemeSet3 // 12 colours - pastel特性Set1高饱和度区分度最大Set2专业、均衡Set3柔和、容纳更多类别适用场景依据视觉层次需求灵活选择。上述全部内置分类色板的逐项列表同时收录于 scale-reference.md 的Ordinal colour scale一节。三、连续色板Sequential Schemes连续色板用单一色相或渐变把连续数据从低到高映射覆盖热力图、分级统计图choropleth、密度图和单指标可视化四类典型场景。单色相连续Bluesd3.interpolateBlues d3.schemeBlues[9] // 9-step discrete version其他单色相选项d3.interpolateGreens/d3.schemeGreensd3.interpolateOranges/d3.schemeOrangesd3.interpolatePurples/d3.schemePurplesd3.interpolateReds/d3.schemeRedsd3.interpolateGreys/d3.schemeGreys适用场景简单热力图分级统计图密度图单一指标可视化仓库模式库中的 choropleth 模板正是采用d3.scaleSequential(d3.interpolateBlues).domain([0, d3.max(valueData, d d.value)])为地图区域按数值着色见 d3-patterns.md。多色相连续感知均匀推荐优先Viridis推荐d3.interpolateViridis特性感知均匀perceptually uniform色盲友好打印安全无视觉死区感知亮度单调递增其他感知均匀选项d3.interpolatePlasma- 紫到黄d3.interpolateInferno- 黑经红/橙到白d3.interpolateMagma- 黑经紫到白d3.interpolateCividis- 为色觉缺陷CVD优化色盲可访问的多色相d3.interpolateTurbo // Rainbow-like but perceptually uniform d3.interpolateCool // Cyan to magenta d3.interpolateWarm // Orange to yellow适用场景科学可视化医学影像任何高精度数据可视化需要可访问性的可视化传统多色相Yellow-Orange-Redd3.interpolateYlOrRd d3.schemeYlOrRd[9]Yellow-Green-Blued3.interpolateYlGnBu d3.schemeYlGnBu[9]其他多色相d3.interpolateBuGn- 蓝到绿d3.interpolateBuPu- 蓝到紫d3.interpolateGnBu- 绿到蓝d3.interpolateOrRd- 橙到红d3.interpolatePuBu- 紫到蓝d3.interpolatePuBuGn- 紫到蓝绿d3.interpolatePuRd- 紫到红d3.interpolateRdPu- 红到紫d3.interpolateYlGn- 黄到绿d3.interpolateYlOrBr- 黄到橙棕适用场景传统数据可视化、用户熟悉的多色相联想温度、植被、水体。热力图模板的默认着色就来自这一家族——d3.scaleSequential(d3.interpolateYlOrRd).domain([0, d3.max(data, d d.value)])见 d3-patterns.md从浅黄到深红的渐变天然适合表达强度递增。四、发散色板Diverging Schemes发散色板用两个截然不同的色相强调相对于中心值的偏离。它要求数据存在有意义的零点或基准零、平均值、中性值并用中间浅、两端深的渐变同时突出极值与中段。Red-Blue温度隐喻d3.interpolateRdBu d3.schemeRdBu[11]特性直观的温度隐喻强对比清晰的正负区分适用场景温度、盈亏、高于/低于平均、相关性。Red-Yellow-Blued3.interpolateRdYlBu d3.schemeRdYlBu[11]特性三色渐变经黄色柔和过渡视觉阶数更多适用场景极值需要强调、中段也需要可读性的场景。其他发散方案红绿灯d3.interpolateRdYlGn // Red (bad) to green (good)Spectral彩虹d3.interpolateSpectral // Full spectrum其他选项d3.interpolateBrBG- 棕到蓝绿d3.interpolatePiYG- 粉到黄绿d3.interpolatePRGn- 紫到绿d3.interpolatePuOr- 紫到橙d3.interpolateRdGy- 红到灰适用场景依据语义含义与可访问性需求选择。发散色板在代码中的标准落地是d3.scaleDiverging(d3.interpolateRdBu).domain([-10, 0, 10])——domain 必须传三元素数组中间的 0 对应渐变的中点通常是白色或浅灰。完整的分发 interpolator 列表见 scale-reference.md。五、色盲友好配色Colour-Blind Friendly Palettes通用指南避免红绿组合最常见的色盲类型——红绿色盲用蓝橙发散替代红绿发散叠加纹理或图案作为冗余编码用模拟工具测试推荐的色盲安全方案分类// Okabe-Ito palette (colour-blind safe) const okabePalette [ #E69F00, // Orange #56B4E9, // Sky blue #009E73, // Bluish green #F0E442, // Yellow #0072B2, // Blue #D55E00, // Vermillion #CC79A7, // Reddish purple #000000 // Black ]; const colourScale d3.scaleOrdinal() .domain(categories) .range(okabePalette);Okabe-Ito 是学术界与出版业广泛认可的色盲安全分类色板8 个颜色覆盖橙、天蓝、蓝绿、黄、蓝、朱红、红紫、黑即使重度色觉缺陷用户也能区分绝大多数类别。注意方案内部已经主动用蓝 橙取代了红 绿这对高风险组合。连续// Use Viridis, Cividis, or Blues d3.interpolateViridis // Best overall d3.interpolateCividis // Optimised for CVD d3.interpolateBlues // Simple, safe发散// Use blue-orange instead of red-green d3.interpolateBrBG d3.interpolatePuOr六、自定义色板用 Lab / HCL 插值保证感知均匀内置色板不满足品牌或业务需求时可以自定义色板。关键技巧是默认的 RGB 线性插值会产生中间发灰、视觉不均匀的渐变而d3.interpolateLab和d3.interpolateHcl基于感知均匀的色彩空间中间过渡更自然scale-reference.md 中对此有专门对照RGB 插值默认、HSL 更平滑、Lab 感知均匀、HCL 感知均匀且带色相。创建自定义连续色板const customSequential d3.scaleLinear() .domain([0, 100]) .range([#e8f4f8, #006d9c]) // Light to dark blue .interpolate(d3.interpolateLab); // Perceptually uniform创建自定义发散色板const customDiverging d3.scaleLinear() .domain([0, 50, 100]) .range([#ca0020, #f7f7f7, #0571b0]) // Red, grey, blue .interpolate(d3.interpolateLab);创建自定义分类色板// Brand colours const brandPalette [ #FF6B6B, // Primary red #4ECDC4, // Secondary teal #45B7D1, // Tertiary blue #FFA07A, // Accent coral #98D8C8 // Accent mint ]; const colourScale d3.scaleOrdinal() .domain(categories) .range(brandPalette);自定义分类色板在真实项目中通常表现为预定义品牌色数组 按索引取模的模式——OpenMontage 的 Remotion 图表组件就是这样落地的BarChart、LineChart、PieChart均默认使用colors [#2563EB, #F59E0B, #10B981, #EC4899, #06B6D4, #8B5CF6]这套蓝-橙-绿-粉-青-紫六色品牌板通过colors[i % colors.length]循环分配见 BarChart.tsx、LineChart.tsx、PieChart.tsx。这验证了第 2 节的建议类别 ≤6 时 6 色足够超出的类别应分组而非无限加色。七、语义色关联Semantic Colour Associations颜色不只是装饰它携带语义。使用与受众预期一致的配色能显著降低理解成本。通用颜色含义红色危险、错误、负面高温负债、亏损绿色成功、正面增长、植被盈利、收益蓝色信任、冷静水、寒冷信息、中性黄色/橙色警告、谨慎能量、温暖吸引注意灰色中性、非活跃缺失数据背景场景化色板金融const financialColours { profit: #27ae60, loss: #e74c3c, neutral: #95a5a6, highlight: #3498db };温度const temperatureScale d3.scaleSequential(d3.interpolateRdYlBu) .domain([40, -10]); // Hot to cold (reversed)注意温度场景的 domain 是反向的40热对应红端-10冷对应蓝端。如果写成[ -10, 40 ]就出现了第 11 节错误清单中的倒置温度标尺问题。交通/状态const statusColours { success: #27ae60, warning: #f39c12, error: #e74c3c, info: #3498db, neutral: #95a5a6 };这种绿成功 / 红错误 / 灰中性的语义编码在 OpenMontage 的 KPI 组件中同样可见KPIGrid默认positiveColor #10B981涨、negativeColor #EF4444跌涨跌指示符▲/▼再配合颜色形成双重编码见 KPIGrid.tsx正是第 8 节冗余编码的工程化范例。八、可访问性最佳实践Accessibility对比度确保颜色与背景之间有足够对比度// Good contrast example const highContrast { background: #ffffff, text: #2c3e50, primary: #3498db, secondary: #e74c3c };WCAG 对比度要求普通文本最小 4.5:1大文本最小 3:1UI 组件最小 3:1冗余编码永远不要只依赖颜色传达信息// Add patterns or shapes const symbols [circle, square, triangle, diamond]; // Add text labels // Use line styles (solid, dashed, dotted) // Use size encoding测试为可视化做色盲模拟测试Chrome DevToolsRendering Emulate vision deficienciesColour Oracle免费桌面应用Coblis在线模拟器九、专业配色推荐Professional Recommendations针对不同输出场景业界形成了可复用的成熟色板。数据新闻// Guardian style const guardianPalette [ #005689, // Guardian blue #c70000, // Guardian red #7d0068, // Guardian pink #951c75, // Guardian purple ]; // FT style const ftPalette [ #0f5499, // FT blue #990f3d, // FT red #593380, // FT purple #262a33, // FT black ];学术/科学// Nature journal style const naturePalette [ #0071b2, // Blue #d55e00, // Vermillion #009e73, // Green #f0e442, // Yellow ]; // Use Viridis for continuous data const scientificScale d3.scaleSequential(d3.interpolateViridis);注意 Nature 风格的 4 色分类板实际就是 Okabe-Ito 的子集蓝、朱红、绿、黄说明科学出版界与色盲安全规范高度重合。企业/商务// Professional, conservative const corporatePalette [ #003f5c, // Dark blue #58508d, // Purple #bc5090, // Magenta #ff6361, // Coral #ffa600 // Orange ];这套深蓝-紫-品红-珊瑚-橙是数据可视化界常用的高频专业板色相跨度大、明度递增在深色与浅色背景上都有良好表现。十、动态配色选择让代码替你决策把选色逻辑封装成函数根据数据特征自动选择色板类型是工程化的最佳实践。基于数据范围function selectColourScheme(data) { const extent d3.extent(data); const hasNegative extent[0] 0; const hasPositive extent[1] 0; if (hasNegative hasPositive) { // Diverging: data crosses zero return d3.scaleSequentialSymlog(d3.interpolateRdBu) .domain([extent[0], 0, extent[1]]); } else { // Sequential: all positive or all negative return d3.scaleSequential(d3.interpolateViridis) .domain(extent); } }判定逻辑数据同时包含正负值 → 用发散色板并把 0 作为中点否则 → 用连续色板。这里用scaleSequentialSymlog是因为当数据跨越正负且在 0 附近密集分布时symlog对称对数变换比线性更能保留细节。基于类别数量function selectCategoricalScheme(categories) { const n categories.length; if (n 10) { return d3.scaleOrdinal(d3.schemeTableau10); } else if (n 12) { return d3.scaleOrdinal(d3.schemePaired); } else { // For many categories, use sequential with quantize return d3.scaleQuantize() .domain([0, n - 1]) .range(d3.quantize(d3.interpolateRainbow, n)); } }分段策略≤10 类用 Tableau1010~12 类用 Paired明暗成对容纳更多类别超过 12 类则放弃分类色板改用d3.quantize(d3.interpolateRainbow, n)把彩虹连续插值器切成 n 段离散色值——这是把连续 API 转离散数组的标准用法也呼应了第 1 节的体系说明。十一、常见配色错误与规避用彩虹渐变表达连续数据问题不感知均匀、难以读数解决用 Viridis、Blues 等均匀色板发散数据用红绿问题约 8% 的男性无法区分红绿红绿色盲是最常见类型解决用蓝橙或紫绿分类颜色过多问题难以区分和记忆解决限制在 5~8 个类别以内超出的做分组对比度不足问题可读性差解决测试对比度浅色背景上用更深的颜色忽视文化差异的颜色含义问题语义混淆例如在某些文化中白色代表丧事而非纯洁解决研究目标受众的颜色联想温度标尺倒置问题违背直觉红色却表示寒冷解决红/橙 热蓝 冷十二、快速参考指南需要表达……分类≤10d3.schemeCategory10或d3.schemeTableau10分类10d3.schemePaired或对类别分组连续通用d3.interpolateViridis连续科学d3.interpolateViridis或d3.interpolatePlasma连续温度d3.interpolateRdYlBu反向 domain发散零点d3.interpolateRdBu或d3.interpolateBrBG发散好坏d3.interpolateRdYlGn反向 domain色盲安全分类Okabe-Ito 色板上文已给出色盲安全连续d3.interpolateCividis或d3.interpolateBlues色盲安全发散d3.interpolatePuOr或d3.interpolateBrBG永远记住为色盲做测试保证足够对比度恰当使用语义色添加冗余编码图案、标签保持简单颜色越少可视化越清晰十三、在 OpenMontage 中继续深入配色是数据可视化的最后一公里但在 OpenMontage 中它服务于更完整的创作链路。你可以通过以下仓库资源继续深化.claude/skills/d3-viz/SKILL.mdd3-viz 技能主文档涵盖何时用 d3、两种集成模式直接 DOM 操作 vs 声明式渲染、标准绘图结构、响应式布局、过渡动画等完整工作流配色方案正是其第 5 步绑定数据并创建视觉元素时的核心决策。.claude/skills/d3-viz/references/scale-reference.md所有 d3 尺度类型的完整参考包括scaleOrdinal/scaleSequential/scaleDiverging/scaleSequentialQuantile与全部内置 interpolator 清单是本文 API 部分的底层支撑。.claude/skills/d3-viz/references/d3-patterns.md树状图、矩形树图、旭日图、弦图、热力图、面积图、堆叠/分组柱状图、气泡图、地图、刷选与过渡等 20 图表模板每个模板都标注了推荐的色板用法如热力图用interpolateYlOrRd、choropleth 用interpolateBlues。.claude/skills/d3-viz/assets/chart-template.jsx可直接运行的基础柱状图模板展示了把本文的色板接入完整 React 组件的标准写法。remotion-composer/src/components/charts/OpenMontage 视频渲染管线中的真实图表组件BarChart、LineChart、PieChart、KPIGrid 等展示了品牌色数组、语义色涨绿跌红、网格与文字对比度等在 1920×1080 视频画布上的生产级落地可作为把配色规范应用到实际成片的参考实现。【免费下载链接】OpenMontageWorlds first open-source, agentic video production system. 12 production pipelines, 100 tools, 700 agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 OpenMontage D3.js 配色方案完全指南：从内置色板到可访问性最佳实践
OpenMontage D3.js 配色方案完全指南从内置色板到可访问性最佳实践【免费下载链接】OpenMontageWorlds first open-source, agentic video production system. 12 production pipelines, 100 tools, 700 agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage导读本文是 OpenMontage 项目中 D3.js 数据可视化技能.claude/skills/d3-viz/SKILL.md配套的配色参考文档colour-schemes.md的完整展开版。它系统讲解 D3.js 内置分类 / 连续 / 发散三类色板的选型、色盲友好配色的落地方法、自定义色板的感知均匀插值技巧以及 WCAG 对比度与冗余编码等可访问性规范。读完本文你将掌握面对任意数据集如何快速选对色板、如何编写可复制的 d3 配色代码、如何在深色背景与多系列图表中保持专业观感的完整实战方案。一、先建立体系interpolate 函数与 scheme 数组是两套 APID3.js 的配色能力来自d3-scale-chromatic模块它提供了两套互补的 API理解二者的区别是正确选型的前提d3.schemeXxx是离散数组直接给出固定数量的色值例如d3.schemeCategory10返回 10 个十六进制字符串配合d3.scaleOrdinal()做分类编码d3.schemeBlues[9]则是 9 步的离散渐变版本。d3.interpolateXxx是连续函数接受[0,1]区间内的归一化数值并返回对应颜色配合d3.scaleSequential()/d3.scaleDiverging()做连续数值编码。两者可以互相转换d3.quantize(d3.interpolateViridis, n)可以把连续插值器切成 n 段离散色值详见下文动态配色选择。与这套体系配套的完整尺度用法scaleOrdinal、scaleSequential、scaleDiverging、scaleSequentialQuantile以及interpolateLab/interpolateHcl/interpolateHsl等色彩空间插值记录在同目录的 scale-reference.md 中本文第 6 节会重点展开其中的 Lab / HCL 插值。二、内置分类色板Categorical Schemes分类色板用于离散类别 → 颜色的映射最常见的载体是d3.scaleOrdinal()。D3 内置了 10 套方案覆盖从默认到专业到柔和的各种需求。Category10默认d3.schemeCategory10 // [#1f77b4, #ff7f0e, #2ca02c, #d62728, #9467bd, // #8c564b, #e377c2, #7f7f7f, #bcbd22, #17becf]特性10 个相互区分的颜色对色盲有较好的可辨别性大多数分类数据的默认选择饱和度与亮度均衡适用场景通用分类编码、图例条目、多数据系列。仓库中的 d3 模式库d3-patterns.md在树状图、矩形树图treemap、旭日图sunburst、弦图chord、堆叠柱状图、气泡图等多个模板中都直接使用d3.scaleOrdinal(d3.schemeCategory10)作为开箱即用的着色方案例如 chord 图中d3.scaleOrdinal(d3.schemeCategory10).domain(nodes)。Tableau10d3.schemeTableau10特性10 个为数据可视化优化的颜色外观专业区分度出色适用场景商业仪表盘、专业报告、演示文稿。Accentd3.schemeAccent // 8 colours with high saturation特性明亮、鲜活的颜色高对比度现代审美适用场景突出重要类别、现代 Web 应用。Dark2d3.schemeDark2 // 8 darker, muted colours特性低调的调色板外观专业适合深色背景适用场景深色模式可视化、专业场景。Pairedd3.schemePaired // 12 colours in pairs of similar hues特性明暗两两成对适合嵌套类别12 个可区分颜色适用场景分组柱状图、层次类别、前后对比。当类别数超过 10 但不超过 12 时Paired 是官方速查表推荐的第一选择见第 12 节。Pastel1 Pastel2d3.schemePastel1 // 9 colours d3.schemePastel2 // 8 colours特性柔和、低饱和度温和的外观适合大面积填充适用场景背景色、弱化分类、安静舒缓的可视化。Set1、Set2、Set3d3.schemeSet1 // 9 colours - vivid d3.schemeSet2 // 8 colours - muted d3.schemeSet3 // 12 colours - pastel特性Set1高饱和度区分度最大Set2专业、均衡Set3柔和、容纳更多类别适用场景依据视觉层次需求灵活选择。上述全部内置分类色板的逐项列表同时收录于 scale-reference.md 的Ordinal colour scale一节。三、连续色板Sequential Schemes连续色板用单一色相或渐变把连续数据从低到高映射覆盖热力图、分级统计图choropleth、密度图和单指标可视化四类典型场景。单色相连续Bluesd3.interpolateBlues d3.schemeBlues[9] // 9-step discrete version其他单色相选项d3.interpolateGreens/d3.schemeGreensd3.interpolateOranges/d3.schemeOrangesd3.interpolatePurples/d3.schemePurplesd3.interpolateReds/d3.schemeRedsd3.interpolateGreys/d3.schemeGreys适用场景简单热力图分级统计图密度图单一指标可视化仓库模式库中的 choropleth 模板正是采用d3.scaleSequential(d3.interpolateBlues).domain([0, d3.max(valueData, d d.value)])为地图区域按数值着色见 d3-patterns.md。多色相连续感知均匀推荐优先Viridis推荐d3.interpolateViridis特性感知均匀perceptually uniform色盲友好打印安全无视觉死区感知亮度单调递增其他感知均匀选项d3.interpolatePlasma- 紫到黄d3.interpolateInferno- 黑经红/橙到白d3.interpolateMagma- 黑经紫到白d3.interpolateCividis- 为色觉缺陷CVD优化色盲可访问的多色相d3.interpolateTurbo // Rainbow-like but perceptually uniform d3.interpolateCool // Cyan to magenta d3.interpolateWarm // Orange to yellow适用场景科学可视化医学影像任何高精度数据可视化需要可访问性的可视化传统多色相Yellow-Orange-Redd3.interpolateYlOrRd d3.schemeYlOrRd[9]Yellow-Green-Blued3.interpolateYlGnBu d3.schemeYlGnBu[9]其他多色相d3.interpolateBuGn- 蓝到绿d3.interpolateBuPu- 蓝到紫d3.interpolateGnBu- 绿到蓝d3.interpolateOrRd- 橙到红d3.interpolatePuBu- 紫到蓝d3.interpolatePuBuGn- 紫到蓝绿d3.interpolatePuRd- 紫到红d3.interpolateRdPu- 红到紫d3.interpolateYlGn- 黄到绿d3.interpolateYlOrBr- 黄到橙棕适用场景传统数据可视化、用户熟悉的多色相联想温度、植被、水体。热力图模板的默认着色就来自这一家族——d3.scaleSequential(d3.interpolateYlOrRd).domain([0, d3.max(data, d d.value)])见 d3-patterns.md从浅黄到深红的渐变天然适合表达强度递增。四、发散色板Diverging Schemes发散色板用两个截然不同的色相强调相对于中心值的偏离。它要求数据存在有意义的零点或基准零、平均值、中性值并用中间浅、两端深的渐变同时突出极值与中段。Red-Blue温度隐喻d3.interpolateRdBu d3.schemeRdBu[11]特性直观的温度隐喻强对比清晰的正负区分适用场景温度、盈亏、高于/低于平均、相关性。Red-Yellow-Blued3.interpolateRdYlBu d3.schemeRdYlBu[11]特性三色渐变经黄色柔和过渡视觉阶数更多适用场景极值需要强调、中段也需要可读性的场景。其他发散方案红绿灯d3.interpolateRdYlGn // Red (bad) to green (good)Spectral彩虹d3.interpolateSpectral // Full spectrum其他选项d3.interpolateBrBG- 棕到蓝绿d3.interpolatePiYG- 粉到黄绿d3.interpolatePRGn- 紫到绿d3.interpolatePuOr- 紫到橙d3.interpolateRdGy- 红到灰适用场景依据语义含义与可访问性需求选择。发散色板在代码中的标准落地是d3.scaleDiverging(d3.interpolateRdBu).domain([-10, 0, 10])——domain 必须传三元素数组中间的 0 对应渐变的中点通常是白色或浅灰。完整的分发 interpolator 列表见 scale-reference.md。五、色盲友好配色Colour-Blind Friendly Palettes通用指南避免红绿组合最常见的色盲类型——红绿色盲用蓝橙发散替代红绿发散叠加纹理或图案作为冗余编码用模拟工具测试推荐的色盲安全方案分类// Okabe-Ito palette (colour-blind safe) const okabePalette [ #E69F00, // Orange #56B4E9, // Sky blue #009E73, // Bluish green #F0E442, // Yellow #0072B2, // Blue #D55E00, // Vermillion #CC79A7, // Reddish purple #000000 // Black ]; const colourScale d3.scaleOrdinal() .domain(categories) .range(okabePalette);Okabe-Ito 是学术界与出版业广泛认可的色盲安全分类色板8 个颜色覆盖橙、天蓝、蓝绿、黄、蓝、朱红、红紫、黑即使重度色觉缺陷用户也能区分绝大多数类别。注意方案内部已经主动用蓝 橙取代了红 绿这对高风险组合。连续// Use Viridis, Cividis, or Blues d3.interpolateViridis // Best overall d3.interpolateCividis // Optimised for CVD d3.interpolateBlues // Simple, safe发散// Use blue-orange instead of red-green d3.interpolateBrBG d3.interpolatePuOr六、自定义色板用 Lab / HCL 插值保证感知均匀内置色板不满足品牌或业务需求时可以自定义色板。关键技巧是默认的 RGB 线性插值会产生中间发灰、视觉不均匀的渐变而d3.interpolateLab和d3.interpolateHcl基于感知均匀的色彩空间中间过渡更自然scale-reference.md 中对此有专门对照RGB 插值默认、HSL 更平滑、Lab 感知均匀、HCL 感知均匀且带色相。创建自定义连续色板const customSequential d3.scaleLinear() .domain([0, 100]) .range([#e8f4f8, #006d9c]) // Light to dark blue .interpolate(d3.interpolateLab); // Perceptually uniform创建自定义发散色板const customDiverging d3.scaleLinear() .domain([0, 50, 100]) .range([#ca0020, #f7f7f7, #0571b0]) // Red, grey, blue .interpolate(d3.interpolateLab);创建自定义分类色板// Brand colours const brandPalette [ #FF6B6B, // Primary red #4ECDC4, // Secondary teal #45B7D1, // Tertiary blue #FFA07A, // Accent coral #98D8C8 // Accent mint ]; const colourScale d3.scaleOrdinal() .domain(categories) .range(brandPalette);自定义分类色板在真实项目中通常表现为预定义品牌色数组 按索引取模的模式——OpenMontage 的 Remotion 图表组件就是这样落地的BarChart、LineChart、PieChart均默认使用colors [#2563EB, #F59E0B, #10B981, #EC4899, #06B6D4, #8B5CF6]这套蓝-橙-绿-粉-青-紫六色品牌板通过colors[i % colors.length]循环分配见 BarChart.tsx、LineChart.tsx、PieChart.tsx。这验证了第 2 节的建议类别 ≤6 时 6 色足够超出的类别应分组而非无限加色。七、语义色关联Semantic Colour Associations颜色不只是装饰它携带语义。使用与受众预期一致的配色能显著降低理解成本。通用颜色含义红色危险、错误、负面高温负债、亏损绿色成功、正面增长、植被盈利、收益蓝色信任、冷静水、寒冷信息、中性黄色/橙色警告、谨慎能量、温暖吸引注意灰色中性、非活跃缺失数据背景场景化色板金融const financialColours { profit: #27ae60, loss: #e74c3c, neutral: #95a5a6, highlight: #3498db };温度const temperatureScale d3.scaleSequential(d3.interpolateRdYlBu) .domain([40, -10]); // Hot to cold (reversed)注意温度场景的 domain 是反向的40热对应红端-10冷对应蓝端。如果写成[ -10, 40 ]就出现了第 11 节错误清单中的倒置温度标尺问题。交通/状态const statusColours { success: #27ae60, warning: #f39c12, error: #e74c3c, info: #3498db, neutral: #95a5a6 };这种绿成功 / 红错误 / 灰中性的语义编码在 OpenMontage 的 KPI 组件中同样可见KPIGrid默认positiveColor #10B981涨、negativeColor #EF4444跌涨跌指示符▲/▼再配合颜色形成双重编码见 KPIGrid.tsx正是第 8 节冗余编码的工程化范例。八、可访问性最佳实践Accessibility对比度确保颜色与背景之间有足够对比度// Good contrast example const highContrast { background: #ffffff, text: #2c3e50, primary: #3498db, secondary: #e74c3c };WCAG 对比度要求普通文本最小 4.5:1大文本最小 3:1UI 组件最小 3:1冗余编码永远不要只依赖颜色传达信息// Add patterns or shapes const symbols [circle, square, triangle, diamond]; // Add text labels // Use line styles (solid, dashed, dotted) // Use size encoding测试为可视化做色盲模拟测试Chrome DevToolsRendering Emulate vision deficienciesColour Oracle免费桌面应用Coblis在线模拟器九、专业配色推荐Professional Recommendations针对不同输出场景业界形成了可复用的成熟色板。数据新闻// Guardian style const guardianPalette [ #005689, // Guardian blue #c70000, // Guardian red #7d0068, // Guardian pink #951c75, // Guardian purple ]; // FT style const ftPalette [ #0f5499, // FT blue #990f3d, // FT red #593380, // FT purple #262a33, // FT black ];学术/科学// Nature journal style const naturePalette [ #0071b2, // Blue #d55e00, // Vermillion #009e73, // Green #f0e442, // Yellow ]; // Use Viridis for continuous data const scientificScale d3.scaleSequential(d3.interpolateViridis);注意 Nature 风格的 4 色分类板实际就是 Okabe-Ito 的子集蓝、朱红、绿、黄说明科学出版界与色盲安全规范高度重合。企业/商务// Professional, conservative const corporatePalette [ #003f5c, // Dark blue #58508d, // Purple #bc5090, // Magenta #ff6361, // Coral #ffa600 // Orange ];这套深蓝-紫-品红-珊瑚-橙是数据可视化界常用的高频专业板色相跨度大、明度递增在深色与浅色背景上都有良好表现。十、动态配色选择让代码替你决策把选色逻辑封装成函数根据数据特征自动选择色板类型是工程化的最佳实践。基于数据范围function selectColourScheme(data) { const extent d3.extent(data); const hasNegative extent[0] 0; const hasPositive extent[1] 0; if (hasNegative hasPositive) { // Diverging: data crosses zero return d3.scaleSequentialSymlog(d3.interpolateRdBu) .domain([extent[0], 0, extent[1]]); } else { // Sequential: all positive or all negative return d3.scaleSequential(d3.interpolateViridis) .domain(extent); } }判定逻辑数据同时包含正负值 → 用发散色板并把 0 作为中点否则 → 用连续色板。这里用scaleSequentialSymlog是因为当数据跨越正负且在 0 附近密集分布时symlog对称对数变换比线性更能保留细节。基于类别数量function selectCategoricalScheme(categories) { const n categories.length; if (n 10) { return d3.scaleOrdinal(d3.schemeTableau10); } else if (n 12) { return d3.scaleOrdinal(d3.schemePaired); } else { // For many categories, use sequential with quantize return d3.scaleQuantize() .domain([0, n - 1]) .range(d3.quantize(d3.interpolateRainbow, n)); } }分段策略≤10 类用 Tableau1010~12 类用 Paired明暗成对容纳更多类别超过 12 类则放弃分类色板改用d3.quantize(d3.interpolateRainbow, n)把彩虹连续插值器切成 n 段离散色值——这是把连续 API 转离散数组的标准用法也呼应了第 1 节的体系说明。十一、常见配色错误与规避用彩虹渐变表达连续数据问题不感知均匀、难以读数解决用 Viridis、Blues 等均匀色板发散数据用红绿问题约 8% 的男性无法区分红绿红绿色盲是最常见类型解决用蓝橙或紫绿分类颜色过多问题难以区分和记忆解决限制在 5~8 个类别以内超出的做分组对比度不足问题可读性差解决测试对比度浅色背景上用更深的颜色忽视文化差异的颜色含义问题语义混淆例如在某些文化中白色代表丧事而非纯洁解决研究目标受众的颜色联想温度标尺倒置问题违背直觉红色却表示寒冷解决红/橙 热蓝 冷十二、快速参考指南需要表达……分类≤10d3.schemeCategory10或d3.schemeTableau10分类10d3.schemePaired或对类别分组连续通用d3.interpolateViridis连续科学d3.interpolateViridis或d3.interpolatePlasma连续温度d3.interpolateRdYlBu反向 domain发散零点d3.interpolateRdBu或d3.interpolateBrBG发散好坏d3.interpolateRdYlGn反向 domain色盲安全分类Okabe-Ito 色板上文已给出色盲安全连续d3.interpolateCividis或d3.interpolateBlues色盲安全发散d3.interpolatePuOr或d3.interpolateBrBG永远记住为色盲做测试保证足够对比度恰当使用语义色添加冗余编码图案、标签保持简单颜色越少可视化越清晰十三、在 OpenMontage 中继续深入配色是数据可视化的最后一公里但在 OpenMontage 中它服务于更完整的创作链路。你可以通过以下仓库资源继续深化.claude/skills/d3-viz/SKILL.mdd3-viz 技能主文档涵盖何时用 d3、两种集成模式直接 DOM 操作 vs 声明式渲染、标准绘图结构、响应式布局、过渡动画等完整工作流配色方案正是其第 5 步绑定数据并创建视觉元素时的核心决策。.claude/skills/d3-viz/references/scale-reference.md所有 d3 尺度类型的完整参考包括scaleOrdinal/scaleSequential/scaleDiverging/scaleSequentialQuantile与全部内置 interpolator 清单是本文 API 部分的底层支撑。.claude/skills/d3-viz/references/d3-patterns.md树状图、矩形树图、旭日图、弦图、热力图、面积图、堆叠/分组柱状图、气泡图、地图、刷选与过渡等 20 图表模板每个模板都标注了推荐的色板用法如热力图用interpolateYlOrRd、choropleth 用interpolateBlues。.claude/skills/d3-viz/assets/chart-template.jsx可直接运行的基础柱状图模板展示了把本文的色板接入完整 React 组件的标准写法。remotion-composer/src/components/charts/OpenMontage 视频渲染管线中的真实图表组件BarChart、LineChart、PieChart、KPIGrid 等展示了品牌色数组、语义色涨绿跌红、网格与文字对比度等在 1920×1080 视频画布上的生产级落地可作为把配色规范应用到实际成片的参考实现。【免费下载链接】OpenMontageWorlds first open-source, agentic video production system. 12 production pipelines, 100 tools, 700 agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考