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.

Generador de Tonos de Color

Genere una paleta completa de tintes y sombras desde cualquier color base. 11 niveles de color inspirados en Tailwind en formato HEX, HSL o RGB.

Color base

Formato de salida

Cómo usar

Genere una paleta completa de tintes y sombras desde cualquier color base. 11 niveles de color inspirados en Tailwind en formato HEX, HSL o 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.

Características

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

Preguntas frecuentes

Más información

Color Shades Generator: Build Complete Palettes for Your Design System