Multiple Colors

This example demonstrates the multi-color feature where particles can be assigned colors with equal or weighted distribution. Create vibrant, rainbow-like effects or precisely control which colors appear more frequently.

Live Demo

Multiple Colors

Configuration

initParticleJS('#canvas', {
text: 'RAINBOW TEXT',
colors: [
  '#FF6B6B',  // Coral Red
  '#4ECDC4',  // Turquoise
  '#45B7D1',  // Sky Blue
  '#FFA07A',  // Light Salmon
  '#98D8C8'   // Mint Green
],
fontSize: 100
});

Key Features

• Random Distribution: Each particle gets a random color from your palette
• Vibrant Effect: Creates dynamic, colorful text that stands out
• Flexible Palette: Use 2-10 colors based on your design needs
• Visual Interest: Multi-color particles add energy and personality

How It Works

When multiple colors are provided, each particle is assigned a random color from the array during initialization. The color distribution is random, so you’ll see a nice mix of all colors throughout the text. Each time the page loads, particles get randomly distributed colors from the palette.

Weighted Color Distribution

Control exactly how colors are distributed by using weighted colors. This gives you precise control over color frequency.

Equal Distribution (Default)

// All colors have equal probability
colors: ['#FF6B6B', '#4ECDC4', '#45B7D1']

Weighted Distribution

// Red appears 80% of the time, others 10% each
colors: [
{ color: '#FF6B6B', weight: 8 },   // 8x more red
{ color: '#4ECDC4', weight: 1 },   // baseline cyan
{ color: '#45B7D1', weight: 1 }    // baseline blue
]

Weighted Colors (Red Dominant)

Weight Rules

• Positive integers only: 1, 2, 3, 10, 100, etc.
• No decimals: ❌ 2.5, 0.5, 1.75
• No zero or negatives: ❌ 0, -1
• Default weight: If not specified, defaults to 1
• Relative values: A weight of 5 means 5x more than weight 1

Common Use Cases for Weights

// Brand color with accent colors
colors: [
{ color: '#695aa6', weight: 10 },  // Primary brand color (dominant)
{ color: '#8b7bb8', weight: 2 },   // Secondary accent
{ color: '#ffffff', weight: 1 }    // Subtle highlight
]

// Gradient effect (emphasize middle)
colors: [
{ color: '#FF0000', weight: 1 },   // Less red
{ color: '#FF8800', weight: 5 },   // More orange (middle tone)
{ color: '#FFFF00', weight: 1 }    // Less yellow
]

// Seasonal theme (mostly green with red accents)
colors: [
{ color: '#228B22', weight: 12 },  // Forest green (dominant)
{ color: '#DC143C', weight: 3 },   // Crimson red (accent)
{ color: '#FFD700', weight: 1 }    // Gold (sparkle)
]

Best Practices

• Color Count: Use 3-5 colors for best visual effect
• Too Many Colors: More than 7-8 colors can look chaotic
• Too Few Colors: Just 2 colors might not create enough variety
• Color Harmony: Choose colors that complement each other for a professional appearance
• Contrast: Ensure all colors have good contrast against your background

Use Cases

Multi-color configurations are perfect for:

• Creative portfolios and artistic websites
• Entertainment and gaming sites
• Children’s applications
• Festive or celebratory themes
• Bold, attention-grabbing hero sections

Try It Yourself

Create your own color palette in the Interactive Playground.