Tailwind Shade Generator

Generate a full Tailwind CSS color palette (50-950) from any hex color.

How to use
  1. Pick a base color using the color picker or type a hex value.
  2. Optionally change the palette name for your exports.
  3. Copy individual shades or export the full palette in your preferred format.
Frequently asked questions
How do I generate Tailwind color shades from a hex code?
Enter your brand hex color and this tool generates all 11 Tailwind shades (50-950) using perceptually uniform OKLCH color science.
What shade numbers does Tailwind CSS use?
Tailwind uses 11 shade steps: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950. Shade 50 is lightest, 950 is darkest.
How do I add custom colors to Tailwind CSS?
In v3, add to theme.extend.colors in tailwind.config.js. In v4, use @theme in CSS. This tool generates both formats.
What is OKLCH and why use it for shade generation?
OKLCH is a perceptually uniform color space. Equal lightness steps look equally different to the human eye, producing more natural palettes.
 Last updated 
Powered by maratool