Color palette reference showing semantic colors and theme color slots with their utility classes.
Semantic Colors
Standard semantic colors used throughout the framework for status indication.
Success
Success
--pa-success-bg
Warning
Warning
--pa-warning-bg
Danger
Danger
--pa-danger-bg
Info
Info
--pa-info-bg
Accent
Accent
--pa-accent
Main BG
Main BG
--pa-main-bg
Page BG
Page BG
--pa-page-bg
Theme Color Slots (1-9)
Custom theme colors that can be overridden per-theme. Use these for branded elements.
Color 1
Color 1
--pa-color-1
Color 2
Color 2
--pa-color-2
Color 3
Color 3
--pa-color-3
Color 4
Color 4
--pa-color-4
Color 5
Color 5
--pa-color-5
Color 6
Color 6
--pa-color-6
Color 7
Color 7
--pa-color-7
Color 8
Color 8
--pa-color-8
Color 9
Color 9
--pa-color-9
Color Utility Classes
Apply theme colors to any element using these utility classes.
Background Colors
.pa-bg-color-1 to .pa-bg-color-9
bg-color-1
bg-color-2
bg-color-3
bg-color-4
bg-color-5
bg-color-6
bg-color-7
bg-color-8
bg-color-9
Text Colors
.pa-text-color-1 to .pa-text-color-9
Text 1
Text 2
Text 3
Text 4
Text 5
Text 6
Text 7
Text 8
Text 9
Border Colors
.pa-border-color-1 to .pa-border-color-9
Border 1
Border 2
Border 3
Border 4
Border 5
Applied to Components
Examples of color utilities applied to various components.
Alerts with Theme Colors
Color 1 Alert: Using
.pa-bg-color-1 utility class.
Color 4 Alert: Using
.pa-bg-color-4 utility class.
Color 7 Alert: Using
.pa-bg-color-7 utility class.
Cards with Colored Headers
Color 1 Header
Card with
.pa-bg-color-1 on header.
Color 5 Header
Card with
.pa-bg-color-5 on header.
Color 8 Header
Card with
.pa-bg-color-8 on header.
Mixed Badges
Success
Warning
Danger
Info
Color 1
Color 2
Color 6
Color 9