Tint and shade generator from hex colors
Turn hex colors into organized tints and shades. Export full palettes as HEX, RGB, CSS, or JSON. Works in the browser for UI design, Sass, and design-system color ramps.
What is the tint and shade generator?
The Tint & Shade Generator at maketintsandshades.com takes one or more base hex colors and builds lighter tints and darker shades in consistent steps. Designers and developers use it when they need a full ramp (for example for primary buttons, borders, and hover states) without hand-adjusting every stop. You can export results as plain HEX lists, RGB, ready-to-paste CSS, or JSON for tokens and tooling.
Key features
What you can do on the official tint and shade tool.
Enter several hex values at once (space-separated) to generate ramps for a small palette in one pass.
Choose how many steps to lighten or darken so the scale matches your UI density.
Copy HEX, RGB, CSS, or JSON depending on whether you are writing stylesheets or feeding a design-token pipeline.
Build a URL that encodes your colors so teammates can reopen the same setup.
Toggle whether exported HEX values include # for paste-friendly workflows.
No install required; open the page and iterate while you work in Figma or your editor.
How to use it
A practical order of steps.
Paste valid hex codes separated by spaces, or use the color picker for a single base.
Set how strong each tint or shade step should be so the ramp fits your contrast needs.
Scan the generated swatches and pick stops that map to roles like default, hover, and disabled.
Choose HEX, RGB, CSS, or JSON and copy into your theme, Sass variables, or token file.
Tips
Get predictable results in production UI.
A mathematically even ramp does not guarantee accessible text contrast; verify on real backgrounds.
Map stops to names like primary-100 through primary-900 so code and design stay aligned.
Preview interactive states with your actual components, not only isolated swatches.
Who it helps
Teams that need systematic light and dark variants from a brand hex.
Building consistent button and surface ramps from a single brand color.
Generating Sass or CSS custom properties that mirror a design spec.
Drafting color scales before locking tokens in documentation.
Shipping landing pages and dashboards with a coherent color hierarchy quickly.
Benefits
Why a dedicated tint and shade tool saves time.
You get a full ramp from a base hex instead of nudging lightness on every swatch.
Multiple formats reduce copy-paste errors when moving from browser to repo.
Open the tool and experiment without a subscription for basic palette work.
Technical notes
How this page relates to the official tool.
The embedded experience is served by maketintsandshades.com; behavior and availability follow that site.
Use a current evergreen browser; script or storage restrictions may affect optional features.
Pair generated ramps with contrast checkers when you set text and icon colors.
Frequently Asked Questions
Have questions? We have answers.