Which Tailwind version are these colors from?

These are the default palette colors shipped with Tailwind CSS v3, including the extended 950 shade. They match the values you get from utilities like bg-blue-500 out of the box.

Can I copy the class name instead of the hex?

Yes. Toggle the copy format to "Class name" and clicking any swatch copies the utility-friendly name such as blue-500; toggle to HEX to copy the raw color value instead.

What does the shade number (50 to 950) mean?

The number is a lightness step within a color family. 50 is the lightest tint and 950 is the darkest shade, with 500 sitting near the middle as the representative color. Lower numbers suit backgrounds and surfaces; higher numbers suit text and borders.

Why are gray, slate, zinc, neutral, and stone all included?

Tailwind ships five neutral families that differ subtly in temperature: slate is cool/blue-tinted, gray is balanced, zinc is slightly cool, neutral is pure, and stone is warm. Choosing the right neutral sets the overall mood of an interface.

How do I use these colors outside of Tailwind?

Switch the copy format to HEX and click any swatch to copy the raw value, which works in plain CSS, design tools, or any framework. The exact same palette can be used without Tailwind installed.

Are these the same colors as the latest Tailwind?

These are the Tailwind v3 default palette values, including the extended 950 shade. The core hues have been stable across recent versions, so they match what bg-blue-500 and similar utilities render in a standard install.

Which shade should I use for accessible text?

For body text on a white background, 600–800 shades of most colors meet WCAG AA contrast; 700+ is safest. On dark backgrounds, use 200–400 shades. Always confirm the specific pairing with a contrast checker.

Tailwind CSS Color Palette

The complete Tailwind CSS v3 color palette in one place — 22 families, shades 50–950. Search by name and copy either the hex code or the utility class instantly.

Updated June 2026

Files never leave your browser

Filter colors

Copy as

slate

gray

zinc

neutral

stone

red

orange

amber

yellow

lime

green

emerald

teal

cyan

sky

blue

indigo

violet

purple

fuchsia

pink

rose

Copy the full blue scale:

How to use Tailwind CSS Color Palette

Browse the complete Tailwind CSS default color palette — every family from slate to rose, each with all eleven shades from 50 to 950 and their exact hex codes. Filter by family name to jump straight to the colors you need, then click any swatch to copy either the hex value or the Tailwind utility name. It is a fast, offline reference for designers and developers who want the real Tailwind values without digging through documentation or a config file.

Type a family name in the filter to narrow the list (optional).
Choose whether to copy as HEX or as a class name.
Scan the families and their shades from 50 (lightest) to 950 (darkest).
Click any swatch to copy its value to the clipboard.
Use the bulk copy to grab a full family scale at once.

Your data never leaves your device — 100% private processing.

How the Tailwind shade scale works

Each color family in Tailwind is a perceptually balanced scale of eleven steps. 50, 100, and 200 are very light tints used for backgrounds, hover surfaces, and subtle fills. 300–400 work for borders, dividers, and disabled states. 500 is the canonical brand-strength color. 600–700 are common for buttons and links, while 800, 900, and 950 are reserved for high-contrast text and deep backgrounds. Keeping to this scale gives a design consistent contrast steps without hand-mixing colors.

Shade range	Typical role
50–200	Backgrounds, surfaces, hover fills
300–400	Borders, dividers, disabled states
500	Primary / brand-strength color
600–700	Buttons, links, interactive elements
800–950	Headings, body text, deep backgrounds

Choosing the right neutral family

Tailwind offers five neutrals because the temperature of grey strongly affects an interface. Slate carries a cool blue undertone that pairs well with blue and indigo brand colors. Zinc is a slightly cooler pure grey. Gray and neutral are close to balanced, with neutral being the most truly achromatic. Stone is warm, with a subtle brown undertone that suits earthy or editorial designs. Pick one neutral family and stick to it across a project so surfaces, borders, and text feel intentional.

Worked examples

Primary button

Inputs: blue-600

Result: #2563eb — strong, accessible on white

Card background

Inputs: slate-50

Result: #f8fafc — subtle cool surface tint

Glossary

Shade: A single lightness step within a Tailwind color family, numbered 50 (lightest) to 950 (darkest).
Family: A named group of related shades, such as blue, emerald, or slate.
Utility class: A Tailwind class like bg-blue-500 or text-slate-700 that applies a specific color.
Neutral: A grey family (slate, gray, zinc, neutral, stone) used for surfaces, borders, and text.
950 shade: The darkest extended step added to each family, useful for deep backgrounds and maximum-contrast text.

Frequently Asked Questions

Free · No spam

Get weekly tool tips & updates

New tools, power-user tips, and productivity hacks — delivered free every Friday.

No spam, ever. Unsubscribe with one click.

Why use Tailwind CSS Color Palette?

Every Tailwind family and shade (50–950) with exact hex codes in one scrollable reference
Click any swatch to copy either the hex value or the utility class name like blue-500
Filter instantly by family name to find the exact color you need
Works offline as a quick lookup — no Tailwind install or config file required

Common use cases

Copying an exact Tailwind hex into a Figma or design-tool fill
Picking the right neutral family (slate vs stone) for an interface mood
Finding an accessible text shade by scanning the darker steps of a family
Translating a Tailwind class name back into its hex for documentation
Choosing consistent shades across hover, active, and disabled states

Related Color & Design

Color Picker & Converter

Free online color picker — grab any color and convert between HEX, RGB, HSL, HSB, and CMYK, plus instant tints, shades, and palette ideas. No sign-up.

Color Converter

Convert colors between HEX, RGB, HSL, HSV, and CMYK formats instantly. Paste any color format and get all others with one click.

Color Shades & Tints Generator

Generate a full color scale from any color. Create 9 shades and 9 tints with Tailwind-style naming (50-900). Copy as CSS variables or Tailwind config.

CSS Gradient Generator

Free CSS gradient generator — design linear, radial, and conic gradients with a live preview and copy production-ready CSS instantly. No sign-up.

Color Contrast Checker

Check color contrast ratio for WCAG AA and AAA accessibility compliance. See if your text and background colors meet accessibility standards.

Color Palette Generator

Generate beautiful harmonious color palettes online. Choose from complementary, analogous, triadic, and monochromatic schemes. Free color scheme creator.

Explore all Color & Design.