$9
Color System Tool Pro — Generate a complete design palette in seconds
Stop picking colors one by one.
Color System Tool Pro generates a complete, perceptually-balanced design palette from a single base color — then exports it directly into your stack. CSS variables, Tailwind config, SCSS, JSON tokens, Adobe swatches, SVG and PNG sheets. Everything, in one click.
Built on LCH color science (the same model behind Tailwind CSS v3 and Radix UI), every scale looks professional and stays accessible — no guesswork, no manual tweaking.
What you get
5 color groups, fully generated:
- Primary, Secondary, Accent — each with a 50–900 perceptual scale (10 stops)
- Neutral — subtly tinted toward your primary hue so it looks designed, not generic
- Semantic — Success, Warning, Error, Info, auto-harmonized to your palette
7 color harmony modes: Monochromatic · Analogous · Complementary · Triadic · Split-complementary · Tetradic · Square — each button shows a live mini-preview before you commit.
Extract colors from any photo — drag & drop an image (or click to browse) and the tool pulls out the dominant colors using in-browser analysis. The most vivid color is auto-selected as your base; click any other swatch to use that one instead. Then hit Generate. Your photo never leaves your device.
Fine-tune with hex, HSL, or the color picker — all inputs stay in sync. Edit any of them after generating and the whole system regenerates live — no need to press Generate again.
Live UI preview — a mock interface (header, buttons, cards, alerts) rendered with your actual palette, in both light and dark mode, so you see how the system behaves in a real layout before you export.
WCAG accessibility checker — contrast ratios and AA/AAA badges for every key foreground/background pair. Know before you ship.
Lock & regenerate — lock the scales you love, then regenerate the rest to explore variations without losing what's working. Primary is locked by default so your base never drifts.
Export formats (all 7 included)
| Format | File | Use it in |
|---|---|---|
| CSS custom properties | colors.css | Any web project |
| Tailwind config | tailwind.colors.js | Tailwind CSS |
| SCSS variables | _colors.scss | SCSS/Sass projects |
| JSON design tokens | design-tokens.json | Style Dictionary, Theo |
| SVG swatch sheet | swatches.svg | Figma import, docs |
| PNG swatch sheet (2×) | swatches.png | Presentations, client deliverables |
| Adobe Swatch Exchange | palette.ase | Photoshop, Illustrator |
Who it's for
- UI/UX designers building or extending a design system
- Developers who need a solid, consistent palette from day one
- Freelancers delivering a color system as part of a branding or product package
- Design students learning how professional color systems are structured
How it works
- Pick or paste your base hex color — or extract one from a photo
- Choose a harmony mode
- Hit Generate System
- Export to any format with one click
Single HTML file. No install. No account. No internet needed after download. Opens in any modern browser on Mac, Windows, or Linux.
WHAT'S IN THE DOWNLOAD
CST_Pro.html— the complete tool, single self-contained file
color system, design tokens, color palette generator, Tailwind colors, CSS variables, SCSS, design system, color tool, UI design, color harmony, WCAG, accessibility, Adobe swatches, ASE, design tool