Color Palette
A comprehensive visual reference of all available colors with variants. Click any color to copy its name to your clipboard.
Brand Colors
The main brand colors used throughout the application.
Primary
primary
Utility
Component
primary-hover
Utility
primary-light
Utility
primary-lighter
Utility
primary-dark
Utility
primary-bg
CSS Var
primary-border
CSS Var
primary-text
CSS Var
Secondary
secondary
Utility
Component
secondary-hover
Utility
secondary-light
Utility
secondary-lighter
Utility
secondary-dark
Utility
secondary-bg
CSS Var
secondary-border
CSS Var
secondary-text
CSS Var
Tertiary
tertiary
Utility
Component
tertiary-hover
Utility
tertiary-light
Utility
tertiary-lighter
Utility
tertiary-dark
Utility
tertiary-bg
CSS Var
tertiary-border
CSS Var
tertiary-text
CSS Var
Semantic Colors
Colors with semantic meaning for success, danger, warning, and info states.
Success
success
Utility
Component
success-hover
Utility
success-light
Utility
success-lighter
Utility
success-dark
Utility
success-bg
CSS Var
success-border
CSS Var
success-text
CSS Var
Danger
danger
Utility
Component
danger-hover
Utility
danger-light
Utility
danger-lighter
Utility
danger-dark
Utility
danger-bg
CSS Var
danger-border
CSS Var
danger-text
CSS Var
Warning
warning
Utility
Component
warning-hover
Utility
warning-light
Utility
warning-lighter
Utility
warning-dark
Utility
warning-bg
CSS Var
warning-border
CSS Var
warning-text
CSS Var
Info
info
Utility
Component
info-hover
Utility
info-light
Utility
info-lighter
Utility
info-dark
Utility
info-bg
CSS Var
info-border
CSS Var
info-text
CSS Var
Accent Colors
Additional colors for decorative and brand purposes.
Purple
purple
Utility
Component
purple-hover
Utility
purple-light
Utility
purple-lighter
Utility
purple-dark
Utility
purple-bg
CSS Var
purple-border
CSS Var
purple-text
CSS Var
Teal
teal
Utility
Component
teal-hover
Utility
teal-light
Utility
teal-lighter
Utility
teal-dark
Utility
teal-bg
CSS Var
teal-border
CSS Var
teal-text
CSS Var
Orange
orange
Utility
Component
orange-hover
Utility
orange-light
Utility
orange-lighter
Utility
orange-dark
Utility
orange-bg
CSS Var
orange-border
CSS Var
orange-text
CSS Var
Pink
pink
Utility
Component
pink-hover
Utility
pink-light
Utility
pink-lighter
Utility
pink-dark
Utility
pink-bg
CSS Var
pink-border
CSS Var
pink-text
CSS Var
Neutral Colors
Neutral colors for backgrounds, text, and borders.
white
Utility
light (bg)
Utility
border
CSS Var
border-light
CSS Var
text
CSS Var
text-muted
CSS Var
dark
CSS Var
black
CSS Var
Extended Neutral Colors
Additional neutral color tokens for specific use cases like card backgrounds and extended text color variants.
text-light
CSS Var
text-dark
CSS Var
bg-light
CSS Var
card-bg
CSS Var
border-dark
CSS Var