Shade Generator
Generate a 50–950 tint and shade scale from one color.
Shade scale
Export
About the Shade Generator
Turn a single base color into a full 50 through 950 tint/shade scale, similar to Tailwind's default palette structure, and copy it as CSS custom properties or a Tailwind theme snippet.
Examples
Indigo scale
#6366f1Output
50: #f5f5fc … 950: #14142bRelated tools
Color Blindness Simulator
Color
Simulate how a palette looks with common color vision deficiencies.
Color Converter
Color
Convert colors between HEX, RGB, HSL, HWB, OKLCH and CMYK.
Color Mixer
Color
Blend two colors with a ratio slider and preview CSS blend modes.
Contrast Checker
Color
Check WCAG 2.1 contrast ratio between two colors.
Gradient Palette Extractor
Color
Extract and normalize colors from CSS gradients or lists.
Palette Generator
Color
Generate complementary, analogous, triadic and other palettes.
Frequently asked questions
Read more
- Color contrast and WCAG: making UI accessible
How WCAG contrast ratios are calculated, which levels apply to which content, and practical fixes for common failures.
Version 1.0.0 · Updated 2026-08-06 · Runs entirely in your browser