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
Generate complementary, analogous, triadic, monochrome and shade palettes.
Open tool →
Gradient Generator
Build linear, radial and conic CSS gradients with presets.
Open tool →
Box Shadow Generator
Design layered CSS box shadows with live preview and copyable output.
Open tool →
Color Picker & Converter
Pick a color and convert it to HEX, RGB, HSL, HSV, CMYK and CSS formats.
Open tool →