Tailwind CSS Color Chart
Explore all 22 official Tailwind CSS color palettes across shades 50 to 950. Select any swatch to inspect Hex, RGB, HSL, and OKLCH codes, test shades, and copy utility classes with one click.
How the Tailwind CSS Color System Works
Tailwind CSS provides an expertly curated default palette designed to build cohesive user interfaces with minimal decision fatigue. Each color family is divided into 11 numerical steps from 50 (the lightest tint, ideal for subtle backgrounds and badges) to 950 (the deepest dark tone, perfect for high-contrast borders and dark mode surfaces).
5 Distinct Neutral Families
Choose between Slate (cool blue undertones), Gray (balanced modern neutral), Zinc (cool metallic), Neutral (pure balanced gray), and Stone (warm organic earthy gray) to define your brand's underlying personality.
Standard Utility Classes
Tailwind generates corresponding utility classes automatically for each color: e.g., bg-sky-500 for backgrounds, text-sky-500 for typography, and border-sky-500 for outlines.
Accessibility & Contrast
Shades 50 through 400 provide high contrast when paired with dark text (#111827), while shades 500 through 950 achieve WCAG AA/AAA compliance when paired with crisp white (#FFFFFF) body copy.
Tailwind v4 OKLCH Architecture
Starting in Tailwind CSS v4, color definitions natively leverage perceptual OKLCH color space for uniform lightness and chroma perception across modern P3 wide-gamut displays.
Frequently Asked Questions
How do I use these colors in my HTML or React projects?
In Tailwind projects, prepend the color name with a utility prefix like bg-blue-600, text-emerald-500, or border-neutral-200. In standard CSS, copy the Hex or RGB value directly into your stylesheets.
What is the difference between Slate, Gray, and Zinc?
Slate has a prominent cool blue tint, perfect for technical dashboards and developer tools. Gray offers an all-around balanced neutral look. Zinc has a subtle steely coolness favored by modern SaaS design systems.