Lumidot includes 20 built-in color variants, each optimized for vibrant, eye-catching animations with automatic glow effects.
Using Color Variants Set the color using the variant prop:
< Lumidot variant = "blue" /> // Default < Lumidot variant = "emerald" /> < Lumidot variant = "fuchsia" />
All Color Variants Warm Colors
Cool Colors
Purple & Violet
Neutral
Amber < Lumidot variant = "amber" />
Hex: #fcd34dOrange < Lumidot variant = "orange" />
Hex: #fdba74Red < Lumidot variant = "red" />
Hex: #fca5a5Rose < Lumidot variant = "rose" />
Hex: #fda4afPink < Lumidot variant = "pink" />
Hex: #f9a8d4Yellow < Lumidot variant = "yellow" />
Hex: #fde047Blue < Lumidot variant = "blue" />
Hex: #93c5fd (Default)Sky < Lumidot variant = "sky" />
Hex: #7dd3fcCyan < Lumidot variant = "cyan" />
Hex: #67e8f9Teal < Lumidot variant = "teal" />
Hex: #5eead4Emerald < Lumidot variant = "emerald" />
Hex: #6ee7b7Green < Lumidot variant = "green" />
Hex: #86efacLime < Lumidot variant = "lime" />
Hex: #bef264Indigo < Lumidot variant = "indigo" />
Hex: #a5b4fcViolet < Lumidot variant = "violet" />
Hex: #c4b5fdPurple < Lumidot variant = "purple" />
Hex: #d8b4feFuchsia < Lumidot variant = "fuchsia" />
Hex: #f0abfcWhite < Lumidot variant = "white" />
Hex: #ffffffBest used on dark backgrounds. Consider reducing glow for subtle effects.
Slate < Lumidot variant = "slate" />
Hex: #cbd5e1Black < Lumidot variant = "black" />
Hex: #000000Best used on light backgrounds. Works well with high glow values for contrast.
Color Reference Table Variant Hex Code Category amber#fcd34dWarm blue#93c5fdCool cyan#67e8f9Cool emerald#6ee7b7Cool fuchsia#f0abfcPurple/Violet green#86efacCool indigo#a5b4fcPurple/Violet lime#bef264Cool orange#fdba74Warm pink#f9a8d4Warm purple#d8b4fePurple/Violet red#fca5a5Warm rose#fda4afWarm sky#7dd3fcCool slate#cbd5e1Neutral teal#5eead4Cool violet#c4b5fdPurple/Violet white#ffffffNeutral black#000000Neutral yellow#fde047Warm
How Glow Works Each color variant includes an automatic glow effect that enhances visibility and creates depth:
// Default glow (8px) < Lumidot variant = "emerald" glow = { 8 } /> // Subtle glow < Lumidot variant = "emerald" glow = { 4 } /> // Intense glow < Lumidot variant = "emerald" glow = { 16 } /> // No glow < Lumidot variant = "emerald" glow = { 0 } />
The glow color is automatically calculated by brightening the base color by 50% and adding transparency. This ensures consistent, harmonious glow effects across all variants.
Color Psychology Choose colors that align with your use case:
Action & Urgency Red, Orange, Yellow Use for critical operations, warnings, or time-sensitive actions.
Success & Completion Green, Emerald, Teal Use for successful operations, confirmations, or completed tasks.
Information & Trust Blue, Sky, Cyan Use for informational states, data loading, or neutral processes.
Premium & Creative Purple, Violet, Fuchsia, Pink Use for premium features, creative tools, or special experiences.
Dark vs Light Backgrounds Dark Backgrounds
Light Backgrounds
Most colors work beautifully on dark backgrounds. Recommended variants: // High contrast, vibrant < Lumidot variant = "cyan" /> < Lumidot variant = "emerald" /> < Lumidot variant = "fuchsia" /> < Lumidot variant = "yellow" /> // Soft, elegant < Lumidot variant = "blue" /> < Lumidot variant = "purple" /> < Lumidot variant = "rose" /> // Neutral < Lumidot variant = "white" glow = { 12 } /> < Lumidot variant = "slate" glow = { 10 } />
For light backgrounds, consider reducing glow or using darker variants: // Vibrant with reduced glow < Lumidot variant = "indigo" glow = { 4 } /> < Lumidot variant = "emerald" glow = { 4 } /> < Lumidot variant = "rose" glow = { 4 } /> // High contrast < Lumidot variant = "black" glow = { 8 } /> // Soft, subtle < Lumidot variant = "slate" glow = { 2 } />
Avoid white and very light colors on light backgrounds. They will be barely visible.
Custom Colors If you need a custom color not included in the built-in variants, you can override the color using CSS custom properties:
< Lumidot variant = "blue" style = { { '--lumidot-color' : '#ff6b35' , '--lumidot-glow' : '0 0 3.2px #ff6b35, 0 0 8px #ffa89060' } as React . CSSProperties } />
When using custom colors, you’ll need to manually define the glow effect to match your color.
Programmatic Access You can import the COLORS constant to access color values programmatically:
import { COLORS } from 'lumidot' ; console . log ( COLORS . emerald ); // '#6ee7b7' console . log ( COLORS . fuchsia ); // '#f0abfc' // Use in your own components const buttonColor = COLORS . blue ;
Next Steps
Patterns Explore all 36 animation patterns
Customization Learn about scale, glow, duration, and direction