🌊

Tailwind CSS ↔ HEX/RGB Converter

Look up any Tailwind CSS v3 color class and get its HEX and RGB values. Search, preview, and copy.

💡
Tip: Click any shade to copy its HEX. All Tailwind v3 default palette colors included.
💡 Definition

Tailwind CSS Colors

  • Tailwind CSS uses a carefully crafted color palette with 22 color families, each having 11 shades (50–950).
  • This tool lets you look up exact HEX and RGB values for any Tailwind color class like 'blue-500' or 'rose-300'.
📖 How to use

Step by Step

  • Type a color family name (e.g. 'indigo')
  • Or search for a specific shade (e.g. 'blue-500')
  • Or paste a HEX code to find the closest match
  • Click any color swatch to copy the HEX value
🎯 Use cases

When to use

  • Finding exact HEX values for Tailwind classes
  • Matching Tailwind colors in Figma or Sketch
  • Converting between Tailwind and raw CSS values
  • Building custom design tokens from Tailwind palette

Frequently Asked Questions

What Tailwind version are these colors from?▾
These are the default colors from Tailwind CSS v3.x. If you've customized your tailwind.config.js, your project colors may differ.
What do the shade numbers mean?▾
Lower numbers (50, 100) are lighter tints, 500 is the 'base' shade, and higher numbers (800, 900, 950) are darker. 50 is nearly white, 950 is nearly black.

Related Tools