Color palette reference showing semantic colors and theme color slots with their utility classes.
Colores semánticos
Standard semantic colors used throughout the framework for status indication.
Espacios de color del tema (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
Colores de borde
.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.