Generate a Tailwind Color Palette Online
Enter a brand color and get a full set of tints and shades mapped to Tailwind's 50 to 950 scale. Copy individual values or export the whole ramp as a Tailwind config block.
Color Shade Generator
Generate tints and shades of any color for design systems
Quick presets
Scale type
Display format
All Values
Click any value to copy
| Swatch | Step | HEX | RGB | HSL |
|---|---|---|---|---|
| 50 | ||||
| 100 | ||||
| 200 | ||||
| 300 | ||||
| 400 | ||||
| 500 | ||||
| 600 | ||||
| 700 | ||||
| 800 | ||||
| 900 | ||||
| 950 |
Quick Start
- 1Enter your base color as a HEX code
- 2Review the generated 50 to 950 shade scale
- 3Click any shade to copy its value
- 4Export the palette as CSS variables or Tailwind config
More Generate Tools
All generators →Generate a Favicon From an Image Online
Upload a PNG, JPG, or SVG logo and generate favicons in every size. Free online image to favicon generator with HTML link tags.
Generate a Favicon From an Emoji Online
Turn any emoji into a website favicon in seconds. Free online emoji favicon generator with all required icon sizes.
Generate a robots.txt to Block All Bots Online
Create a robots.txt that disallows all crawlers from your site. Free online robots.txt generator with a block-all preset.
Generate a robots.txt to Block AI Crawlers Online
Create a robots.txt that blocks GPTBot, CCBot, and other AI crawlers. Free online robots.txt generator for AI bot control.
Generate CSS to Center a Div With Flexbox Online
Center any element horizontally and vertically with flexbox. Free online flexbox centering generator with copy-ready CSS.
Generate a Responsive CSS Grid Online
Build a responsive grid with auto-fit and minmax that wraps without media queries. Free online responsive CSS grid generator.
Looking for FAQs and advanced options? Visit the full Color Shade Generator page →