Hue50100200300400500600700800900950
slate
gray
zinc
neutral
stone
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose
Click any swatch to copy. Class names follow bg-{hue}-{shade}.
Why Tailwind Color Picker
- Browse the complete Tailwind CSS palette, 22 hues × 11 shades.
- Click any swatch to copy its hex.
- Use as a designer-developer translation table.
Common questions
Is Tailwind Color Picker free to use?
Yes. Tailwind Color Picker is completely free. There is no sign up, no trial, and no usage cap.
Do I need an account to use Tailwind Color Picker?
No. You can start using Tailwind Color Picker straight away. We do not ask for an email address or a login.
Is my data uploaded to a server when I use Tailwind Color Picker?
No. Tailwind Color Picker runs entirely inside your browser, so the colors you enter never leaves your device and nothing is sent to us.
Do you store the colors I use with Tailwind Color Picker?
No. Because everything happens locally in your browser, there is nothing for us to store. Close the tab and it is gone.
Can I copy colors as HEX, RGB, or HSL?
Yes. Tailwind Color Picker shows colors in the common formats and lets you copy the value you need with one click.
Can I use the colors from Tailwind Color Picker in my design tool?
Absolutely. Copy the value and paste it into Figma, your code, or any other app.
How do I use Tailwind Color Picker?
Enter or paste your colors and Tailwind Color Picker updates the result as you go. When it looks right, copy or download it with one click.
Does Tailwind Color Picker work on phones and tablets?
Yes. Tailwind Color Picker is responsive and works in any modern browser on mobile, tablet, and desktop.
Which browsers does Tailwind Color Picker support?
It works in current versions of Chrome, Firefox, Safari, and Edge. For the best experience, keep your browser up to date.
Is there a limit on how often I can use Tailwind Color Picker?
No. You can use Tailwind Color Picker as many times as you need, at no cost.
Can I use Tailwind Color Picker for commercial or client work?
Yes. You are free to use the output in personal, educational, and commercial projects.
Why is Tailwind Color Picker free?
The site is supported by advertising, which lets us keep every tool free and open to everyone.
What should I do if Tailwind Color Picker gives an unexpected result?
First check that your colors is formatted as expected. If something still looks wrong, use the feedback link on the page and we will take a look.