Tints and Shades Generator
Turn one base color into a full set of lighter tints, darker shades, and an optional named scale — ready to export as CSS variables, JSON, or a JS object.
HSL lightness keeps the original hue and saturation; RGB mixing blends channels directly toward white or black, which can shift the hue slightly.
Tints
Shades
Tones
Named scale
How to use the tints and shades generator
- Pick a base color, or type its HEX value.
- Choose how many steps you want (3 to 10).
- Switch between HSL lightness and RGB mixing to compare results.
- Optionally show tones and the named 50–950 scale, then copy whichever set you need.
What the output means
Each swatch shows its HEX, RGB, and HSL values along with how far it's shifted from the base color. Tints move toward white, shades move toward black, and tones (optional) move toward neutral gray. The named scale places your base color at or near 500, following the common lighter-numbers-are-lighter convention used by many design systems.
Common use cases
Build a full color scale for a design system from a single brand color, generate hover and active states for a button, or create a background/foreground pairing that shares the same hue.
Frequently asked questions
What is the difference between a tint and a shade?
A tint is a base color mixed progressively with white, making it lighter. A shade is a base color mixed progressively with black, making it darker.
Why do RGB mixing and HSL lightness produce different results?
RGB mixing blends the color's red, green, and blue channels directly toward white or black. HSL lightness instead keeps the original hue and saturation and only adjusts lightness, which often preserves the color's character more faithfully.
What does the numbered scale (50-950) mean?
It's a common design-system naming convention, popularized by Tailwind CSS, where lower numbers are lighter and higher numbers are darker. 500 is placed at or near your base color.
Can two generated colors look identical?
Very light or very dark base colors can produce steps that round to the same displayed value. Full precision is kept internally — only the displayed value is rounded.