What does this tool do?
Tailwind Color Palette displays the entire default Tailwind CSS color system — slate, red, amber, emerald, sky, violet and the rest — across every shade from 50 to 950 in a browsable grid. It is a fast reference for designers and front-end developers who want to copy a class name or HEX value with a single click.
How to use it
- Adjust the values and options.
- See the result in the live preview.
- Copy the generated CSS/code into your project.
How the shade numbers work
Each color family is numbered from 50 (lightest) to 950 (darkest), with 500 usually acting as the family's base tone. Because this scale is consistent across every hue, it is easy to pick safe contrast pairs such as text-slate-800 on bg-slate-100. When you copy a swatch you get both the utility class, like bg-emerald-500, and its HEX equivalent, so you can use it in Tailwind, in a design tool, or in plain CSS.
Frequently asked questions
Can I use the copied value in plain CSS?
Yes. Each shade exposes its HEX code, which you can paste straight into standard CSS properties like color or background. It works even if Tailwind is not installed in your project.
Which Tailwind version do these colors match?
The palette shown is the modern extended default (the 50–950 scale). Older v2 projects only went up to 900; the 950 shade was added in later versions, so verify your config if a class is missing.
How do I pick an accessible contrast pair?
A practical rule is to keep at least 400–500 steps between a light background shade (100–300) and a dark text shade (700–900). For critical text, still verify against the WCAG threshold with a contrast checker.
Is Tailwind Color Palette free?
Yes. Tailwind Color Palette and all 300+ tools on MagmaNex are completely free with no signup or account required.
Is my data safe?
Yes. Everything runs locally in your browser. The data you enter is never sent to a server, stored, or shared.
Does it work on mobile?
Yes. Tailwind Color Palette works on phones, tablets and desktops — no app download needed.
🔒 Privacy: everything runs in your browser, your data is never sent to a server.