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 doGenerate palettes from one or more hex values (supports hex, #hex, and shorthand)Choose 5, 10, or 20 stepsAdd related palettesCreate local paint stylesWhy designers use itConsistent, predictable color mathFast palette explorationPerfect for design systems, UI kits, and handoffMatches 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 | 8 |
|---|---|
| Created | December 10, 2025 |
| Last Updated | March 6, 2026 |
| Category | shapes-colors |
| Creator | Michael Edelstone |
| Stats | 72 installs, 13 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.