🎚️ Tint & Shade Generator

Generate Tailwind-compatible 50-950 color scales from any base color. Export as CSS variables, Tailwind config or JSON.

Scale Type

Steps: 10 steps

Click Generate to create your color scale.

Export Scale

Generate a scale to see export code.

About This Tint & Shade Generator

What is a Tint & Shade Generator?

A tint and shade generator creates a graduated color scale from any base color — tints add white to lighten, shades add black to darken. This generator produces Tailwind-compatible 50-950 scales or custom step ranges, with CSS variable, Tailwind config and JSON export.

This tint shade generator is a browser-based color tool that builds complete, design-system-ready color scales from a single hex value. The base color maps to step 500 in the Tailwind scale — and the generator calculates all ten surrounding steps by adjusting lightness in the HSL color space while keeping hue and saturation consistent. All processing runs client-side.

The Tailwind 50-950 scale is the standard used in Tailwind CSS and most modern design token systems. Lighter steps (50-200) are used for backgrounds and subtle UI states. Midrange steps (300-500) cover interactive elements and primary actions. Darker steps (600-950) are used for text, hover states and high-contrast elements on light backgrounds. This tint shade generator produces the complete 11-step scale in under a second.

The contrast indicator on each swatch shows whether white or black text achieves a higher WCAG contrast ratio on that specific step. This removes guesswork from text-on-background pairing and speeds up accessibility validation during the design phase — a feature not found in most basic color scale tools.

How to Use This Tint & Shade Generator

How the Tint & Shade Generator Works

Enter a base color using the native color picker or type a hex value into the input field
Choose Tailwind Scale for a 50-950 design system scale, or Custom Steps for a manual range of 5-20 steps
Click Generate to produce the full tint and shade scale from your base color
Check the contrast indicator on each swatch — the highlighted Aa shows which text color achieves better WCAG readability on that shade
Export the scale as CSS variables, a Tailwind config block or a JSON object, then paste directly into your project

Use our Contrast Checker to verify specific text-on-background combinations from your scale against WCAG AA and AAA thresholds.

In Tailwind Scale mode, step 500 is fixed to the exact base color. Steps 50-400 progressively increase lightness toward near-white, while steps 600-950 decrease lightness toward near-black. In Custom Steps mode, the tint shade generator distributes the full lightness range evenly across the chosen step count — useful for generating scales with non-standard step counts.

Who Uses a Tint & Shade Generator

Design system engineers use this tint shade generator to build Tailwind or CSS token libraries — mapping a generated scale directly to utility class names or custom property definitions. The output formats are ready to paste into tailwind.config.js or a design token JSON file without any manual formatting.

UI designers — Building accessible color scales where each step has a known contrast ratio for text pairing decisions
Brand designers — Extending a primary brand color into a full tint and shade range for design system documentation
Front-end developers — Generating CSS custom property sets from a brand hex without leaving the browser
Design token authors — Producing structured JSON output for multi-platform token pipelines and style dictionaries
Accessibility reviewers — Identifying which shades in a scale meet WCAG contrast requirements for text usage at a glance

Every color scale from this tint shade generator is immediately actionable — copy to CSS, paste to Tailwind config, or download as JSON. Explore all our Color Tools for the full suite of color utilities.

Frequently Asked Questions

What is a tint shade generator? +

A tint shade generator creates a graduated color scale from any base color. Tints are lighter variations (white mixed in) and shades are darker variations (black mixed in). This tool produces Tailwind-compatible 50-950 scales or custom step ranges, with CSS variable, Tailwind config and JSON export — all processed client-side with no data upload.

How does the tint and shade generator create color scales? +

The tint and shade generator converts your base hex to HSL (Hue, Saturation, Lightness), then keeps the hue constant while progressively increasing lightness for tints and decreasing lightness for shades. In Tailwind mode, step 500 is fixed to the base; each other step maps to a specific lightness percentage. Custom mode distributes lightness evenly across the chosen step count.

What is the difference between a tint and a shade? +

A tint is a color mixed with white — lighter than the original. A shade is a color mixed with black — darker than the original. In this tint shade generator, steps 50-400 are tints (progressively lighter), step 500 is the base color, and steps 600-950 are shades (progressively darker). Together they form a complete color scale used in Tailwind, Material Design and other design systems.

What is the Tailwind color scale (50-950)? +

The Tailwind CSS color scale uses 11 named steps: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 and 950. Step 500 is the midpoint (base color). Lower numbers are lighter (50 is near-white), higher numbers are darker (950 is near-black). This scale underpins Tailwind's built-in color palette and is the most widely adopted color token format in modern front-end development.

How do I use this color scale in Tailwind CSS? +

Generate your scale, then click the Tailwind Config tab to get a pre-formatted colors config block. Copy it and paste it into your tailwind.config.js file under the colors key. Each step maps directly to Tailwind utility classes — for example, bg-primary-500 for your base color, text-primary-900 for dark text, and border-primary-200 for subtle borders.

How do I know which text color to use on each shade? +

Each swatch in this tint shade generator shows two Aa indicators — one in white, one in black. The highlighted Aa is the one with the better WCAG contrast ratio. As a general rule, lighter shades (50-300) pair better with black text, while darker shades (700-950) pair better with white text. Hover any swatch to see the exact contrast ratio for each text color.

Can I export my color scale to CSS variables? +

Yes. After generating, click the CSS Variables tab to get a --color-50 through --color-950 block (or --color-1 through --color-N for custom steps). Paste it into your stylesheet :root block. Each variable maps directly to the swatch hex value and the export updates instantly when you change the base color and regenerate.