// generate tints and shades from any color
Free browser-based tint and shade generator. Enter any color and instantly generate a full scale of tints (lighter) and shades (darker) with HEX, RGB, and HSL values. No sign-up required.
Click the swatch or type a HEX value. Hit the random button for inspiration.
Choose how many tints and shades to generate (2–20 per side) and whether to mix in RGB or HSL space.
Click any swatch to copy. Export the full scale as CSS custom properties, a Tailwind color config, or JSON.
A free browser-based tool that generates a complete scale of tints (lighter) and shades (darker) from any base color. Choose your step count and interpolation method, copy individual values or export the full scale as CSS variables, a Tailwind palette config, or JSON — no server required.
A tint is created by mixing a color with white — it becomes progressively lighter while retaining the original hue. A shade is created by mixing a color with black — it becomes progressively darker. Both operations reduce saturation slightly as the steps approach the extremes. Together, a tint-shade scale gives you the full lightness range of a hue, from near-white to near-black.
RGB mix mode linearly interpolates each R, G, B channel independently between the base color and white or black. HSL mix mode adjusts only the lightness channel while preserving the hue and saturation. HSL mixing tends to produce more perceptually uniform scales, while RGB mixing can feel more neutral. Try both to see which fits your design better.
The Tailwind export produces a JavaScript object snippet using Tailwind's standard scale keys (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950) that you can paste directly into your tailwind.config.js under theme.colors.yourColorName. The base color maps to 500, lighter tints to lower keys, and darker shades to higher keys — matching Tailwind's conventional color scale direction.
For a standard design system color scale (like Tailwind's), 9–10 steps per side covers the full range well. For minimal systems, 4–5 steps is sufficient. For fine-grained data visualization color scales, 15–20 steps gives you smooth gradation. More than 20 steps produces colors that are nearly identical to neighbors and is rarely useful in practice.
Yes. The CSS export gives you a :root { } block with each step as a custom property — e.g. --color-100 through --color-900. Paste it into your stylesheet and reference the variables anywhere with var(--color-100). This integrates directly with any CSS-based design system.
When using the Tailwind export with a standard 9-step scale, the base color is assigned key 500 — the center of Tailwind's conventional 50–950 range. Steps toward white get keys 400, 300, 200, 100, 50. Steps toward black get keys 600, 700, 800, 900, 950. This mirrors how Tailwind's built-in palettes are structured.
In color theory, a tint is any hue mixed with white, and a shade is any hue mixed with black. Together they form a continuous scale from near-white to near-black, anchored by the original color in the middle. This is the foundation of every color palette in modern design systems — from Tailwind CSS to Material Design to Radix UI Colors.
When building a UI, you rarely use a single flat color. You need lighter variants for hover states, backgrounds, and disabled elements; and darker variants for text, borders, and pressed states. A well-generated tint-shade scale gives you all of these systematically.
The two most common ways to interpolate between colors are in RGB space and in HSL space. In RGB space, you linearly blend each channel: a 50% tint of rgb(52, 211, 153) toward white gives rgb(154, 233, 204). In HSL space, you hold hue and saturation constant and only move lightness toward 100% (for tints) or 0% (for shades). HSL mixing tends to produce more perceptually uniform results because the human visual system is closer to cylindrical than to cube-shaped color perception.
For most UI design purposes, both methods produce acceptable results. HSL mixing is better for monochromatic palettes where color identity should be preserved. RGB mixing is more neutral and predictable in how it handles highly saturated hues.
Tailwind CSS uses a numeric scale from 50 (lightest) to 950 (darkest), with 500 conventionally representing the base color. To build a compatible scale with this tool, set the step count to 9 and use the Tailwind export. The output maps your tints to keys 50–400 and your shades to 600–950, with 500 as the base. Paste the result into tailwind.config.js under your custom color name and Tailwind's entire utility class system will immediately work with your palette.