Color Shades Generator

Color Shades Generator - Build Tone Ladders for Your Brand

Modern design systems run on consistent tone ladders — the structured 50-100-200...900-950 scales that Tailwind, Material 3, Radix, and Stripe Atlas all use to express the same color at different lightness levels. This generator takes one HEX base color and builds a ramp of shades (darker, blended toward black) and tints (lighter, blended toward white) in sRGB, then mapped onto a 50-950 naming scale. Every swatch shows its live WCAG 2.1 contrast ratio against pure white and pure black with AA/AAA pass-fail badges, so you can pick safe text-on-color combinations before shipping tokens. Output is ready for buttons, hover states, chart palettes, dark-mode pairs, and print proofs — export as CSS custom properties, JSON design tokens, or a tailwind.config.js snippet. (Perceptually-uniform OKLCH ramping and HSL/OKLCH input are on the roadmap.)

What are shades and tints?

Tints mix a color with white to create lighter results, while shades blend with black for darker values. Balanced ladders provide flexibility for hover states, shadows, card backgrounds, and chart accents without guessing percentages.

How do I use this generator?

1) Enter or pick a base HEX color. 2) Set total swatches or adjust how many tints and shades you need. 3) Click Generate to update the preview. 4) Copy any swatch, or export CSS variables, JSON, or Tailwind config to drop into your project.

Why export in multiple formats?

Different teams prefer different pipelines. CSS variables slot straight into stylesheets, JSON works for tokens or Figma plugins, and Tailwind config integrates with modern utility-first projects.

How many steps should my color ramp have?

Most design systems land on 9-11 steps because that hits a sweet spot: enough variation for primary, hover, focus, active, and disabled states plus light/dark backgrounds and borders, without bloating your token file. Tailwind ships 11 steps (50, 100, 200, ..., 900, 950); Material 3 ships 13 tones (0-100 in increments of 5 or 10); IBM Carbon ships 11; Radix ships 12. Fewer than 6 steps usually leaves you reaching for hand-tweaked colors during implementation; more than 13 wastes tokens that nobody will use. Pick 11 unless you have a specific reason to go denser.

Why does my middle shade not look like the base color?

In Tailwind-style scales the 500 step is the perceptual midpoint of the ramp, not your literal brand color. If your input is a vivid, saturated brand red, the algorithm centers it in a 0-100 lightness range — which often means the brand color falls at 600 or 700, not 500, because brands typically choose colors that sit darker than perceptual midgray for contrast against white. To anchor your literal brand at exactly step 500, increase the lightness of your input color or use a tool that lets you pin a custom step. Most teams accept the shift because the resulting ramp is more usable across light and dark themes.

What is OKLCH and why does perceptual color matter?

OKLCH (Oklab in cylindrical Lightness/Chroma/Hue form, introduced by Bjorn Ottosson in 2020 and shipped in CSS Color Module Level 4) is a perceptually uniform color space: equal numerical changes look equal to the human eye. HSL — the older convenience model — is not uniform; a 10-unit HSL lightness step looks tiny in yellows but huge in blues, which is why HSL-generated ramps feel uneven. This tool currently blends shades toward black and tints toward white in sRGB, which is fast and predictable but not strictly perceptually uniform; OKLCH ramping is a planned upgrade. If you need a perfectly even ramp today, paste the exported HEX values into an OKLCH editor. Browser support for OKLCH is now solid (Chrome 111+, Safari 16.4+, Firefox 113+).

How do I ensure accessibility (WCAG AA contrast)?

WCAG 2.1 requires body text to have a 4.5:1 contrast ratio against its background (AA), or 3:1 for text 18pt+ or bold 14pt+ (AA Large), or 7:1 for AAA. Every swatch in this tool shows two live badges — its contrast ratio against pure white (W) and pure black (B), each labeled AAA, AA, AA Large, or Fail — computed with the exact WCAG relative-luminance formula (sRGB linearization, then (L1+0.05)/(L2+0.05)). Generally steps 50-300 work as backgrounds for dark text, steps 700-950 as backgrounds for light text, and steps 400-600 fail both directions on body text (use them only for large display text or non-text UI elements like borders and dividers). Vivid blues are particularly tricky — even step 500 of a bright blue often fails AA on white, and the badge will say so.

Key Features

• Generate up to 16 total tints and shades from a single HEX
• Interactive swatch grid with copy-on-click behavior
• Independent controls for light tints and dark shades
• CSS, JSON, and Tailwind export blocks ready to paste
• Random color generator for quick exploration
• Live WCAG contrast badges (vs white and black, AA/AAA) on every swatch
• Responsive layout with keyboard-friendly swatch buttons
• Dark mode styling and smooth hover animation
• All calculations run locally in your browser