tsParticles Monochrome Pink 调色板指南：粉色系彩纸粒子的配色原理与接入实践

tsParticles Monochrome Pink 调色板指南：粉色系彩纸粒子的配色原理与接入实践

【免费下载链接】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 官方调色板palettes/confetti/monochromePink（npm 包名@tsparticles/palette-confetti-monochrome-pink）为对象，完整讲解其 7 种粉色系颜色的取值、底层IPalette数据模型，以及从 CDN 脚本到 npm 模块再到组件库的三种接入方式。读完本文，你将掌握 tsParticles 调色板"只定义颜色、不定义行为"的设计哲学，并能独立将 Monochrome Pink 配色应用到自己的彩纸（confetti）粒子场景中。

一、调色板概览：一份粉色调色板包含哪些信息

monochromePink是一个面向 confetti（彩纸）场景的粉色调色板。官方 README 用一张表格完整列出了它的全部视觉资产，本文原样继承如下：

可以看到，这份调色板的配色逻辑是"同色系深浅渐变"：从近乎白色的#FFCCDD一路过渡到深沉的#990044，再点缀高饱和的#FF0055，在#fff0f5的浅粉背景上既能保持整体色调统一，又因明度与饱和度的落差而具备层次感，非常适合婚礼、情人节、美妆、礼品等粉色主题页面。

二、调色板的本质：一份数据，而非一套行为

在动手接入前，必须先理解 tsParticles 调色板的核心设计：它只是一份颜色数据，不包含任何粒子运动、数量或形状逻辑。README 的 Quick checklist 也强调："A palette defines colors, not complete behavior, so pair it with a runtime package and particle options"（调色板只定义颜色，不定义完整行为，需配合运行时包和粒子选项使用）。

仓库源码直接印证了这一点。调色板的全部内容就是 options.ts 中的一个常量对象：

import { type IPalette } from "@tsparticles/engine"; export const options: IPalette = { name: "Confetti - Monochrome Pink", background: "#fff0f5", blendMode: "source-over", colors: { fill: { enable: true, value: [ "#FF99BB", "#FF66AA", "#FF3388", "#CC1166", "#990044", "#FF0055", "#FFCCDD", ], }, }, };

而这份数据要遵循的接口IPalette定义在引擎源码 engine/src/Core/Interfaces/IPalette.ts 中，结构如下：

export interface IPalette { /** Background color */ background: string; /** Canvas blend mode */ blendMode: GlobalCompositeOperation; /** Palette colors, single or multiple sets */ colors: SingleOrMultiple<IPaletteColors>; /** Palette name */ name: string; }

其中colors支持fill（填充色）与stroke（描边色）两组配置：fill可设置enable开关、可选opacity透明度范围，以及value颜色值（单个字符串或字符串数组）；stroke还额外支持width描边宽度范围（见 IPalette.ts）。Monochrome Pink 只使用了fill分支：enable: true表示启用填充色，value传入 7 个十六进制色值字符串。

这份数据如何生效？从 index.ts 可以看到注册机制：

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

加载函数通过engine.pluginManager.register把调色板注册进引擎，addPalette(paletteName, options)将上述数据绑定到"confetti-monochrome-pink"这个调色板键名上。之后你在粒子配置里写palette: "monochromePink"，引擎就会读取这份颜色数据并应用到粒子渲染上。

三、快速上手指南（Quick checklist）

官方 README 给出的三条快速检查清单，是接入任何调色板的最小行动路径：

1. 安装@tsparticles/engine（或直接使用下方 CDN bundle）；
2. 加载一个基础运行时包（例如@tsparticles/basic），并在tsParticles.load(...)之前调用loadMonochromePinkPalette（或loadConfettiMonochromePinkPalette）；
3. 在 options 中同时配置palette: "monochromePink"与一份最小化的粒子参数。

其中第 2 步的"先加载调色板、再加载配置"顺序是必须的——调色板注册属于引擎插件系统的初始化动作，必须在粒子加载前完成，否则引擎无法解析配置中的palette字段。

四、接入方式一：CDN / Vanilla JS / jQuery

最快捷的方式是直接通过 CDN 引入两个 bundle。README 给出的 HTML 示例如下（@4为 v4 版本线）：

<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-monochromePink@4/tsparticles.palette-coloredSmokeAmber.min.js"></script>

注意：README 与发布包 package.dist.json 中jsdelivr/unpkg字段写的是tsparticles.palette-colored-smoke-amber.min.js，而构建配置 rollup.config.js 中moduleName为"palette-monochromePink"。两者不一致，可以推断这是从其他调色板模板复制后未完全替换的遗留命名。以rollup.config.js中的moduleName为准，本包实际产出的 UMD bundle 应为tsparticles.palette-monochromePink.min.js风格文件名；在实际引用时请以 npm 包内 dist 目录实际生成的文件名为准。

脚本加载完成后，即可用官方 README 的示例代码初始化引擎（该示例完整继承如下）：

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

这段代码的要点拆解：

• loadBasic(engine)提供 circle 等基础形状与基础粒子的运行时能力；
• loadMonochromePinkPalette(engine)注册调色板数据；
• options.particles定义粒子行为：200 个粒子、圆形、尺寸 10～15 之间随机、以速度 2 匀速移动；
• 关键一行是palette: "monochromePink"，它把颜色来源从手工逐个写color数组切换为调色板自动分配；若不写这行，粒子将没有颜色。

也就是说，粒子"动起来"靠的是particles配置，而粒子"长什么样（颜色）"由调色板接管——两者职责分离、互补配合，这正是第二节强调的设计哲学在实战中的体现。

五、接入方式二：npm 模块与懒加载（ESM / CJS / UMD）

在模块化工程中，通过 npm 安装（包名见 package.json）：

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

包提供了两条导出路径（见 package.json 的exports字段）：

• 常规入口（.）：导出loadConfettiMonochromePinkPalette，来自 index.ts，注册名称为"confetti-monochrome-pink"；
• 懒加载入口（./lazy）：导出loadMonochromePinkPalette，来自 index.lazy.ts，注册名称为"monochrome-pink"，并通过await import("./options.js")动态加载颜色数据，适合在需要按需拆包、减小首屏体积的场景使用。

两种入口都支持types/browser/import/require/umd多种模块格式，可同时服务 TypeScript 类型提示、浏览器直接引用、ESM 打包与 CommonJS 环境。

在模块化代码中使用示例：

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

六、接入方式三：框架组件库（React / Vue / Angular 等）

如果你在使用带有 tsParticles 组件库的框架（React、Vue 2/3、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot、Web Components 等），流程不变：查阅对应组件库文档，在初始化组件之前调用loadMonochromePinkPalette（或loadConfettiMonochromePinkPalette）完成调色板注册，然后在传给组件的 options 中写入palette: "monochromePink"即可。调色板注册与引擎加载的生命周期顺序与 Vanilla 场景完全一致。

七、自定义与覆盖（Customization）

官方 README 特别标注了"Important ⚠️"提示：调色板中的所有选项都可以像标准 tsParticles 安装那样，通过自定义 options 属性进行覆盖。

这意味着你可以：

• 覆盖粒子行为：调整particles.number.value、size、move.speed等参数，改变粒子的密度、大小与运动节奏；
• 覆盖背景：在 options 中显式指定background，替代调色板自带的#fff0f5；
• 覆盖混合模式：将blendMode从默认的source-over改为其他GlobalCompositeOperation值（如multiply、screen），获得不同的叠色效果；
• 扩展颜色：不修改调色板源码，而是在粒子color配置中追加自定义色值，与调色板色值共同参与随机分配。

由于调色板本质上只是一份可序列化的数据对象，你甚至可以直接把 options.ts 中的颜色数组复制到自己的options.colors里手工使用——这为"不引入调色板插件、仅借用配色方案"的场景提供了便捷路径。

八、相关资源与继续探索

• 同系列调色板：monochromePink属于 confetti 调色板家族，同目录下还有 default、gold、monochromeBlue、monochromeGreen、monochromePurple、monochromeRed、neon、pastel、patriotic、rainbow、winter 等 11 个方案（见 palettes/confetti 目录），结构完全一致，可对照阅读；
• 调色板数据模型：IPalette/IPaletteColors/IPaletteColorsFill/IPaletteColorsStroke接口定义于 engine/src/Core/Interfaces/IPalette.ts，是理解调色板全部可配置维度的权威参考；
• 注册机制：engine.pluginManager.addPalette的调用链可继续追踪 engine/src/Core/Utils/PluginManager.ts；
• 构建配置：调色板包的打包逻辑集中在 rollup.config.js，其中paletteName: "MonochromePink Palette"用于生成 UMD 全局命名空间；
• 引擎入口：若想了解调色板之外的整体能力，可阅读 engine/src/index.ts 与 engine/README.md。

综上，Monochrome Pink 调色板是理解 tsParticles 调色板体系的最佳入门样本之一：数据量小、结构清晰、源码路径集中。掌握"调色板 = 颜色数据、运行时包 = 行为能力"这条主线后，你就能举一反三地接入仓库内任何一个调色板，甚至基于IPalette接口定制属于自己的配色方案。

【免费下载链接】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