Tailwind colors

Check out this cheatsheet with all default Tailwind CSS colors, made to be compact and simple. You can bookmark this page so you'll never forget any Tailwind color again!

You can select one of the base utility classes that you need.
After that, you can click on any color to copy the class {base}-{color}-{value}!

Choose a base class

Generated class

HEX

HSL

RGB

slate

gray

zinc

neutral

stone

red

orange

amber

yellow

lime

green

emerald

teal

cyan

sky

blue

indigo

violet

purple

fuchsia

pink

rose

Tailscan for Tailwind CSS

The absolute must-have tool for anyone using Tailwind CSS.

Build, design and debug your Tailwind website visually with Tailscan, right within the browser.

Get Tailscan now
video poster

Want to stay up to date? Join the Tailscan email list!

Be the first to know about news, new features and more!

If you want to unsubscribe later, you can do so very easily, no hard feelings!