Tints & Shades Generator
21 colors
#ffffffrgb(255, 255, 255)#ebf3fergb(235, 243, 254)#d8e6fdrgb(216, 230, 253)#c4dafcrgb(196, 218, 252)#b1cdfbrgb(177, 205, 251)#9dc1fbrgb(157, 193, 251)#89b4fargb(137, 180, 250)#76a8f9rgb(118, 168, 249)#629bf8rgb(98, 155, 248)#4f8ff7rgb(79, 143, 247)#3b82f6rgb(59, 130, 246)#3575ddrgb(53, 117, 221)#2f68c5rgb(47, 104, 197)#295bacrgb(41, 91, 172)#234e94rgb(35, 78, 148)#1e417brgb(30, 65, 123)#183462rgb(24, 52, 98)#12274argb(18, 39, 74)#0c1a31rgb(12, 26, 49)#060d19rgb(6, 13, 25)#000000rgb(0, 0, 0)Tekniska detaljer
How the Tints & Shades Generator Works
What the Tool Does
The Tints & Shades Generator creates lighter tints (mixed with white) and darker shades (mixed with black) from any base color. Enter a color and choose the number of steps to generate a smooth gradient of variations. Each step displays HEX, RGB values and the mixing percentage, making it easy to build consistent color scales for UI design, branding, and data visualization.
Common Developer Use Cases
Developers use tint and shade generators when building design token scales (e.g., blue-100 through blue-900), creating hover and active states for interactive elements, designing accessible color hierarchies, and producing consistent background and surface colors for light and dark themes. The tool is essential for building Tailwind CSS custom color palettes or Material Design color systems.
How Tints and Shades Work
A tint is created by mixing a color with white, increasing its lightness. A shade is created by mixing with black, decreasing lightness. The formula for tints is: new = base + (255 - base) × factor. For shades: new = base × (1 - factor). Steps are evenly distributed between the base color and pure white (tints) or pure black (shades), producing a linear gradient of color values.
Common Pitfalls and Edge Cases
Linear mixing with white or black can produce washed-out tints or muddy shades for some hues. Yellows may appear greenish when darkened, and blues may lose vibrancy when lightened. For perceptually uniform scales, consider using OKLCH or CIELAB color spaces. Always verify that your lightest tints and darkest shades maintain sufficient contrast against their intended backgrounds.
When to Use This Tool vs Code
Use this browser tool for quick exploration and generating color scales during design work. For production design systems, generate tints and shades programmatically using color libraries like chroma.js or culori that support perceptually uniform color spaces and can output design tokens in any format.