What are color shades and tints?

A shade is a color mixed with black (darker), and a tint is a color mixed with white (lighter). This tool generates 11 levels from very light (50) to very dark (950) by adjusting the lightness value in HSL while keeping the hue and saturation of your base color.

Why are the levels named 50 to 950?

The naming follows the Tailwind CSS color palette convention. Tailwind uses 50 (lightest) through 950 (darkest) with 500 being close to the original color. This makes it easy to integrate the generated shades directly into your Tailwind config or design system.

Can I use the output in CSS custom properties?

Yes! Click 'Copy as CSS Variables' to get the full palette formatted as CSS custom properties (e.g., --color-500: #3b82f6). Paste it into your :root block and reference the colors throughout your stylesheet.

What output formats are supported?

Three formats are supported: HEX (e.g., #3b82f6), HSL (e.g., hsl(217, 91%, 60%)), and RGB (e.g., rgb(59, 130, 246)). Click the format buttons at the top to switch between them.

Yes, completely free. All color calculations run in your browser — no data is sent to any server.

Générateur de Nuances de Couleur

Générez une palette complète de teintes et nuances depuis n'importe quelle couleur de base. 11 niveaux de couleur inspirés de Tailwind en format HEX, HSL ou RGB.

Couleur de base

Format de sortie

Comment utiliser

Générez une palette complète de teintes et nuances depuis n'importe quelle couleur de base. 11 niveaux de couleur inspirés de Tailwind en format HEX, HSL ou RGB.

1Enter a hex color code or use the color picker to select your base color.
2The tool instantly generates 11 shades from 50 (lightest) to 950 (darkest).
3Choose your output format: HEX, HSL, or RGB.
4Click any shade to copy its value to clipboard.
5Use 'Copy All Values' or 'Copy as CSS Variables' for bulk export.

Fonctionnalités

11 Tailwind-inspired color levels from 50 to 950
Supports HEX, HSL, and RGB output formats
One-click copy for individual shades
Export entire palette as CSS custom properties
Real-time preview with contrast-aware text labels

Questions fréquentes

En savoir plus

Color Shades Generator: Build Complete Palettes for Your Design System