Shade Generator

Generate beautiful color shade variations from any base color.

Privacy Firstshade generatorcolor shadestint generatorcolor palette makercolor variations

What is a Shade Generator?

A shade generator creates lighter and darker variations of any base color, producing a complete color palette for design projects. By systematically adjusting lightness values, you get harmonious color schemes perfect for UI design, branding, and creating visual hierarchy in your projects.

Instant Palettes: Generate complete shade scales from any color.

Tints & Shades: Get both lighter tints and darker shades.

Copy Ready: One-click copy of any color value.

Multiple Formats: HEX, RGB, and HSL values available.

How to Generate Color Shades

Enter Base Color

Input your base color by entering a HEX code. Add multiple colors to build a full palette.

Choose Shade Count

Select 5, 10, or 20 shades using the preset buttons in the toolbar.

Explore Darker & Lighter Palettes

Your base color appears in two rows — darker shades and lighter tints — with percentage labels so you can see exactly how each variation relates to the original.

Copy or Export

Click any swatch to copy its value, or use the toolbar to share, export as PNG image, or download as CSS custom properties.

Features & Benefits

Dual Palette View

Separate darker shades and lighter tints rows with the base color highlighted.

Preset Shade Counts

Quickly switch between 5, 10, or 20 shade variations.

HEX & RGB Toggle

View and copy colors in HEX or RGB format with one click.

Export Options

Share palettes, export as PNG images, or download as CSS custom properties.

Editable Palette Names

Name your palettes for easy organization and exported code.

WCAG Contrast Checker

Check contrast ratios between any two palette colors with AA/AAA pass/fail badges.

Tailwind CSS Export

Download a ready-to-paste colors object for your tailwind.config.js.

Color Harmonies

Generate complementary, analogous, triadic, and split-complementary palettes.

OKLCH Interpolation

Switch to perceptually uniform OKLCH color space for more natural shade transitions.

Privacy First

All processing happens locally in your browser.

Who Uses This Tool?

UI Designers

Building a design system color scale

Designers input their brand's primary color and generate a full 50-900 shade scale matching the Tailwind CSS convention. This gives them a complete, mathematically consistent palette for backgrounds, borders, text, and hover states across the entire application.

Front-End Developers

Creating accessible color pairings for UI components

Developers generate shades of a brand color and pick combinations that meet WCAG contrast requirements. For example, pairing the 900 shade as text on the 100 shade as background ensures readability while staying within the brand palette.

Graphic Designers

Designing gradient backgrounds and illustrations

Designers use the generated tint-to-shade scale to create smooth, monochromatic gradients for backgrounds, charts, and data visualizations. Having evenly distributed lightness values prevents banding and creates visually pleasing transitions.

Brand Managers

Extending brand color guidelines for new materials

When a brand guide only specifies a single primary color, brand managers generate a full shade range to cover use cases the original guide did not anticipate -- such as hover states, disabled buttons, or light-mode vs. dark-mode backgrounds.

Pro Tips

1.
Start with your brand's mid-tone color as the base (around 500 on a Tailwind scale) so the generated tints and shades extend evenly in both directions.
2.
Export the shade scale in HEX format for CSS custom properties, making it easy to define your full color palette in a :root block for consistent theming.
3.
Test your lightest tint (50-level) and darkest shade (900-level) for sufficient contrast against white and black backgrounds respectively before committing to the palette.
4.
When building a dark mode theme, use the lighter shades (100-300) for text and the darker shades (700-900) for backgrounds -- the inverse of your light mode assignments.

Frequently Asked Questions

Tints are created by adding white to a color (making it lighter), while shades are created by adding black (making it darker). Together, they form a complete value scale.

Choose from 5, 10, or 20 preset variations. Each preset generates both darker shades and lighter tints from your base color, giving you up to 40 total swatches per palette.

Absolutely! All colors are provided in web-ready formats (HEX, RGB) perfect for CSS, design tools, and development. Use the Tailwind CSS export to download a ready-to-use config file.

Click the Tailwind export button in the toolbar. It maps your generated shades to the standard 50-950 scale and downloads a ready-to-paste tailwind.config.js colors object.

OKLCH is a perceptually uniform color space that produces more natural-looking shade transitions compared to HSL. Shades generated in OKLCH appear more evenly spaced to the human eye.

It calculates the contrast ratio between any two colors using the WCAG 2.1 formula, then checks whether the ratio meets AA (4.5:1 for normal text, 3:1 for large text) and AAA (7:1 for normal text, 4.5:1 for large text) thresholds.