Codeyaan codeyaan

Tailwind Colors

Browse and copy Tailwind CSS color palette values

CSS Tools Runs in your browser
slate
gray
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose

Click any color to copy its HEX value · 19 colors · 11 shades each

How to Use

1Browse the color palette or search by color name
2Click any color swatch to copy its HEX value
3View the selected color detail panel for all copy formats
4Copy as HEX, Tailwind class, or CSS variable

Frequently Asked Questions

What are Tailwind CSS colors?

Tailwind CSS includes a comprehensive color palette with 22 color families, each having 11 shades from 50 (lightest) to 950 (darkest). These are designed to work harmoniously together.

How do I use these colors?

Use them as utility classes like bg-blue-500, text-red-600, or border-gray-200. You can also reference the HEX values in custom CSS.

Can I customize these colors?

Yes! You can extend or override colors in your tailwind.config.js file using the theme.extend.colors configuration.

Related Tools

Color Converter

Convert colors between HEX, RGB, HSL, and CMYK formats

CSS Gradient Generator

Create beautiful CSS linear and radial gradients visually

CSS Shadow Generator

Design box shadows and text shadows with a visual editor