Palette Generator
Generate either a role-based harmony palette or a stepped scale from one HEX color.
How to use
- Enter a base color, choose harmony or scale mode, and set steps when relevant.
Capabilities and scope
Harmony mode creates role colors such as primary, secondary, accent, surface, and text; scale mode creates a requested number of sequential colors.
How it works
The tool uses harmonyColors(base,'role') or scaleColors(base,steps,'scale') and emits swatches plus CSS variables.
Example
#176B5B in harmony mode creates role-named CSS color variables.
Useful for
- Draft a UI palette and CSS-token starting point
Before you use it
- Brand constraints, accessibility, and print gamut are not automatically guaranteed.
Standards and references
Frequently asked questions
Do all generated pairs pass WCAG?
No. Use the shown contrast information and test the actual foreground/background pair.