Back to Plugins
Tint & Shade Generator
Easily make tints and shades in 5%, 10%, or 20% increments
Plugin Preview
About this plugin
Instantly turn any hex color into a clean, structured palette of tints and shades—right inside Figma.
Built to match the meticulous output of the popular Tint & Shade Generator web app, this plugin makes it easy to explore color scales, build design systems, and generate token-ready palettes in seconds.
What you can do
- Generate palettes from one or more hex values (supports hex, #hex, and shorthand)
- Choose 5, 10, or 20 steps
- Add related palettes
- Create local paint styles
Why designers use it
- Consistent, predictable color math
- Fast palette exploration
- Perfect for design systems, UI kits, and handoff
- Matches modern frontend tooling output (Sass, PostCSS)
It's open source! If you notice a bug or want improvements, please file an issue on GitHub or email me the details.
Plugin Details
| Version | 5 |
|---|---|
| Created | December 10, 2025 |
| Last Updated | December 23, 2025 |
| Category | shapes-colors |
| Creator | Michael Edelstone |
| Stats | 41 installs, 6 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:ui.html
- main:code.js
- Document Access:dynamic-page
- Editor Types:figma
- Allowed Domains:
- none
More Like This
Discover other plugins in the shapes-colors category.