[![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org) # tsParticles Rainbow Palette [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@tsparticles/palette-rainbow/badge)](https://www.jsdelivr.com/package/npm/@tsparticles/palette-rainbow) [![npmjs](https://badge.fury.io/js/%40tsparticles%2Fpalette-rainbow.svg)](https://www.npmjs.com/package/@tsparticles/palette-rainbow) [![npmjs](https://img.shields.io/npm/dt/%40tsparticles%2Fpalette-coloredSmokeAmber)](https://www.npmjs.com/package/@tsparticles/palette-rainbow) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni) [tsParticles](https://github.com/tsparticles/tsparticles) palette for colored smoke amber. [![Discord](https://particles.js.org/images/discord.png)](https://discord.gg/hACwv45Hme) [![Telegram](https://particles.js.org/images/telegram.png)](https://t.me/tsparticles) [![tsParticles Product Hunt](https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=186113&theme=light)](https://www.producthunt.com/posts/tsparticles?utm_source=badge-featured&utm_medium=badge&utm_source=badge-tsparticles)

## Sample [![demo](https://raw.githubusercontent.com/tsparticles/palettes/main/palettes/spectrum/rainbow/images/sample.png)](https://particles.js.org/samples/palettes/rainbow) ## Colors

`#FF0000`	`#FF1500`	`#FF2B00`	`#FF4000`	`#FF5500`
`#FF6A00`	`#FF8000`	`#FF9500`	`#FFAA00`	`#FFBF00`
`#FFD500`	`#FFEA00`	`#FFFF00`	`#EAFF00`	`#D4FF00`
`#BFFF00`	`#AAFF00`	`#95FF00`	`#80FF00`	`#6AFF00`
`#55FF00`	`#40FF00`	`#2BFF00`	`#15FF00`	`#00FF00`
`#00FF15`	`#00FF2A`	`#00FF40`	`#00FF55`	`#00FF6A`
`#00FF80`	`#00FF95`	`#00FFAA`	`#00FFBF`	`#00FFD5`
`#00FFEA`	`#00FFFF`	`#00EAFF`	`#00D5FF`	`#00BFFF`
`#00AAFF`	`#0095FF`	`#0080FF`	`#006AFF`	`#0055FF`
`#0040FF`	`#002AFF`	`#0015FF`	`#0000FF`	`#1500FF`
`#2B00FF`	`#4000FF`	`#5500FF`	`#6A00FF`	`#8000FF`
`#9500FF`	`#AA00FF`	`#BF00FF`	`#D400FF`	`#EA00FF`
`#FF00FF`	`#FF00EA`	`#FF00D4`	`#FF00BF`	`#FF00AA`
`#FF0095`	`#FF0080`	`#FF006A`	`#FF0055`	`#FF0040`
`#FF002B`	`#FF0015`
Background `#000000`
Blend mode: `screen` \| Fill: `true`

## Quick checklist 1. Install `@tsparticles/engine` (or use the CDN bundle below) 2. Load a base package (for example `@tsparticles/basic`) and call `loadRainbowPalette` before `tsParticles.load(...)` 3. Apply the palette plus a minimal particles configuration in your options A palette defines colors, not complete behavior, so pair it with a runtime package and particle options. ## How to use it ### CDN / Vanilla JS / jQuery ```html ``` ### Usage Once the scripts are loaded you can set up `tsParticles` like this: ```javascript (async engine => { await loadBasic(engine); await loadRainbowPalette(engine); const options = { particles: { number: { value: 200 }, shape: { type: "circle" }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: "rainbow", }; await engine.load({ id: "tsparticles", options, }); })(tsParticles); ``` #### Customization **Important ⚠️** You can override all the options defining the properties like in any standard `tsParticles` installation. ### Frameworks with a tsParticles component library Checkout the documentation in the component library repository and call the `loadRainbowPalette` function. ## Related docs - Presets and palettes catalog: - Main docs: