Trae Zeeofor
Palette Validator
Card Surface Test
This tests the wasabi-green card background against its specific foreground color.
Muted Surface
Used for subtle backgrounds and disabled states.
Accent Surface
Great for highlighted list items or callouts.
Feedback States
Destructive State
Warning State
Caution State
Data Visualization Colors
Chart 1
Chart 2
Chart 3
Chart 4
Chart 5
Focus & Borders
Welcome to Your Site
Testing your beautiful color palette in action
Featured Content
1
Card Title 1
This card uses the card background color with appropriate foreground text for contrast.
2
Card Title 2
This card uses the card background color with appropriate foreground text for contrast.
3
Card Title 3
This card uses the card background color with appropriate foreground text for contrast.
Status Messages
Success: Operation completed successfully using accent colors!
Warning: This is a warning message using the warning color.
Caution: Proceed with care using the caution color.
Chart Color Palette
Chart 1
Chart 2
Chart 3
Chart 4
Chart 5
Main Content Area
This section demonstrates how the sidebar colors work alongside the main content. The sidebar uses dedicated color variables to create a distinct visual hierarchy.
Popover Component
This demonstrates the popover colors for dropdowns and tooltips.