ToolKitColor tools
Tailwind Color Finder
Search Tailwind CSS colors by name or hex value and copy class names instantly.
Color families
Showing 242 colors
About the Tailwind Color Finder
The Tailwind Color Finder puts the complete default Tailwind CSS palette in one searchable place, with every shade from 50 right through to 950. Search by colour name or by hex value and copy the matching class name — such as bg-blue-500 — directly to your clipboard, so you spend less time scrolling through documentation and more time building.
Developers working in Tailwind use it to find the exact shade they want quickly, to match an existing hex code to the nearest Tailwind token, or to grab a utility class without breaking their flow. Searching by hex is particularly valuable when you are translating a designer's mock-up into utility classes and need the closest available colour.
Everything runs in your browser with no upload, so every lookup is instant. There is no install and no account to create, which makes it a genuinely handy companion tab to keep open beside your editor while you style a Tailwind interface.
Frequently asked questions
Can I copy Tailwind class names directly?
Yes. Click on any color to copy its Tailwind class name (e.g. 'bg-blue-500') directly to your clipboard.
Does it show all Tailwind colors?
Yes. The tool includes the complete Tailwind CSS default color palette with all shades from 50 to 950.
Related tools
Palette Generator
Preview one base color at five opacity levels and copy its HEX/RGB CSS variables. Complementary, analogous and triadic palettes are not implemented.
Open tool →
Gradient Generator
Create a two-color, 90-degree linear CSS gradient with a live preview and copyable code. Radial, conic, multi-stop and angle controls are not available.
Open tool →
Box Shadow Generator
Preview a single CSS box-shadow derived from a selected color and copy its declaration. Independent offset, blur, spread and layer controls are not available.
Open tool →
Color Picker & Converter
Pick a color and copy its HEX, RGB or CSS custom-property value. Runs locally in the browser; HSL, HSV and CMYK conversion are not implemented.
Open tool →