DESIGN TOOL

Tailwind CSS Colors

Explore complete Tailwind CSS color palettes with every shade from 50 to 950. Copy HEX, RGB, HSL and OKLCH values for your designs.

Tailwind Color Generator

Generate Tailwind CSS classes and CSS variables from any color.

Tailwind Class

bg-slate-500

CSS Variable

--color-primary:#64748b;

Complete Tailwind CSS Color Palette

Tailwind Colors provides a complete collection of modern UI colors with every shade from 50 to 950. Developers and designers can quickly copy color values and use them in websites, applications and design systems.

The tool supports HEX, RGB, HSL and OKLCH formats, making it easy to create consistent color systems for your projects.

Perfect For

  • 🎨 UI Designers
  • 💻 Frontend Developers
  • 🚀 React / Next.js Developers
  • 📱 Mobile App Designers
  • 🖥️ Website Builders

Frequently Asked Questions

What are Tailwind colors?

Tailwind colors are predefined color palettes used in Tailwind CSS projects.

What shade range is available?

Each color includes shades from 50 to 950.

Can I copy colors directly?

Yes. Click any color card to copy the selected value.

Which formats are supported?

HEX, RGB, HSL and OKLCH formats are supported.

Copied!