A tint is created by mixing a color with white, making it lighter while maintaining the same hue. A shade is created by mixing a color with black, making it darker. This generator produces both in customizable steps from your base color, giving you a complete monochromatic scale.

This is a perceptual effect of additive color mixing. When you mix a saturated color with white, the resulting tint can appear less vibrant because white contains all wavelengths equally. For more perceptually uniform results, try using OKLCH input — its lightness channel is designed to match human vision better than HSL or simple RGB mixing.

OKLCH (Oklab Lightness, Chroma, Hue) is a modern color space designed for perceptual uniformity. Unlike HSL where 50% lightness doesn't always look halfway between black and white, OKLCH's lightness channel accurately represents how humans perceive brightness. Use it when you need visually even steps in your color scale, especially for accessibility-critical designs.

Reverse Mode uses inverse linear interpolation. If you provide a tint at 75% lightness (25% mixed with white), the generator calculates: base ≈ (tint - 25% × white) / 75%. This gives a mathematically correct estimate, though extreme values (very dark tints or very light shades) may produce out-of-gamut colors that get clamped to valid RGB.

The 20-step limit balances usability with precision. More steps create diminishing visual differences that become hard to distinguish and use effectively. For design systems, 5-10 steps per direction typically provide sufficient granularity. If you need more granular control, generate a smaller scale and use CSS color-mix() or preprocessor functions for intermediate values.

Use the Tailwind export format. It generates a nested JavaScript object compatible with theme.extend.colors in your tailwind.config.js. The naming follows Tailwind's convention (50, 100, 200... 950), making migration seamless if you later switch to the framework's built-in colors.

The contrast ratio uses the relative luminance formula from WCAG 2.1, which weights RGB channels as: 0.2126×R + 0.7152×G + 0.0722×B. This accounts for human eye sensitivity to green light. The preview shows ratios against pure black and white — for real-world testing with your actual background colors, use a dedicated contrast checker with your specific design context.

Yes. Set either Tint Steps or Shade Steps to 0 in the settings. This produces a one-directional scale useful for specific design needs, such as creating a highlight-only palette for light UIs or shadow-only scales for dark mode emphasis.

Short hex notation (#RGB instead of #RRGGBB) is displayed when all three color channels are repeating pairs (e.g., #FF6600 cannot shorten, but #FF6633 becomes #F63). The generator detects this automatically and shows the short form in the "hex-short" display mode, which can reduce CSS file sizes slightly.

1. Start with your brand color as the base (500)
2. Generate 4-5 tints and 4-5 shades for a 9-11 color scale
3. Export to CSS variables for immediate use
4. Verify contrast on the 400/500/600 range for text/background pairs
5. Repeat for accent colors, keeping consistent step counts
6. Document usage: 50-200 for backgrounds, 300-400 for borders, 500-600 for primary actions, 700-900 for text This creates a predictable, maintainable color system with built-in accessibility considerations.