tsParticles palette with all 16 Minecraft dye colors.
All 16 Minecraft dyes:
#F9FFFEWhite |
#9D9D97Light Gray |
#474F52Gray |
#1D1D21Black |
#835432Brown |
#B02E26Red |
#F9801DOrange |
#FED83DYellow |
#80C71FLime |
#5E7C16Green |
#169C9CCyan |
#3AB3DALight Blue |
#3C44AABlue |
#8932B8Purple |
#C74EBDMagenta |
#F38BAAPink |
|
Background #21212B
|
|||
Blend mode: screen | Fill: true
|
|||
@tsparticles/engine (or use the CDN bundle below)@tsparticles/basic) and call loadMinecraftPalette before tsParticles.load(...)A palette defines colors, not complete behavior, so pair it with a runtime package and particle options.
<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-minecraft@4/tsparticles.palette-palette-minecraft.min.js"></script>
Once the scripts are loaded you can set up tsParticles like this:
(async engine => {
await loadBasic(engine);
await loadMinecraftPalette(engine);
const options = {
particles: {
number: { value: 200 },
shape: { type: "circle" },
size: { value: { min: 10, max: 15 } },
move: {
enable: true,
speed: 2,
},
},
palette: "minecraft",
};
await engine.load({
id: "tsparticles",
options,
});
})(tsParticles);
Important ⚠️
You can override all the options defining the properties like in any standard tsParticles installation.
Checkout the documentation in the component library repository and call the loadMinecraftPalette function.