Skip to content

Tailwind CSS colors

Default v3-style theme excerpt with searchable names (slate-500, rose-600, …) and one-click HEX copy. Pair with Tailwind’s own docs for neutrals we omit from the snapshot file — the goal here is fast paste during prototyping, not replacing node_modules.

What this palette page is

A read-only mirror of the public default scales developers argue about in PRs. When someone says “use zinc-950 for the shell”, this table is the shared source of truth for the HEX string behind that token name (within the version snapshot we ship in palettes-tailwind.js).

How to use it

  1. Filter by family or step, then copy HEX from the row your design doc references.
  2. Paste into tailwind.config only when you are overriding or extending — do not duplicate keys that already exist in your preset.
  3. When you need a new ramp from a brand anchor, generate it with the Tailwind config snippet tool instead of hand-typing twelve steps.

Skip this page when…

Your project already extends colors in JS and never references defaults — diff your config instead. For v4 CSS-first themes, treat these strings as data you can port into @theme.

Related on ChromaXP

From browsing defaults to shipping tokens.

Tailwind config generator Emit theme.extend.colors from your own anchor HEX. Color converter Turn any copied HEX into OKLCH for modern color-mix workflows. All palettes Material, Bootstrap, Ant Design, and HTML named colors in the same pattern.

FAQ

Is every Tailwind default color on this page?

We ship a practical subset from the bundled data file. If a shade is missing, check the official Tailwind docs or your installed version’s source — defaults can grow between minors.

Tailwind v4 and @theme — what changes?

v4 moves more definition into CSS. The HEX strings remain valid; only the wiring layer moves from theme.extend to CSS variables. Port names manually or regenerate from our snippet tool after you pick anchors.

Why HEX and not OKLCH columns?

Tailwind’s published defaults are still widely consumed as HEX in configs and Figma plugins. Use the converter when your pipeline prefers OKLCH strings.