Color Tint & Shade Generator
Generate a strip of tints (mixed toward white) and shades (mixed toward black) of a base color, with exact hex values for design systems and UI states.
Input
Pick a color, or type a HEX value directly.
How many tint/shade rows to generate, evenly spaced between the base color and pure white/black.
Output
| Percentage | Tint Hex | Shade Hex |
|---|---|---|
| No data yet | ||
Guides
The Color Tint & Shade Generator takes a single base color and builds a strip of lighter tints (mixed toward white) and darker shades (mixed toward black), each labeled with the mix percentage and its exact hex code. Pick a color, choose how many steps you want, and get a ready-made ramp for a design system, a component library, or a one-off UI.
Tints vs. shades
- Tint — the base color mixed with white. Tints are used for hover backgrounds, disabled states, subtle highlights, and light-mode surfaces that still read as "the same" color as your brand hue.
- Shade — the base color mixed with black. Shades are used for pressed/active states, dark-mode surfaces, borders, and text that needs to stay legible on a light background while still relating to the base color.
Together, a tint/shade ramp is the backbone of most design-token color scales (color-50 through color-900, or similar): one base hue expanded into a full range of lightness values that a UI can pull from consistently, instead of every component picking its own ad hoc shade.
How the mix works
Each step blends the base color's red, green, and blue channels toward the target (white or black) by a percentage t, using straight linear interpolation per channel:
- Tint:
channel + (255 - channel) × t - Shade:
channel × (1 - t)
The result is rounded to the nearest integer and converted back to hex. Percentages are spread evenly between 0% and 100% — for example, with 5 steps you get roughly 17%, 33%, 50%, 67%, and 83% — so the ramp never includes a degenerate 0% step (identical to the base color) or a 100% step (pure white or pure black).
How to use it
- Pick a base color with the color swatch, or type a hex value directly.
- Adjust the Steps slider (3–9) to control how many tint/shade rows are generated.
- The table updates instantly with each row's percentage, tint hex, and shade hex.
- Copy the table or download it as a CSV to paste into a stylesheet, a Tailwind config, or a design tool's color palette.
FAQ
Why RGB linear interpolation instead of adjusting HSL lightness? Mixing channels directly toward white or black is the most literal reading of "tint" and "shade" from traditional color theory — it's what happens when you physically mix paint with white or black pigment. Adjusting HSL lightness alone can shift how saturated a color looks partway through the ramp; direct channel mixing keeps the blend predictable.
Why don't the steps land on round percentages like 10%, 20%, 30%? Steps are spaced evenly across the interval between the base color and pure white/black, so the exact percentages shift with the step count. The middle step of an odd step count always lands on a clean 50%.
Can I use these colors directly in CSS?
Yes — each hex code is ready to paste into a CSS custom property, a Sass variable, or a Tailwind color scale, e.g. --color-primary-100: #E9E9E9;.
Will increasing the step count change my existing hex values? Yes. Since percentages are spread evenly across all steps, changing the step count reflows every step's position — it's not simply adding rows to the existing ramp.
Privacy
All color math happens locally in your browser — your base color and chosen step count are never sent to a server.