Tailwind CSS palette — 242 colors
The default color palette shipped with Tailwind CSS v3 by Tailwind Labs. 22 color families across 11 lightness steps (50 to 950).
The Tailwind CSS default color palette is the most widely deployed design-token system on the web today. It ships with every Tailwind installation and powers UIs at thousands of companies, from indie hackers to Fortune 500 product teams. Each color comes in 11 progressively darker shades from 50 (lightest) to 950 (darkest), giving designers a complete tonal range without manual mixing.
This page lists all 242 default palette values, grouped by hue family — neutrals (slate, gray, zinc, neutral, stone) then the chromatic ramps (red through rose). Click any color for HEX, RGB, OKLCH, accessibility ratios, closest Pantone reference, color harmonies, and copy-ready CSS / Tailwind / Sass / Swift / Android snippets.
Sourced from Tailwind CSS default palette (v3) under the MIT license. Use as a reference for design tokens, web color systems, and Tailwind-based design conversations. Names like 'blue-500' are the project's own naming convention.
Source: Tailwind CSS default palette (v3) · License: MIT
Tailwind CSS by Tailwind Labs Inc. — MIT License
blue (22)
cyan (22)
green (33)
neutral (55)
orange (11)
pink (33)
purple (33)
red (11)
yellow (22)
FAQ — Tailwind CSS palette
How many colors are in Tailwind CSS palette?
Tailwind CSS palette contains 242 distinct colors on PantoneTools, organized by hue family. Each color has its own page with HEX, RGB, OKLCH, accessibility, and cross-system matches.
Is Tailwind CSS palette free to use commercially?
Yes. Tailwind CSS palette is published under the MIT. Tailwind CSS by Tailwind Labs Inc. — MIT License You can use these color values freely in commercial and personal work; refer to the upstream source for any attribution requirements.
What is the closest Pantone equivalent for colors in Tailwind CSS palette?
Every color page on this site computes the closest Pantone reference using the CIEDE2000 perceptual color-distance formula. Cross-system Pantone matching is approximate — verify color-critical print work with a physical Pantone guide.
Does Tailwind CSS palette include OKLCH values?
Every color page on PantoneTools shows both the original HEX value and its OKLCH equivalent. OKLCH is the perceptually-uniform color space that powers Tailwind v4 and CSS Color Module Level 4.
Where can I download Tailwind CSS palette as a file?
The upstream source (Tailwind CSS default palette (v3)) is available at https://tailwindcss.com/docs/customizing-colors. PantoneTools provides per-color pages with copy-ready CSS, Tailwind, Sass, Swift, and Android XML snippets; downloadable bundle exports are on the roadmap.