Alpha Color

Colors

tsParticles colors can have a lot of values and every color (except {@link IParticlesOptions.color | particles color}) in options can accept all of these values.

All color properties accepts strings and objects. The color object has a single property: value.

Let's explore all valid values.

Strings

hex short syntax

color: "#fff";
Copy

hex full syntax

color: "#ffffff";
Copy

rgb syntax

alpha will be ignored, there are opacity values for that

color: "rgb(255, 255, 255)";
Copy

hsl syntax

alpha will be ignored, there are opacity values for that

color: "hsl(0, 100%, 100%)";
Copy

hsv syntax

alpha will be ignored, there are opacity values for that

color: "hsv(0°, 100%, 100%)";
Copy

random

random: "random"; // a random color will be picked
Copy

That's the easier part, now we go deeper.

---

Color Object

strings, again

color: {
    value: "#fff"; // I won't repeat myself, all the string values above will be valid here too
}
Copy

rgb object

color: {
  value: {
    r: 255,
    g: 255,
    b: 255
  }
}
Copy

hsl object

color: {
  value: {
    h: 0,
    s: 100,
    l: 100
  }
}
Copy

hsv object

color: {
  value: {
    h: 0,
    s: 100,
    v: 100
  }
}
Copy

rgb/hsl nested object

color: {
  value: {
    rgb: { r: 255, g: 255, b: 255 } // inlined for brevity, it's the same rgb object as above
    hsl: { h: 0, s: 100, l: 100 } // inlined for brevity, it's the same hsl object as above
  }
}
Copy

if rgb and hsl properties are set together only rgb will be used

---

Multiple colors

Every color.value property accepts a mixed array of its values, but be careful, the color will be random picked.

For some objects this behavior will work fine, other objects like links are runtime generated and will have a different color every frame.