Color Palette Generator
Pick one base color and generate a harmonious palette using complementary, analogous, triadic or monochromatic rules. Export to CSS, Tailwind, SCSS or JSON.
What this page covers
This page explains the workflow and links directly to the relevant section of the main Chromaforge tool.
- Five harmony types: complementary, analogous, triadic, split-complementary and tetradic.
- Monochromatic mode generates a 7-stop tonal scale from one hue.
- Each palette includes an 11-step shade scale from 50 to 950.
- Export CSS variables, Tailwind config, SCSS maps and JSON tokens in one click.
Which harmony should I start with?
Complementary gives the strongest contrast between two colors and works well for CTAs and alert states. Analogous is calmer and suits content-heavy interfaces. Triadic gives more variety but is harder to balance — keep two colors muted and use the third as an accent only.
How many colors should a UI palette have?
A practical UI palette needs one primary color, one neutral scale, and one or two semantic accents (success, error, warning). More than five named colors without a clear role makes maintenance harder and design decisions less consistent.
Can I export directly to Figma?
Not directly. Copy the HEX values or CSS variables from the export panel and paste them into Figma's color styles manually. The CSS variables block maps cleanly to Figma's variable collections.