All tools

Color Shades Generator

Color

Generate tints and shades scale from any base color with CSS variable output

Enter one base hex color and get a full scale of tints and shades back, generated by stepping HSL lightness up toward white and down toward black in even increments while keeping hue and saturation close to the original, ready to drop in as CSS custom properties like `--color-primary-100` through `--color-primary-900`. It's built for building a consistent design-system color scale quickly rather than picking each step by eye. One thing worth being clear about: the generated scale isn't automatically WCAG-contrast compliant between any two steps, since it optimizes for visual consistency across the ramp, not accessibility, so any specific text/background pairing pulled from the scale should still get checked with a dedicated contrast tool. Generation runs entirely client-side.

colorshadestintspalettecss

How to use Color Shades Generator

  • 1.Enter a base HEX color to generate a full tint/shade scale from near-white to near-black.
  • 2.Copy the generated CSS custom properties (e.g. `--color-primary-100` through `--color-primary-900`) directly into your design system's stylesheet.
  • 3.Use the scale to pick accessible text/background pairings without manually eyeballing lightness values.

Frequently asked questions

How are the shades calculated?
Shades are generated by adjusting lightness in HSL space while keeping hue and saturation close to the original, which produces a more visually consistent scale than simply mixing with black/white in RGB.
How many steps does the scale include?
The default is a 9 or 10-step scale (similar to Tailwind's 50-900 convention), which covers most UI design system needs.
Is my color sent anywhere?
No, all color math happens locally in your browser.
Will the shades always be accessible (meet contrast ratios)?
Not automatically — the scale is generated for visual consistency, not guaranteed WCAG contrast, so check specific pairings with a contrast checker before using them for text.

Use via API, SDK, or MCP

Install in Claude Desktop / Cursornpx @utilix-tech/mcp
Example promptGenerate 9 shades (light to dark) from the color #7c3aed for a design system

171 tools available · works in Claude Desktop, Cursor, VS Code · MCP setup guide →

Related tools

CSS GradientVisual CSS gradient builder with linear, radial, and conic supportCSSPalette GeneratorGenerate harmonious color palettesColorBorder RadiusVisual CSS border-radius builder with live preview and presetsCSS