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
--pc-success-color
Warning
Warning
--pc-warning-color
Danger
Danger
--pc-danger-color
Info
Info
--pc-info-color
Accent
Accent
--pc-primary-color
Main BG
Main BG
--pc-main-bg
Page BG
Page BG
--pc-page-bg
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 1
Color 1
--pc-palette-1
Color 2
Color 2
--pc-palette-2
Color 3
Color 3
--pc-palette-3
Color 4
Color 4
--pc-palette-4
Color 5
Color 5
--pc-palette-5
Color 6
Color 6
--pc-palette-6
Color 7
Color 7
--pc-palette-7
Color 8
Color 8
--pc-palette-8
Color 9
Color 9
--pc-palette-9
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.
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
.text-color-1 to .text-color-9
Text 1
Text 2
Text 3
Text 4
Text 5
Text 6
Text 7
Text 8
Text 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
Color 1 Alert: Using
.pa-alert--color-1 variant (auto-contrasting text).
Color 4 Alert: Using
.pa-alert--color-4 variant (auto-contrasting text).
Color 7 Alert: Using
.pa-alert--color-7 variant (auto-contrasting text).
Cards with Colored Headers
Color 1 Header
Card with
.pa-card--color-1 variant.
Color 5 Header
Card with
.pa-card--color-5 variant.
Color 8 Header
Card with
.pa-card--color-8 variant.
Mixed Badges
Success
Warning
Danger
Info
Color 1
Color 2
Color 6
Color 9