Chakra UI extends its default theme using extendTheme(), which merges your customizations with Chakra's built-in design tokens. The colors property defines your palette, and semanticTokens maps those colors to purpose-driven names. PaletteRx generates both.
How Chakra UI Handles Colors
Chakra's color system is organized as a flat map of named colors. Each color can have a scale (50 through 900) or be a single value. Semantic tokens layer meaning on top: primary might reference brand.500 in light mode and brand.200 in dark mode.
Exporting from PaletteRx
Select Chakra UI from the CSS & JS Frameworks section in PaletteRx's export step. The output generates an extendTheme() call with your colors as named entries and semantic tokens mapping Primary to primary and Secondary to secondary.
Each color is exported as a single hex value keyed by its PaletteRx slug. The semantic tokens layer adds the primary and secondary aliases that Chakra components reference.
Integration
Copy the generated theme into your app's theme configuration. Pass it to Chakra's ChakraProvider. Every Chakra component that references primary or secondary will use your PaletteRx colors.
Generating Shade Scales
Chakra expects color scales (50-900) for components like Button that reference colorScheme. You can extend the PaletteRx output by generating shades from the base hex value using HSL lightness adjustments, or use a library like Polished to auto-generate the scale.
useColorModeValue() hook lets you swap between light and dark values. Build both palettes in PaletteRx and reference the appropriate hex values in each mode for accessible dark mode support.