Using Random Colors for Dynamic Avatar Generation

Random color generation adds vibrancy and uniqueness to user avatars. The S11 Avatar API provides sophisticated random color features that ensure both aesthetic appeal and readability.

Basic Random Color Usage

Simple Random Background

// Generate avatar with random background
const randomBgAvatar = 'https://www.s11-avatar.com/api/avatar?name=John+Doe&background=random';

Random Text Color

// Random text color with fixed background
const randomTextAvatar = 'https://www.s11-avatar.com/api/avatar?name=Jane+Smith&color=random&background=ffffff';

Fully Random Colors

// Both background and text colors random
const fullyRandomAvatar = 'https://www.s11-avatar.com/api/avatar?name=User&background=random&color=random';

Seeded Random Colors

For consistent colors across sessions, use seeds. This ensures the same user always gets the same colors:

// Consistent random colors using seeds
const userId = 12345;
const seededAvatar = `https://www.s11-avatar.com/api/avatar?name=John+Doe&background=random&bgSeed=${userId}&color=random&textSeed=${userId + 1}`;

Practical Applications

User Registration

const generateUserAvatar = (name, userId) => {
  // Use user ID as seed for consistent colors
  return `https://www.s11-avatar.com/api/avatar?name=${encodeURIComponent(name)}&background=random&bgSeed=${userId}&color=ffffff&rounded=true`;
};

// Usage
const newUserAvatar = generateUserAvatar('Sarah Johnson', 67890);

Team Member Lists

Color Algorithm

Best Practices

Conclusion