tsParticles Palettes

April 9, 2026 · View on GitHub

Official color palettes for tsParticles, reusable across custom particle configurations.

Why palettes

Apply a consistent visual identity without changing your existing behavior settings
Reuse curated color sets across projects
Start quickly from accessible, thematic, or high-contrast combinations

pnpm add @tsparticles/engine @tsparticles/basic @tsparticles/palette-<palette-name>

Install @tsparticles/engine plus one base bundle (@tsparticles/basic recommended)
Register the palette loader before tsParticles.load(...)
Keep your current behavior settings and set only palette: "..."

I already have particle behavior configured: add one palette package and set palette: "..."
I need consistent branding colors: reuse the same palette across multiple effects
I want to experiment quickly: try the demo app and switch palettes by route

If you need a complete effect quickly, use a preset. If you already have a config and only want a color direction, use a palette.

Palettes are available in palettes/ and can be used to apply a visual color identity across configurations.

General guides:

Register the palette loader before calling tsParticles.load(...)
Use the same id value in your HTML container and load call
Do not assume every palette is included in every bundle; import the specific palette package
Keep behavior and interactions in your own config, then apply the palette

If you need a new palette or want to contribute: