Why does this look different from other shade generators?

Most shade generators step lightness in HSL, which isn't perceptually uniform — saturated colors look muddy at the extremes and hues can shift. This tool builds the primary ramp in OKLCH (perceptually uniform lightness) and shows a naive HSL ramp side-by-side so you can see the difference directly.

How many shades should I generate?

Eleven steps (50, 100, 200 … 950) is a sensible default — it matches Tailwind CSS's convention and gives you enough granularity for backgrounds, borders, hover states, and text without an unwieldy palette. Use the custom step count if you need a shorter ramp for a specific project.

Can I use this to build a Tailwind color palette?

Yes. Pick your brand color, keep the Tailwind 11-step preset, and copy the Tailwind v3 JS config or Tailwind v4 @theme block from the export panel. The generated keys follow Tailwind's 50–950 naming.

Does this check contrast and accessibility?

Each swatch shows whether it passes WCAG AA (4.5:1) against white or black text. For a full contrast check against a specific pairing — including AA/AAA pass-fail badges and auto-fix suggestions — use the dedicated Color Contrast Checker.

Is this free, and does it store my colors?

Yes, completely free, and no. All ramp generation runs locally in your browser — your colors are never sent to a server, logged, or stored.

Color Shades & Tint Generator

Generate perceptual OKLCH tints and shades from any color — then compare them to naive HSL.

A free color shades generator and tint and shade generator: paste any color, get a full OKLCH ramp with WCAG contrast badges, see how naive HSL stepping differs, and export as CSS, Tailwind, SCSS, or JSON. Runs entirely in your browser.

Presets:

Step count

Steps (3–21)

Name prefix

Perceptual ramp (OKLCH)

Full contrast checker →

Naive comparison (HSL lightness stepping)

Tints, shades, and tones — what's the difference?

In color theory, a tint is your base hue mixed with white (lighter variations), a shade is your base hue mixed with black (darker variations), and a tone is your base hue mixed with gray (muted variations). This shade generator produces tints and shades from a single input color — the base color stays anchored in the ramp while lighter and darker steps fan out from it.

Why OKLCH instead of HSL?

Most online color scale generators step lightness in HSL. The problem: HSL lightness isn't perceptually uniform — the same L value can look dramatically different across hues, and saturated colors turn grayish at the extremes. OKLCH's lightness axis is calibrated to human vision, so each step looks evenly spaced. Scroll up to compare the two ramps side-by-side on your own color — the difference is most visible on saturated inputs like bright blue or red.

Need Tailwind's own colors instead?

If you want to look up an existing Tailwind swatch by hex — not generate a custom ramp — use the Tailwind Colors reference. For a full multi-color accessible theme (primary, secondary, neutrals, light + dark mode) from one seed color, try the Shadcn Theme Generator. To convert between hex, rgb, hsl, and oklch formats, see the OKLCH Converter.

Frequently asked questions

A tint is your base color mixed with white (lighter), a shade is your base color mixed with black (darker), and a tone is your base color mixed with gray (muted). This tool generates tints and shades from one input color.

Most shade generators step lightness in HSL, which muddies saturated colors at the extremes. This tool uses OKLCH for the primary ramp and shows a naive HSL ramp below for direct comparison.

Eleven steps (50–950) matches Tailwind's convention and is a sensible default for design systems. Use custom step count if you need fewer or more steps for a specific project.

Yes — use the Tailwind v3 or Tailwind v4 export tabs. The generated keys follow Tailwind's 50–950 naming when using the 11-step preset.

Each swatch shows WCAG AA (4.5:1) pass indicators against white and black text. For full AA/AAA checks with auto-fix suggestions, use the Color Contrast Checker.

Yes, completely free, and no. All generation runs locally in your browser — nothing is sent to a server or stored.