Tailwind Green
Green is the universal signal for success and confirmation. Use it for positive states — completed steps, valid inputs, "in stock", growth — so a green flash always means "good".
Click any value to copy it. All 11 Green shades (50–950) in hex, OKLCH, RGB, HSL and Tailwind class.
| Swatch | Shade | Class | Hex | OKLCH | RGB | HSL |
|---|---|---|---|---|---|---|
| 50 | ||||||
| 100 | ||||||
| 200 | ||||||
| 300 | ||||||
| 400 | ||||||
| 500 | ||||||
| 600 | ||||||
| 700 | ||||||
| 800 | ||||||
| 900 | ||||||
| 950 |
Where to use Tailwind Green
- Success buttons:
bg-green-600 hover:bg-green-700. - Success text:
text-green-700. - Success banners:
bg-green-50 text-green-800 border-green-200.
Related Tailwind colors
Build a full theme from Green with the shadcn theme generator, or see the whole Tailwind colors palette.
Copied
