企业官网建设流程全解析

tsParticles MonochromeRed 调色板：单色红系 confetti 粒子配色方案完全指南

【免费下载链接】tsparticlestsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.项目地址: https://gitcode.com/GitHub_Trending/ts/tsparticles

tsParticles 的@tsparticles/palette-confetti-monochrome-red是一套专门面向 confetti（彩带纸屑）场景的单色红系配色方案，它通过 7 种从浅粉到深红的填充色与#fff1f1背景色，在source-over混合模式下为粒子效果提供统一的视觉基调。本文以该调色板的 README.md 为主体，结合 engine 源码 与调色板实现代码，讲解它的色值清单、加载方式、完整用法与定制方法，帮助你在 CDN / Vanilla JS / 主流框架中快速落地一套无需手动配色的红色系粒子背景。

MonochromeRed 调色板是什么

MonochromeRed 是 tsParticles palettes 体系中 confetti 分类下的一个成员（同分类还包括 default、gold、monochromeBlue、monochromeGreen、monochromePink、monochromePurple、neon、pastel、patriotic、rainbow、winter 等，见 palettes/confetti 目录）。它的定位是：只定义颜色，不定义完整行为。也就是说，它提供一组经过精心挑选、在视觉上协调的色值，而粒子数量、形状、尺寸、运动等行为仍由你自己的options配置决定，这一点在 README 的 Quick checklist 中也被明确强调：“A palette defines colors, not complete behavior, so pair it with a runtime package and particle options.”

在源码层面，调色板的注册由 src/index.ts 完成：

export async function loadConfettiMonochromeRedPalette(engine: Engine): Promise<void> { await engine.pluginManager.register(e => { e.pluginManager.addPalette(paletteName, options); }); }

其中addPalette是 PluginManager 提供的能力，它把调色板按名字存入内部 Map；当你的配置里出现palette: "monochromeRed"时，引擎会通过getPalette取出对应定义并合并进粒子选项（参见 Options.ts 中的 #importPalette）。

注意：源码中实际导出的加载函数名为loadConfettiMonochromeRedPalette，全局挂载也在 browser.ts 中以同名属性暴露，使用时应以此为准（部分旧文档示例中写作loadMonochromeRedPalette，是历史遗留的简写）。包名则以 package.json 声明的@tsparticles/palette-confetti-monochrome-red为准。

色板颜色清单

调色板的全部颜色定义在 src/options.ts 中，对应的IPalette接口定义见 engine/src/Core/Interfaces/IPalette.ts。下表完整列出 README 中的 7 种粒子填充色：

配套的全局设置：

从 options.ts 可以看出这套调色板的真实数据结构：

export const options: IPalette = { name: "Confetti - Monochrome Red", background: "#fff1f1", blendMode: "source-over", colors: { fill: { enable: true, value: [ "#FFB3B3", "#FF8080", "#FF4D4D", "#E61A1A", "#B30000", "#800000", "#FFD6D6", ], }, }, };

对照 IPalette 接口 可以看到该结构的语义：fill支持enable（是否启用填充色）、value（单个或多个色值字符串）、以及可选的opacity范围；此外还预留了stroke（描边色，含width与opacity）字段，说明调色板体系可以同时承载填充与描边两种颜色需求，只是本调色板只使用了fill。

快速上手指南

README 的 Quick checklist 给出三步走流程，它同样适用于任何 tsParticles 调色板：

1. 安装@tsparticles/engine（或直接使用下方 CDN bundle）；
2. 加载一个基础运行包（例如@tsparticles/basic），并在tsParticles.load(...)之前调用loadConfettiMonochromeRedPalette；
3. 在options中填入palette: "monochromeRed"，并配上最简粒子配置。

请记住：调色板只负责颜色。缺少运行包或粒子行为配置时，即使注册了调色板也不会产生任何可见效果。

通过 npm 安装

在 npm 生态中，engine 与调色板作为独立包分发，本调色板包名与入口配置见 package.json：

npm install @tsparticles/engine @tsparticles/basic @tsparticles/palette-confetti-monochrome-red

包同时提供main（CommonJS）、module（ESM）、browser与types等多入口，并额外暴露./lazy子路径用于按需懒加载（详见下文“懒加载模式”）。

CDN / Vanilla JS / jQuery 方式

不经过打包器时，可以直接用 jsDelivr 加载基础包与调色板 bundle，然后在页面里初始化：

<script src="https://cdn.jsdelivr.net/npm/@tsparticles/basic@4/tsparticles.basic.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@tsparticles/palette-confetti-monochrome-red@4/tsparticles.palette-confetti-monochrome-red.min.js"></script>

提示：原文档示例中第二个<script>的 bundle 文件名残留了其他调色板的命名（tsparticles.palette-coloredSmokeAmber.min.js），属复制粘贴遗留。请以本包真实的发布文件名为准（可参考 rollup.config.js 的产物命名规则），保证 CDN 地址可访问。

脚本加载完成后，loadConfettiMonochromeRedPalette会挂到globalThis上（见 browser.ts），可以直接在全局作用域调用。

完整使用示例

以下示例是 README 给出的标准用法，配合基础包@tsparticles/basic使用：先加载基础功能，再注册调色板，最后传入含palette字段的选项并load：

(async engine => { await loadBasic(engine); await loadConfettiMonochromeRedPalette(engine); const options = { particles: { number: { value: 200 }, shape: { type: "circle" }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: "monochromeRed", }; await engine.load({ id: "tsparticles", options, }); })(tsParticles);

要点解读：

• loadBasic(engine)来自@tsparticles/basic，提供圆形 shape、基础移动与 size 等最小功能集；如果使用@tsparticles/full或all等更完整的 bundle，同样兼容；
• palette: "monochromeRed"是触发调色板合并的关键字段，其值对应addPalette注册时使用的内部名confetti-monochrome-red（见 index.ts）；
• number、shape、size、move等粒子行为全部由你自行定义，调色板只负责把上面 7 种红色注入particles.color的取值集合。

如果你在 ESM 工程中直接import，则等价写法为：

import { tsParticles } from "@tsparticles/engine"; import { loadBasic } from "@tsparticles/basic"; import { loadConfettiMonochromeRedPalette } from "@tsparticles/palette-confetti-monochrome-red"; await loadBasic(tsParticles); await loadConfettiMonochromeRedPalette(tsParticles); await tsParticles.load({ id: "tsparticles", options: { palette: "monochromeRed", particles: { number: { value: 200 }, shape: { type: "circle" }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2 }, }, }, });

懒加载模式

为了减小首屏体积，本包额外导出了./lazy入口（index.lazy.ts），它把options的导入推迟到注册回调内部，实现按需加载：

import { loadConfettiMonochromeRedPalette } from "@tsparticles/palette-confetti-monochrome-red/lazy";

该入口与常规入口导出的函数签名一致，仅在使用dynamic import的打包场景下延迟拉取颜色数据。

定制化：在调色板之上覆盖一切

README 特别标注了“Important ⚠️”说明：你可以像在标准 tsParticles 安装中一样，覆盖调色板定义以外的所有选项。调色板通过引擎内部的导入机制把颜色与背景等默认值合并进配置，而你在options中显式书写的字段优先级更高。

例如，想保留红色色板但改用方形粒子、加快移动速度并自行指定背景：

const options = { background: { color: "#2b0a0a" }, // 覆盖调色板默认背景 #fff1f1 particles: { number: { value: 300 }, shape: { type: "square" }, size: { value: { min: 6, max: 12 } }, move: { enable: true, speed: 4, direction: "top", outModes: { default: "out" }, }, }, palette: "monochromeRed", };

同时，你也不必被 7 个固定色值束缚——IPaletteColorsFill.value支持“单个或多个字符串”，在options.particles.color.value中追加或替换颜色即可与调色板颜色并存，灵活混搭。

在主流框架中使用

对于 React、Vue 2/3、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot、Web Components 等拥有官方 tsParticles 组件库的框架，流程变为：先安装对应组件库与本调色板包，然后在组件初始化前调用loadConfettiMonochromeRedPalette，并把palette: "monochromeRed"写入传给组件的options。具体安装命令与组件 API 请以对应组件库仓库的文档为准（本项目 wrappers 目录 下存放了 react、vue3、angular、svelte 等各框架的封装源码，可作参考）。

组件方式下同样遵守“先加载运行包 → 再注册调色板 → 后传入 options”的顺序，只是loadBasic与loadConfettiMonochromeRedPalette的调用位置由组件库的生命周期管理。

与其他 confetti 调色板的选择建议

在 palettes/confetti 目录 下，tsParticles 还提供了多套风格各异的配色：

• default / gold / rainbow：适合通用喜庆场景；
• monochromeBlue / monochromeGreen / monochromePink / monochromePurple：与 MonochromeRed 同一“单色系”家族，适合需要严格品牌色统一的项目；
• neon / pastel / winter / patriotic：分别面向霓虹、柔和、冬日与节日主题。

如果场景偏“严肃红”或需要与大红色品牌主视觉匹配，MonochromeRed 的从#FFD6D6到#800000的渐变层次能提供既有高光又有阴影的立体感，且背景#fff1f1的低饱和粉白让粒子在浅色页面上保持干净对比。

相关文档

• 调色板与预设总目录：presets与palettes分类均在本仓库中，可浏览 palettes 目录 与 presets 目录 了解全量配色与预置效果；
• 调色板数据结构的类型定义：engine/src/Core/Interfaces/IPalette.ts；
• 调色板注册与查询机制：engine/src/Core/Utils/PluginManager.ts；
• 调色板在选项合并中的导入逻辑：engine/src/Options/Classes/Options.ts。

通过本调色板，你可以在不手写任何颜色代码的情况下获得一组视觉协调的红色系 confetti 粒子；而结合palette字段与自定义options的覆盖机制，又能把配色、行为与品牌调性完全掌控在自己手中——这正是 tsParticles 调色板体系的核心理念。

【免费下载链接】tsparticlestsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.项目地址: https://gitcode.com/GitHub_Trending/ts/tsparticles