Colors

This page explains all color formats accepted by tsParticles options.

Most color fields accept either:

• a string
• an object with a value property

Note: particle base color has additional behaviors, see IParticlesOptions.color.

Quick examples

{
  "particles": {
    "color": {
      "value": "#ffffff"
    },
    "links": {
      "color": "#4f46e5"
    }
  }
}
Copy

{
  "background": {
    "color": {
      "value": "rgb(15, 23, 42)"
    }
  }
}
Copy

String formats

Hex (short)

"#fff"
Copy

Hex (full)

"#ffffff"
Copy

RGB

Alpha in color strings is ignored; use dedicated opacity options.

"rgb(255, 255, 255)"
Copy

HSL

Alpha in color strings is ignored; use dedicated opacity options.

"hsl(0, 100%, 100%)"
Copy

HSV

Alpha in color strings is ignored; use dedicated opacity options.

"hsv(0, 100%, 100%)"
Copy

Random

"random"
Copy

Object formats

String value

{
  "value": "#fff"
}
Copy

RGB object

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

HSL object

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

HSV object

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

Mixed object (rgb and hsl)

{
  "value": {
    "rgb": {
      "r": 255,
      "g": 255,
      "b": 255
    },
    "hsl": {
      "h": 0,
      "s": 100,
      "l": 100
    }
  }
}
Copy

If both rgb and hsl are provided, rgb is used.

Multiple colors

color.value can be an array of mixed valid values; one is picked randomly.

This works well for most elements, but runtime-generated entities (like some links) can produce frequent color changes.

Related docs

• Root options: Options
• Container runtime API: Container