Tailwind Shades Generator
Generate an 11-step Tailwind-style 50-950 shade scale from a base HEX color with copyable CSS variables and JSON.
🔒 Runs entirely in your browser — nothing is uploadedCreate a practical shade scale
A single brand color is rarely enough for a complete interface. Buttons need hover states, cards need pale backgrounds, borders need a quieter tint, and text sometimes needs a darker companion. This Tailwind shades generator turns one HEX value into a familiar 50-950 ramp so you can quickly explore how that color behaves across light and dark UI surfaces. The generated values are deterministic and easy to copy, making them useful for prototypes, design reviews, CSS custom properties and design-token documentation.
The tool uses HSL lightness steps to keep the hue recognizable while pushing the color toward very light tints and deep shades. It is not an official Tailwind algorithm, and it does not attempt to match Tailwind's hand-tuned palettes exactly. Instead, it gives you a clean starting point that can be adjusted in context. If your base color is already very pale or very dark, look closely at the middle values and decide whether the ramp needs manual refinement.
Using generated shades in CSS
Copy the CSS output when you want browser-ready variables such as --brand-500 and
--brand-700. Copy the JSON output when you are preparing tokens for a configuration
file, style dictionary or documentation page. In a typical interface, 50 and 100 work well for
soft surfaces, 200 and 300 for borders or badges, 500 for the main action color, and 600 through
800 for hover, pressed or text states. The 900 and 950 values are strongest, so reserve them for
dark themes or high-emphasis elements.
Check contrast before shipping
Shade scales are convenient, but they do not automatically guarantee accessible text. A color that looks balanced as a swatch may fail contrast when placed behind small labels or disabled controls. After copying a scale, test the actual combinations your interface uses: primary text on pale backgrounds, white text on action buttons, focus rings around inputs, and borders against nearby surfaces. Treat this generator as the first pass in a color-system workflow, then verify the final pairings with a contrast checker before publishing.
How to use
- Choose a basePick the brand or accent color that should anchor the scale.
- Review the rampCheck each 50-950 swatch and confirm the light and dark ends feel useful.
- Copy tokensCopy the scale as CSS custom properties or JSON for your project.