Color Shades Generator
Generate lighter and darker shades from any base color. Same hue and saturation, varying lightness — perfect for design systems, CSS variables, and Tailwind-style palettes. Copy hex, RGB, HSL, or a full CSS variable block.
#ECF3FE#C0D7FC#94BBFA#689FF8#3C83F6#0B5EE5#0844A6#052A66#021027Table of Contents
What are color shades?
Shades are variations of a single color made by changing only lightness (in HSL). Hue and saturation stay the same, so you get a consistent family from very light to very dark — ideal for backgrounds, borders, text, and hover states in design systems (e.g. Tailwind’s 50–900 scale) or CSS variables.
Unlike tints (adding white) or tones (adding gray), shade generation via HSL lightness preserves color vibrancy across the entire scale, preventing that washed-out look in lighter steps.
This tool places your base color in the middle of the scale and generates lighter and darker steps. You can copy individual values or export the full set as CSS custom properties.
Use cases
- Design systems — Define a primary (or secondary) scale once and reuse it across components.
- Tailwind-style palettes — Generate 9 or 11 steps (50–900) from one brand color.
- CSS variables — Copy the “Copy as CSS variables” block into your
:rootfor instant theming. - Accessibility — Use lighter shades for backgrounds and darker for text to meet contrast guidelines.
Output formats
Copy colors as:
- Hex —
#EFF6FF,#DBEAFE, etc. - RGB —
rgb(239, 246, 255) - HSL —
hsl(214, 100%, 97%) - CSS variables — Ready-to-paste
:rootblock with--color-100,--color-200, and so on
Tips for better results
- Start with your 500 shade — Think of your base color as the middle of the range, not the darkest.
- Check contrast early — Use lighter shades (50–200) for backgrounds with dark text; darker shades (700–900) ensure readable text on light backgrounds.
- Avoid pure black/white bases — Start with colors that have some saturation (10%+) for more natural-looking scales.
Frequently asked questions
We keep the hue and saturation of your base color fixed and only change lightness in HSL. The base color is placed in the middle; steps above are lighter (up to 96% lightness) and steps below are darker (down to 8% lightness), so you get an even progression from light to dark.
Yes. Choose 9 shades to get a scale similar to Tailwind’s 100–900 (with labels 50–900). Copy the hex values or the CSS variables block and plug them into your Tailwind config or global CSS.
- 3 shades — Minimal palette (light, base, dark)
- 5–7 shades — Simple projects with basic color needs
- 9 shades — Material Design standard (100–900)
- 11 shades — Tailwind standard (50–950) — Recommended
- 13–15 shades — Maximum granularity for complex design systems
Tip: 9 and 11 shades use Tailwind-style naming (50, 100, 200…950) in CSS output, making them drop-in compatible with Tailwind or similar frameworks. Other counts use sequential numbering (1, 2, 3…).
HSL lightness works best with colors that have moderate saturation (20–80%). Highly saturated or very desaturated base colors may need manual adjustment. Try tweaking your base color’s saturation slightly if the scale feels off.
Not in this tool — it’s designed for consistent mathematical scales. For manual tweaking, copy the hex values into a color picker or design tool.
No. All generation runs in your browser. Your base color and settings are only stored in the URL (query params) if you share the link; nothing is sent to a server.