Color Shades Generator

The Color Shades Generator produces a full range of variations from a single base color — tints (mixed with white, lighter), shades (mixed with black, darker), and tones (mixed with gray, desaturated). These variations are the building blocks of modern design systems. Tailwind CSS uses 10 shade steps per color (50, 100, 200, ..., 900, 950). Material Design uses lightness levels (50, 100, ..., 900). Any design system needs a consistent scale from very light to very dark for each brand color to handle backgrounds, borders, buttons, hover states, and text hierarchy.

This tool generates any of these scales from a single input color. Enter your brand color, get back 10 shade steps (Tailwind style), Material Design steps, or a custom number of variations. Each shade is mathematically derived using either HSL lightness adjustment (simple and predictable) or perceptual brightness (using OKLCH or LAB for more uniform visual steps, which HSL alone does not guarantee). Export as CSS variables, Tailwind config, or JSON. Use the result to build a complete color system that never requires you to hand-pick a dozen related colors, only to find they don\u2019t feel consistent when you put them side by side.

Three related but distinct color variations:

Tints: mix base color with white. Produces progressively lighter variants. In HSL: increase lightness toward 100%. Simple and predictable, though visually uneven between steps.

Shades: mix base color with black. Progressively darker. In HSL: decrease lightness toward 0%. Same simplicity and caveat as tints.

Tones: mix base color with gray (50% lightness). Progressively more desaturated. In HSL: decrease saturation toward 0%. Good for muted versions of brand colors.

HSL-based scale (simple method): pick N lightness values (e.g., 95%, 90%, 80%, 70%, 60%, 50%, 40%, 30%, 20%, 10%) and apply to base color. Works perfectly for most use cases.

Perceptual scale (OKLCH or LAB): use a perceptually uniform color space so each step feels equally different from the previous. HSL lightness is not perceptually uniform — a step from 50% to 60% feels different from 80% to 90%. OKLCH (or CIELCH or LAB) produces more consistent visual steps.

Tailwind convention: 10 shades labeled 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950. The base color is typically at 500 or 600. Lighter shades (50-400) work for backgrounds and borders; darker shades (600-950) for text and emphasis.

Material Design convention: similar naming (50, 100, 200, ..., 900) with specific lightness and saturation adjustments that follow Google\u2019s design guidelines. The default Material palette was generated with careful color science; replicating it exactly requires the Material Theme Builder, not a simple HSL scale.

The tool offers HSL-based (fast, predictable, good enough for 90% of use cases) and OKLCH-based (perceptually uniform, produces design-system-quality scales). Most users pick HSL unless they have a specific perceptual requirement.

Compared to manually building shades in Figma or Photoshop (by adjusting lightness one by one), this tool generates a full consistent scale in one click with the math guaranteed correct. Hand-picking shades takes much longer and is rarely visually uniform.

Compared to Material Theme Builder, this tool is simpler and works for any color, not just Material palettes. Material Theme Builder remains the right choice for strict Material Design compliance; this tool is for everything else.

Compared to Tailwind\u2019s default color palette, this tool creates custom palettes matching your exact brand color rather than forcing you to pick from preset options. Use Tailwind defaults when you need generic; use this tool for brand-specific scales.