tsParticles Retro 调色板（Palette）详解：安装、配置与源码原理

tsParticles Retro 调色板（Palette）详解：安装、配置与源码原理

【免费下载链接】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 Retro 调色板是官方 Palettes 系列中用于营造复古霓虹暖色视觉风格的色彩方案，它以深紫近黑背景搭配黄、橙、红等高饱和暖色粒子，非常适合作为网页动画背景、彩带（confetti）与烟花效果的主题配色。本文以该调色板为线索，完整讲解其安装方式、配置示例、颜色清单，并从引擎源码层面剖析调色板的注册、存储与解析机制，读完你可以直接在自己的 tsParticles 项目中复现这一效果，并理解 palette 选项与普通粒子选项的协作关系。

Retro 调色板是什么

tsParticles 的 Palette（调色板）是一组预定义的颜色配置，它只描述「用什么颜色」，不描述粒子数量、形状、运动等完整行为。正如本包 README 中所强调的：

A palette defines colors, not complete behavior, so pair it with a runtime package and particle options.

也就是说，Palette 必须与一个运行时基础包（如@tsparticles/basic）配合使用，再通过普通 particles 选项补齐行为，才能渲染出完整粒子效果。

Retro 调色板的官方描述为 "tsParticles palette for colored smoke amber"（彩色琥珀烟感调色板），其命名空间为vibrant下的retro，在仓库中对应目录 palettes/vibrant/retro，npm 包名为@tsparticles/palette-vibrant-retro。

快速开始清单

按照 README 中的 Quick checklist，接入该调色板只需三步：

1. 安装@tsparticles/engine（或直接使用下方 CDN 打包文件）；
2. 加载一个基础包（例如@tsparticles/basic），并在tsParticles.load(...)之前调用loadRetroPalette（实际导出函数名为loadVibrantRetroPalette，见下文源码说明）；
3. 在配置中应用 palette 并搭配一套最小化的粒子配置。

安装方式

方式一：npm 安装（模块化项目）

在package.json所在的工程目录中安装运行时引擎、基础包与本调色板：

npm install @tsparticles/engine @tsparticles/basic @tsparticles/palette-vibrant-retro

仓库中 palettes/vibrant/retro/package.json 显示该包当前版本为4.3.3，与引擎同版本（@tsparticles/engine: workspace:*在发布后对应同版本号 4.x），并提供完整的 ESM / CJS / UMD / 浏览器多格式导出，支持import、require与 CDN 直接引用。

方式二：CDN / Vanilla JS / jQuery

在页面中直接引入基础包与调色板脚本：

<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-vibrant-retro@4/tsparticles.palette-colored-smoke-amber.min.js"></script>

这里需要特别说明文件名问题：包内的 package.dist.json 中jsdelivr与unpkg字段指向的实际构建产物为tsparticles.palette-colored-smoke-amber.min.js（package.json内包名注释里也保留了 legacy 拼写coloredSmokeAmber的历史痕迹），同时本目录 rollup.config.js 通过loadParticlesPalette生成 UMD 全局构建，moduleName 为palette-retro。如果你在本地使用npm run build构建后手动引用，应以实际生成的 dist 文件名为准；通过 jsDelivr 自动解析时则使用jsdelivr字段对应的文件名。

基本用法

CDN 脚本加载完成后，按如下方式初始化tsParticles：

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

几个关键点：

• 先await loadBasic(engine)注册基础粒子能力，再await loadRetroPalette(engine)注册调色板，顺序不可颠倒，且都必须在engine.load之前完成；
• particles部分提供最少的运行时行为：200 个粒子、圆形、10~15 的随机尺寸、开启移动且速度为 2；
• palette: "retro"用于在选项中引用调色板。需要说明的是，从源码看实际注册到引擎的调色板键名是vibrant-retro（见下文），README 示例中简写为"retro"，若严格匹配源码，可在选项中写palette: "vibrant-retro"以确保命中 PluginManager 的getPalette查找。

完全自定义

调色板只提供默认配色，你可以在任何 tsParticles 标准安装中覆盖全部选项：直接像普通配置一样定义particles.color、background、blendMode等属性即可，调色板不限制你继续微调细节，这也是 README 中 Customization 一节的要点。

Retro 调色板完整色板

Retro 调色板定义了两组语义不同的颜色：一组用于粒子填充/描边的功能色，一组用于背景与中性色。完整清单如下（来自 README.md）：

功能色（暖色系）：

中性色：

背景与混合设置：背景色#1A1000。

源码视角：调色板是如何工作的

调色板接口定义

引擎在 IPalette.ts 中定义了调色板的结构，共四个字段：

• name：调色板名称（字符串）；
• background：背景颜色（字符串）；
• blendMode：Canvas 全局混合模式（GlobalCompositeOperation，如source-over、screen等）；
• colors：颜色配置，支持 fill（填充色，可配enable、opacity范围与单个/多个色值）与 stroke（描边色，可配opacity、width范围与色值），并允许传入单个或一组IPaletteColors。

Retro 调色板的实际注册数据

本包 src/options.ts 中导出的实际配置为：

export const options: IPalette = { name: "Vibrant Retro", background: "#1A0A2E", blendMode: "screen", colors: { fill: { enable: true, value: [ "#FF6B35", "#F7931E", "#FDB833", "#C41E3A", "#8B0000", "#FF1744", ], }, }, };

可以看到，代码中实际生效的是 6 个高饱和暖色填充色（橙红#FF6B35、橙#F7931E、亮黄橙#FDB833、玫红#C41E3A、暗红#8B0000、亮红#FF1744），背景为深紫黑#1A0A2E，混合模式为screen（滤色）。README 表格中同时列出了更宽泛的候选色与背景#1A1000、source-over混合模式等参考信息，两处表述存在差异时，应以源码options.ts的实际生效值为准——这也提醒使用者：直接阅读包内 src/options.ts 才是获得真实默认值的最可靠方式。

注册流程与惰性加载

入口 src/index.ts 中，loadVibrantRetroPalette通过engine.pluginManager.addPalette("vibrant-retro", options)把调色板注册进引擎，键名为vibrant-retro。引擎端 PluginManager.ts 维护readonly palettes = new Map<string, IPalette>()，addPalette(name, palette)负责写入，getPalette(name)负责按名取回；配置中的palette字段最终就是通过这个 Map 查找并展开到粒子颜色等选项上的。

此外，src/index.lazy.ts 提供了惰性加载版本：它同样导出loadVibrantRetroPalette，但只在注册回调内部通过动态import("./options.js")按需加载 options，适合希望在首屏减少同步开销的场景。该包通过 package.json 的./lazy导出子路径暴露（package.json），可按需引入。

浏览器全局挂载

src/browser.ts 在浏览器全局对象上挂载loadVibrantRetroPalette（同时写入__tsParticlesInternals），这就是 CDN 用法中可以直接调用loadRetroPalette(engine)/loadVibrantRetroPalette(engine)的原因。若在原生 script 标签环境下使用，全局函数名请以浏览器构建实际挂载的导出名为准（即loadVibrantRetroPalette）。

与其他框架配合

如果你在使用 React、Vue、Angular、Svelte 等带有 tsParticles 组件库的框架，只需在组件初始化阶段调用对应的loadVibrantRetroPalette即可（如 React 中在Particles组件加载前、Vue 3 中在应用挂载时）。具体调用位置与生命周期请参照各组件库自身文档，调色板函数本身与框架无关，核心流程依然是「先注册、后加载」。

运行效果

下方为该调色板的官方示例渲染图（palettes/vibrant/retro/images/sample.png），深紫背景上的暖色粒子呈现典型的复古霓虹氛围，是评估配色是否符合预期的直观参考：

相关文档

• 仓库内其他调色板：参见 palettes 目录下的 vibrant 系列（default、electric、neon、tropical）与其余命名空间；
• 主文档与完整文档站点：参见 tsParticles 主 README 与 CLAUDE.md 中的开发说明。

提示：以上链接均为本仓库内的相对路径，可点击直达对应源码或文档；本文涉及的全部源码路径以当前仓库（tsParticles v4，palette 版本 4.3.3）为准。

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