Practical color guide
Tailwind Color Palette Guide for Web UI Design
Use Tailwind color palettes for buttons, backgrounds, borders, alerts and accessible UI states.
Open related toolWhy Tailwind palettes are useful
Tailwind palettes provide consistent steps from 50 to 900. They are practical for light backgrounds, text colors, borders and hover states.
A simple UI color recipe
Use 50 or 100 for backgrounds, 500 or 600 for primary actions, 700 or 800 for hover states, and 900 for strong text.
Accessibility tip
Do not assume every color step works for text. Always test foreground and background contrast before publishing.
Frequently asked questions
Which Tailwind color step is best for buttons?
Steps 500 and 600 are common for primary buttons, with 700 or 800 for hover states.
Can Tailwind colors be used outside Tailwind CSS?
Yes. You can copy the HEX values into plain CSS, design tools or other frameworks.