Shades & Tints Generator
Enter a base color to build a full lightness ladder — tints (mixed toward white) above, the base color in the middle, and shades (mixed toward black) below. Useful for building a design-system color scale, hover/active states, or backgrounds and borders that all relate to one brand color.
Sponsors
About Tints, Shades, and Tones
Tints, shades, and tones are the three basic ways to shift a color's lightness while keeping its underlying hue recognizable. A tint is a color mixed with white — it gets lighter and less saturated. A shade is a color mixed with black — it gets darker and more muted. A tone mixes in neutral gray instead, which lowers saturation without pushing lightness sharply toward either extreme. This tool generates tints and shades — the two most common building blocks for UI color scales — and leaves tones out since they need a separate gray-mixing ratio to define.
The Formula
For step \( i \) of \( N \) steps in either direction, the mix amount is:
\[ t = \frac{i}{N+1} \]
This evenly spaces every step between the base color and pure white or pure black, without ever reaching either extreme (since \( i \) never equals 0 or \( N+1 \)). For a tint, each channel moves toward 255:
\[ \text{TintChannel} = \text{round}\big(C + (255 - C) \times t\big) \]
For a shade, each channel moves toward 0:
\[ \text{ShadeChannel} = \text{round}\big(C \times (1 - t)\big) \]
where \( C \) is the base color's R, G, or B value. Applying this to all three channels independently produces a full ladder from pale tint through the base color to deep shade.
Using the CSS Output
The "Copy all as CSS custom properties" button numbers the ladder evenly (100, 200, 300...) from lightest to darkest and copies a ready-to-paste block of --color-* declarations, so you can drop an entire scale into a stylesheet's :root in one step.
Frequently Asked Questions
What's the difference between a tint, a shade, and a tone?
A tint mixes a color with white (lighter, softer). A shade mixes a color with black (darker, more muted). A tone mixes a color with gray (lower saturation, without necessarily getting much lighter or darker). This tool produces tints and shades; true tones require choosing a specific gray-mix ratio.
How many steps should a color scale have for UI design?
Most design systems use 9-11 steps total (for example, 5 tints, the base, and 5 shades), which is enough to cover backgrounds, borders, hover states, disabled states, and text-on-color combinations without excessive fine-grained overlap. Fewer steps (3-4 each direction) work fine for smaller projects.
Is this the same as the Tailwind color generator on this site?
No. The Tailwind color generator is specifically built to output a Tailwind v3/v4-style config object with the exact shade-numbering conventions Tailwind uses. This tool is a general-purpose tint/shade ladder that outputs plain hex codes, rgb() values, and generic CSS custom properties — usable in any project, framework, or design tool, not just Tailwind.
Can I use this for a design system color scale?
Yes. Generating tints and shades from a single brand color is a common way to build a consistent scale for backgrounds, borders, hover/active states, and text. Copy the CSS custom properties directly into your design tokens file, or use the hex values as a starting point and fine-tune contrast for accessibility as needed.