Tailwind Color Reference

Browse all Tailwind CSS default colors with hex and RGB values. Click any shade to copy instantly. Perfect for Tailwind CSS developers.

Click to copy:

How It Works

  1. Open the tool and browse all Tailwind CSS default colors displayed in an organized palette.
  2. Scroll through the swatches to find the exact color and shade you need.
  3. Click any color block to instantly copy its HEX value to your clipboard.
  4. Toggle between HEX and RGB formats depending on your project requirements.
  5. Paste the copied value directly into your CSS file or Tailwind configuration.

Example

Input: sky-300
Result: #7DD3FC / RGB(125, 211, 252)

FAQ

The tool includes the complete set of Tailwind CSS default colors, covering all shades from 50 to 950 for every color in the palette, including slate, gray, zinc, red, orange, yellow, green, blue, violet, and more.

Simply click on any color swatch and the HEX value is automatically copied to your clipboard. No extra steps needed.

No. All processing is done client-side in your browser. No data is sent to any server, making this tool completely private and safe to use.

Yes, both HEX and RGB values are displayed for every color shade, so you can pick whichever format suits your workflow.

No account or registration is required. The Tailwind Color Reference tool is completely free and available to anyone instantly.