Tailwind Color Palette
Browse and copy Tailwind CSS color palette with hex codes and shades.
Loading Tailwind Color Palette...
⚙️ How It Works
Search for a color family, browse all shades from 50 to 950, click any swatch to copy its hex code, or export the palette as CSS variables or an image. Runs entirely in your browser.
❓ Frequently Asked Questions
What colors are included in Tailwind CSS?
This tool includes all default Tailwind color families like slate, gray, zinc, red, blue, green, and more, each with shades from 50 to 950.
What do Tailwind color shades mean?
Shades range from 50 (lightest) to 950 (darkest). Lower numbers are softer tints, while higher numbers are deeper, more saturated tones.
How do I copy Tailwind color hex codes?
Click any color swatch to instantly copy its HEX value to your clipboard.
Can I export Tailwind colors as CSS variables?
Yes. Use the copy button to generate a full set of CSS variables for any color family.
Can I download the color palette?
Yes. You can export each color family as an image for design reference or sharing.
Is this tool useful for designers?
Yes. It provides a visual color scale for each palette, making it easy to pick consistent shades for UI design systems.
Does this tool work offline?
Yes. Once loaded or installed as a PWA, you can browse and copy colors offline.
Are these official Tailwind colors?
Yes. The palette matches the default Tailwind CSS color system.
Does the Tailwind Color Palette work offline?
Yes, the Tailwind Color Palette is fully functional offline. Because this tool runs entirely in your browser, no data is ever uploaded to external servers. Once the page is loaded, you can seamlessly continue using it without an active internet connection. You can also install Knicknaks as a Progressive Web App (PWA) for native-like offline access.