I often need clean color scales for design systems (primary-50 → primary-900, etc.), and got tired of building them manually or using tools that don’t fit dev workflows.
So I built Tint & Shades Palette Generator – a small tool to generate tints and shades from a base color, with exports that are friendly for design tokens and Figma.
What it does
- Generates tints and shades from a single base color
- Uses HSL for smoother, more predictable ramps
- Lets you quickly build scales like
50, 100, 200, …, 900 - Exports:
- JSON (design tokens style)
-
CSS custom properties (
--color-primary-50, etc.)
- 100% client-side, works offline after first load
Live tool: https://tintandshadesgenerator.com/
Source: https://github.com/Danishmk1286/tint-shade-palette-generator
How I use it
- To create base palettes for design systems
- To generate scales that I then test in Contrast Buddy (my WCAG contrast checker)
- To share consistent palettes between Figma and code
Feedback?
I’d love to know:
- How do you currently build your color scales?
- What export formats or integrations would make this more useful (Tailwind config, Style Dictionary, etc.)?
Issues / ideas / PRs welcome:
👉 https://github.com/Danishmk1286/tint-shade-palette-generator
Top comments (0)