What Palette Expander does
Palette Expander creates additional colors from the existing palette. It is useful when the original palette looks good but does not have enough colors for hover states, illustrations, charts, badges, empty states, or secondary interface elements.
Original and expanded colors
The component shows the original colors and the newly suggested colors separately. This helps you keep the main palette stable while testing extra colors without confusing them with the original set.
When to expand a palette
Expand a palette when you need more supporting tones, not when the core palette is already unclear. A strong palette usually has a small number of main colors and a larger supporting range. The expanded colors should support the main palette rather than compete with it.
Copying expanded colors
You can copy individual colors or copy the expanded set as structured data. Copying individual colors is best when you only need one extra shade. Copying the full set is better when you want to test the expanded palette in a design system or codebase.
How to use expanded colors safely
Do not give every expanded color the same importance. Pick a few for clear roles: one for secondary actions, one for illustrations, one for subtle backgrounds, and one for emphasis. Too many equal accent colors can make an interface feel noisy.