tsParticles Hologram 调色板实战指南：为粒子效果注入全息霓虹配色

tsParticles Hologram 调色板实战指南：为粒子效果注入全息霓虹配色

【免费下载链接】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-hologram调色板文档为主线，讲解全息（Hologram）配色方案的核心概念、安装方式与实战用法。你将掌握如何通过loadHologramPalette一行注册、以palette: "hologram"快速应用青色/蓝色霓虹粒子配色，并理解调色板在 tsParticles 引擎底层的注册与解析机制，从而举一反三地使用仓库内全部 20 个官方调色板。

什么是 tsParticles 调色板

在 tsParticles 体系中，调色板（Palette）只定义颜色，不定义完整行为。这一点在原文档中有明确强调：A palette defines colors, not complete behavior（调色板定义颜色，而非完整行为）。它解决的是"粒子该是什么颜色"这一单一问题，而粒子的数量、形状、大小、运动方式等仍由你的粒子配置（particles options）决定。

Hologram 调色板就是这样一个"颜色插件"：它注册一套以青色（cyan）、蓝绿色系为主、点缀紫粉色的全息霓虹配色，配合深色背景与screen混合模式，营造出深邃神秘的全息质感。从 示例截图 可以看到，粒子以青色、蓝色为主，带有浅色轮廓，少量紫色与粉色点缀，非常适合科技感、赛博朋克风格的项目背景。

配色一览：官方文档色板

原文档给出了 Hologram 调色板的完整色板表格，摘录如下：

文档同时说明该调色板的组合参数为：Blend mode（混合模式）：screen，Fill（填充）：false。其中背景色与screen混合模式是营造"全息发光"视觉的关键——screen模式会让粒子颜色与背景叠加后变亮，产生类似霓虹灯管自发光的效果。

以源码为准的完整配色数据

需要说明的是，README.md 中的色板表格是简化示意，实际运行时注册进引擎的配色定义位于 options.ts，其数据与文档表格略有出入（文档侧重展示主色阶，源码则包含完整的填充色、描边色与描边宽度区间）。以下为源码中的真实注册数据：

• 填充色（fill）：#003844、#007A8A、#00C6C7、#68EEFF、#8F76FF、#D89CFF
• 描边色（stroke）：#AAFFFF、#C8FAFF、#8CEBFF（描边宽度0.6 ~ 1.4）
• 组合变体：第二组变体在填充色的基础上叠加描边#00F0FF、#8F76FF、#FFFFFF（描边宽度1.6 ~ 3.2）

从源码结构看，调色板被定义为三个颜色变体（color variants）：纯填充、纯描边、填充+描边三种组合，引擎加载时会将其转换为粒子的paint（绘制）配置，粒子在运行时会从这些颜色中随机取值，从而呈现同一调色板下的丰富色彩层次。

快速上手清单

原文档给出的 Quick checklist（快速检查清单）包含三步，这是使用任意 tsParticles 调色板的通用流程：

1. 安装引擎：安装@tsparticles/engine（或直接使用 CDN 打包文件）；
2. 加载基础包与调色板：加载一个基础功能包（如@tsparticles/basic），并在tsParticles.load(...)之前调用loadHologramPalette；
3. 应用配色与粒子配置：在配置中设置palette字段，并搭配一份最简粒子配置。

记住核心原则：调色板只提供颜色，必须与运行时包（runtime package）和粒子选项配合使用。

安装与使用

CDN / Vanilla JS / jQuery

使用 CDN 方式时，需要依次引入基础包与调色板脚本（以 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-hologram@4/tsparticles.palette-coloredSmokeAmber.min.js"></script>

注意：原文档此处引用的 CDN 文件名沿用了其他调色板的命名模板。从当前仓库的 rollup.config.js 看，该包的构建模块名为palette-hologram（moduleName: "palette-hologram"），因此在 CDN 上实际的打包文件名应以tsparticles.palette-hologram.min.js为准。若文件名无法命中，请以 jsDelivr 上的实际文件列表为准。

基本用法（Vanilla JS）

脚本加载完成后，即可初始化tsParticles：

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

这段代码的关键点：

• loadBasic(engine)加载基础能力包（圆形 shape、移动 updater 等最核心的功能），对应实现见 bundles/basic/src/index.ts；
• loadHologramPalette(engine)注册 "hologram" 调色板；
• 配置中的palette: "hologram"是激活调色板的总开关，粒子数量（200 个）、圆形形状、大小区间（10~15）与运动速度（2）则完全由你掌控；
• engine.load({ id, options })创建并启动实例，id对应页面中承载粒子画布的容器元素。

自定义与覆盖

原文档特别提示：所有选项都可以像标准 tsParticles 安装一样直接覆盖。调色板只负责注入颜色默认值，你在particles中显式书写的任何属性（数量、形状、大小、运动、颜色等）优先级更高。例如你可以在使用 "hologram" 配色时，仍自定义粒子形状为square、提高运动速度，颜色部分则完全交给调色板。

配合框架组件库

tsParticles 提供了 React、Vue 2/3、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot 与 Web Components 等组件库（对应仓库中的 wrappers 目录）。在框架中使用时，只需按照对应组件库文档完成初始化，并在加载引擎后调用loadHologramPalette函数，随后同样在 options 中设置palette: "hologram"即可，注册逻辑与 Vanilla JS 完全一致。

源码解析：调色板如何工作

调色板的注册入口

调色板包的入口实现非常精简，完整逻辑位于 palettes/tech/hologram/src/index.ts：

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

它把名为"hologram"的调色板通过pluginManager.addPalette写入引擎的插件管理器。在 engine/src/Core/Utils/PluginManager.ts 中，addPalette的实现只是将调色板存入一个Map<string, IPalette>：

addPalette(name: string, palette: IPalette): void { this.palettes.set(name, palette); }

同时，browser.ts会把loadHologramPalette挂载到globalThis上，这就是 CDN 全局变量loadHologramPalette的来源（见 browser.ts）。

IPalette 接口定义

调色板的数据结构由引擎统一定义，见 engine/src/Core/Interfaces/IPalette.ts：

• IPalette：name（名称）、background（背景色）、blendMode（画布混合模式）、colors（颜色变体，可单个或多个）；
• IPaletteColorsFill：enable（是否启用填充）、opacity（填充透明度区间）、value（填充色，单个或多个）；
• IPaletteColorsStroke：opacity、value（描边色）、width（描边宽度区间）。

对照 options.ts 可以看到 Hologram 调色板完整实现了该接口：blendMode: "screen"、背景#000a0d、三组颜色变体，其中描边变体还指定了宽度区间（0.6~1.4与1.6~3.2），这解释了示例截图中粒子边缘发亮的描边轮廓。

配置解析链路

当配置中出现palette字段时，引擎会触发两条解析路径：

1. 顶层配置：在 engine/src/Options/Classes/Options.ts 的doLoad中检测到data.palette后调用#importPalette，该方法（Options.ts）从插件管理器取出调色板数据，并自动加载：背景色（background.color）、混合模式（blend.mode并启用blend），以及粒子的palette字段；
2. 粒子级配置：在 engine/src/Options/Classes/Particles/ParticlesOptions.ts 中，#importPalette把调色板的每个颜色变体转换为粒子的paint（绘制）配置——填充色填入paint.fill，描边色与宽度填入paint.stroke，多个变体则生成多组 paint 供粒子随机使用。

也就是说，palette: "hologram"这一行配置最终会展开为完整的背景色、混合模式与粒子绘制参数，与手写这些配置等价。这也印证了文档的提示：调色板是"颜色快捷方式"，任何显式配置都可以覆盖它注入的默认值。

懒加载版本

该包还提供了懒加载入口@tsparticles/palette-hologram/lazy（见 index.lazy.ts），它使用动态import("./options.js")在注册时才加载配色数据，适合追求更小首屏包体积的构建场景。包的分发配置（ESM/CJS/UMD 多格式导出、浏览器入口等）见 package.json。

从 Hologram 到整个调色板家族

Hologram 调色板位于仓库的 palettes/tech 目录下，整个 palettes 目录还包含 atmosphere、fire、fireworks、food、space、water 等 20 个主题调色板。它们的用法与本篇完全一致——安装对应包 → 调用对应的loadXxxPalette→ 设置palette: "xxx"。掌握 Hologram 的注册与解析原理后，你可以轻松迁移到任何其他官方调色板，或参照 IPalette.ts 的接口自行定义私有配色。

小结

tsParticles Hologram 调色板用一套青色/蓝色霓虹配色、近黑背景与screen混合模式，为粒子效果提供了即插即用的"全息皮肤"。它的使用流程可以浓缩为三步：加载基础包、调用loadHologramPalette(engine)、在 options 中写入palette: "hologram"。透过 index.ts、options.ts 与引擎侧 PluginManager.ts、Options.ts 的实现，你能清楚地看到调色板从"注册"到"解析"再到"绘制"的完整链路——这正是 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