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.
Theme Color Slots (1-9)
Custom theme colors that can be overridden per-theme. Use these for branded elements.
Colors are ordered by perceived luminance: color-1 is always the lightest, color-9 is always the darkest. This consistent ordering allows components to pick slots by relative brightness (e.g. use lower numbers for light accents, higher numbers for dark/muted tones) without knowing the specific theme palette.
Color Utility Classes
Apply theme colors to any element using these utility classes.
Background Colors
.surface-color-1 to .surface-color-9
Slot background + auto-contrasting text. Use .bg-color-N for background only.
Text Colors
.text-color-1 to .text-color-9
Border Colors
.border-color-1 to .border-color-9
Applied to Components
Examples of color utilities applied to various components.
Alerts with Theme Colors
.pa-alert--color-1 variant (auto-contrasting text).
.pa-alert--color-4 variant (auto-contrasting text).
.pa-alert--color-7 variant (auto-contrasting text).
Cards with Colored Headers
Color 1 Header
.pa-card--color-1 variant.
Color 5 Header
.pa-card--color-5 variant.
Color 8 Header
.pa-card--color-8 variant.