codeyaan

Tailwind Colors

CSS Tools

Browse and copy Tailwind CSS color palette values

Runs in browser Instant No tracking
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

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

FAQ

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