Tints and Shades Generator
The tints and shades generator creates a full 11-step color scale from any HEX value. Enter your base color and the tool produces progressively lighter tints and darker shades across the 50 to 950 range, matching the Tailwind CSS color numbering system. Copy the entire scale as CSS variables or export individual HEX values for use in any design tool or codebase.
Click any swatch to copy its HEX value
Export full scale
How to create a complete color scale
Enter a HEX code for your base color. The generator places your input at the 500 step, the midpoint of the scale, and calculates progressively lighter values for 50 through 400 and darker values for 600 through 950. A color tints generator mixes your hue with white to produce lighter steps, while the shades are created by blending with black.
The resulting color scale gives you a full set of color variations for any purpose: use the lightest values (50–100) for backgrounds and surface tints, mid-range values (300–400) for borders and dividers, the base 500 for primary interactive elements, and darker values (700–900) for text and high-emphasis surfaces. A lighten color online tool like this one eliminates the need to manually create each step in a design tool.
Using your color scale in a design system
A color scale is the foundation of any scalable design system. Once generated, export the 11 steps as CSS custom properties with a consistent naming pattern such as --brand-50 through --brand-950. Reference these tokens throughout your stylesheet instead of inline HEX values, so changing the brand color only requires updating the scale rather than every individual rule.
For Tailwind CSS projects, paste the HEX values into your tailwind.config.js extend.colors object using keys 50 through 950 to create a custom color that behaves identically to Tailwind's built-in palettes. A tailwind color scale generator output from this tool is immediately compatible with that format. The darken color online output at 700, 800, and 900 are especially useful for accessible text colors against light backgrounds.
Frequently asked questions
A tint is a color mixed with white, making it lighter than the original. A shade is a color mixed with black, making it darker. The generator creates both directions from your base color: lighter values (tints) appear in the 50–400 range and darker values (shades) appear in the 600–950 range, following the same convention used by Tailwind CSS.
The generator produces an 11-step scale labeled 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950. Your input color maps to the 500 step, matching how Tailwind defines its mid-range base. Lighter 50–400 values are progressively mixed with white and darker 600–950 values are progressively mixed with black.
A color scale is a set of systematic variations of a single hue at different lightness levels. Design systems use color scales to create consistent visual hierarchy, surface states like hover and pressed, and semantic color tokens for backgrounds, borders, and text. A complete scale ensures any needed shade is available without creating one-off values.
Copy the CSS variables output and paste them into the :root block of your global stylesheet. Then reference each variable in your tailwind.config.js colors section using extend.colors to create custom color keys. Alternatively, paste the raw HEX values directly into the Tailwind config as a custom color object with keys 50 through 950.