Tailwind Color Matcher
Find the closest Tailwind class to any hex
Closest Tailwind class
Closest 8 Tailwind colors
About the Tailwind Palette
Tailwind CSS ships with a default palette of 22 color families, each in 11 steps from 50 (lightest) to 950 (darkest). When porting a brand color, mockup, or external design into a Tailwind project, it's often easier to use the closest Tailwind value rather than configure a custom color.
This tool ranks every Tailwind color step by RGB distance to your input and returns the closest matches. Click any class name to copy it.
Frequently asked questions
Does this include Tailwind v4 OKLCH colors?
The hex values shown are the resolved sRGB equivalents, not the raw OKLCH definitions used in v4. The class names work for both v3 and v4 since the names didn't change.
What about stone, neutral, warmGray?
The full set of Tailwind grays (slate, gray, zinc) is included. The legacy
warmGray/trueGray aliases were removed in v3 — use slate, gray, zinc, neutral, or stone instead.