Tailwind CSS Colors

About this tool

Browse and copy the complete Tailwind CSS colour palette - all 22 colour scales (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose) with all 11 shades (50–950). Click any swatch to copy the class name, HEX, RGB, or CSS variable.

How to Use the Tailwind Color Reference

1. 1Browse the colour grid organised by hue and shade.
2. 2Click any swatch to copy the utility class name (e.g. bg-blue-500).
3. 3Toggle to copy the HEX, RGB, or oklch value instead.
4. 4Use the search to jump to a specific colour name.
5. 5Compare shades side by side to choose the right contrast level.