Examples

Real UI component blocks showcasing Sigma Avatars in practical applications

UI Component Examples

Social Media Feed

Posts and interactions with user avatars

Sarah Jones@sarah.jones·2h

Just shipped a new feature! The team did an amazing job 🎉

Mike Chen@mike.chen·4h

Working on some exciting new designs. Can't wait to share them!

Chat Interface

Team chat with online status

Alex Kim10:30 AM

Online

Emma Wilson9:45 AM

Away

David GarciaYesterday

Offline

Hey team! Ready for the standup?

Yes, starting in 5 minutes!

Team Directory

Employee profiles with role information

Lisa Martinez

Product Manager

Design

Tom Anderson

Senior Developer

Engineering

Notifications

Recent activity and updates

Jennifer Liu liked your post

2 minutes ago

Carlos Rodriguez commented on your design

1 hour ago

Project Alpha milestone completed

3 hours ago

Supported Color Formats

Sigma Avatars supports all modern CSS color formats: hex colors (3, 6, or 8 digits), RGB/RGBA, HSL/HSLA, OKLCH, and CSS custom properties for seamless design system integration.

Hex Colors

Standard 6-digit hex format

#0077be

#00a8cc

#40e0d0

#5f9ea0

#20b2aa

RGB Colors

RGB functional notation

rgb(255, 107, 53)

rgb(255, 142, 83)

rgb(255, 107, 107)

rgb(255, 127, 127)

rgb(255, 165, 0)

HSL Colors

Hue, saturation, lightness values

hsl(120, 60%, 50%)

hsl(180, 70%, 60%)

hsl(160, 80%, 70%)

hsl(140, 75%, 65%)

hsl(100, 65%, 55%)

OKLCH Colors

Modern perceptual color space

oklch(0.7 0.15 180)

oklch(0.8 0.12 200)

oklch(0.6 0.18 160)

oklch(0.75 0.14 220)

oklch(0.65 0.16 140)

CSS Variables

Theme-aware custom properties

var(--primary)

var(--secondary)

var(--accent)

var(--muted)

var(--card)

Mixed Formats

Combination of all formats

#6a4c93

rgb(142, 68, 173)

hsl(282, 39%, 60%)

oklch(0.65 0.15 300)

var(--primary)

Short Hex

3-digit hex shorthand

#f0a

#3c9

#a7f

#e84

#59d

RGBA/HSLA

Colors with alpha transparency

rgba(255, 0, 100, 0.8)

rgba(0, 255, 150, 0.9)

hsla(240, 100%, 70%, 0.85)

hsla(60, 80%, 60%, 0.75)

rgba(100, 200, 255, 0.95)

Theme Colors

Design system variables

var(--color-primary)

var(--color-secondary)

var(--color-accent)

var(--color-chart-1)

var(--color-chart-2)

Marble Pop

Classic color palette with 5 colors

#92A1C6

#146A7C

#F0AB3D

#C271B4

#C20D90

Use Case Examples

Team

Perfect for displaying team members in your about page or company directory

variant: beamsize: 64px

Sarah Johnson

Michael Chen

Emily Rodriguez

David Kim

Jessica Williams

Robert Zhang

Amanda Brown

Christopher Lee

Lisa Anderson

Daniel Martinez

Sophie Turner

James Wilson

Implementation

Example code for this use case

Integration Examples

With User Profiles

Fallback avatar when profile picture is missing

Multiple Color Formats

Mix hex, RGB, HSL, OKLCH, and CSS variables

Dynamic Sizing

Responsive avatars based on viewport

CSS Variables & Theming

Integrate with design systems and theme providers

Short Hex & Transparency

Support for 3-digit hex and alpha channels