Color Shades Generator

Enter any color to instantly generate its tints (lighter), shades (darker), and tones (muted), plus a complete 50–900 palette scale. Click any swatch to copy its HEX, then export the whole set as CSS variables or a Tailwind config.

Base color

Scale (50 → 900)

Tints (lighter)

Shades (darker)

Tones (muted)

Export

Tints, Shades & Tones: Building a Color Scale That Works

A single brand color is never enough for a real interface. You need lighter versions for backgrounds and hover states, darker versions for text and borders, and muted versions for disabled or secondary elements. This generator produces all of them from one starting color, plus a numbered 50–900 scale that mirrors the structure designers and frameworks like Tailwind CSS rely on.

The Three Ways to Modify a Color

Tint — mix the color with white. Tints are softer and brighter, ideal for page backgrounds, subtle fills, and light-mode surfaces.
Shade — mix the color with black. Shades are deeper and more serious, perfect for text on light backgrounds, borders, and pressed states.
Tone — mix the color with gray. Tones are desaturated and calmer, useful for secondary UI, disabled states, and reducing visual noise.

Why a Numbered 50–900 Scale?

Naming colors primary-50 through primary-900 gives every shade a predictable role: 50–100 for backgrounds, 200–300 for borders and dividers, 400–600 for the main brand usage, and 700–900 for text and high-contrast accents. Because the steps are consistent, you can swap the base color and the whole system re-tunes itself — which is exactly how scalable design tokens work.

Keep Accessibility in Mind

Lighter tints look great but fail contrast checks when used for text. As a rule of thumb, body text needs a 4.5:1 contrast ratio against its background (3:1 for large text). Use the darker end of your scale (700–900) for text and the lighter end (50–200) for surfaces, then verify the exact pairing with a contrast checker before shipping.

Exporting to Your Workflow

Copy the scale as CSS custom properties for plain CSS projects, as an SCSS map for Sass pipelines, or as a Tailwind color object to drop straight into tailwind.config.js. Each format uses the same numbered keys so your tokens stay consistent across tools.

Frequently Asked Questions

A tint mixes your color with white (lighter), a shade mixes it with black (darker), and a tone mixes it with gray (more muted). This tool generates all three from one base color.

Click any swatch and its HEX value is copied to your clipboard. To grab the whole set, choose an export format (CSS, SCSS, or Tailwind) and use the Copy or Download button.

It's a consistent set of shades from very light (50) to very dark (900), the same structure Tailwind CSS and many design systems use. 50–200 suit backgrounds, 400–600 the main brand color, and 700–900 text and accents.

Yes. Pick the Tailwind export and copy the generated color object straight into the colors section of your tailwind.config.js. CSS-variable and SCSS exports are also available.

The scale gives you a safe range, but always verify text/background pairings. Use the darker shades (700–900) for text and lighter tints (50–200) for backgrounds, then confirm the ratio with our contrast checker.