Browse the Tailwind CSS v4 default palette and copy a color name, HEX, RGB, HSL, or OKLCH value.
This page lists the default color palette of Tailwind CSS v4.3: 26 color families with 11 shades each, from 50 to 950, for 286 colors in total. The values come from the tailwindcss package itself, not from screenshots. Choose a copy format in the menu above the families, then select any chip to copy that color as a class name, HEX, RGB, HSL, or OKLCH value.
Color name copies the token, such as sky-500, which you combine with a utility prefix in Tailwind. OKLCH copies the value Tailwind actually defines, oklch(68.5% 0.169 237.323) for sky-500. HEX, RGB, and HSL are the nearest sRGB values: #00a6f4, rgb(0, 166, 244), and hsl(199.2, 100%, 47.8%) for the same color. Use those for tools and formats that do not read OKLCH, such as many design apps, email templates, or native mobile code.
Some of the most saturated shades in v4 lie outside the sRGB range. Their HEX, RGB, and HSL values are clipped to the nearest color that sRGB can show, so on a wide-gamut screen they look slightly duller than the OKLCH original. Black and white are not listed because they are single values rather than scales: --color-black is #000 and --color-white is #fff.
The default palette is built in, so any family and shade works with every color utility: bg-, text-, border-, outline-, ring-, fill-, stroke-, decoration-, shadow-, and the gradient stops from-, via-, and to-. Add a slash and a number to change the opacity, for example bg-sky-500/20 for a 20% tint. Arbitrary percentages such as bg-pink-500/[71.37%] also work.
Write class names out in full. Tailwind finds classes by scanning your source files as plain text, so a name built at runtime, such as bg-${color}-500 in a template string, never appears in the files and its CSS is not generated. Map each value to a complete class name instead.
// Works: every class name appears in full
const tone = {
info: "bg-sky-100 text-sky-900 border-sky-300",
danger: "bg-red-100 text-red-900 border-red-300",
};
<p className={`rounded-lg border px-4 py-3 ${tone[status]}`}>{message}</p>In a project that uses Tailwind v4, every color is also a CSS variable in the --color-* namespace, so you can write color: var(--color-gray-950) in your own CSS. Tailwind's --alpha() function adds opacity to a variable: background-color: --alpha(var(--color-gray-950) / 10%).
Without Tailwind, copy the values. The v4 colors are designed for browsers that support OKLCH (Tailwind lists Chrome 111, Safari 16.4, and Firefox 128 as its baseline). For older browsers, put a HEX declaration first and the OKLCH one after it on the same property. This fallback only works on regular properties: on a custom property the second declaration always wins, and an unsupported value makes the variable invalid rather than falling back. Use @supports for variables, as in the second rule below.
.link {
color: #0069a8; /* sky-700 for browsers without OKLCH */
color: oklch(50% 0.134 242.749); /* sky-700 */
}
:root {
--brand: #0069a8;
}
@supports (color: oklch(0% 0 0)) {
:root {
--brand: oklch(50% 0.134 242.749);
}
}Theme colors are defined with @theme in your main CSS file. A new --color-* variable creates a full set of utilities for it, a variable with an existing name replaces that default, and setting a family to initial removes it, including its CSS variables, which keeps the output smaller if you never use it. --color-*: initial removes the whole default palette when you want only your own colors.
@import "tailwindcss";
@theme {
/* new color: bg-brand, text-brand, border-brand, ... */
--color-brand: oklch(50% 0.134 242.749);
/* remove families you don't use */
--color-lime-*: initial;
--color-fuchsia-*: initial;
}Shade numbers are not a contrast scale: the same number gives different contrast in different families. WCAG level AA asks for 4.5:1 for normal text and 3:1 for large text and UI parts such as icons and input borders. A few ratios, computed from the HEX values on this page:
There are nine gray families, and they differ by tint, which you can read from the OKLCH hue and chroma. Neutral has zero chroma and is a true gray. Slate is the most strongly blue (hue 257), gray is a less saturated blue gray, zinc has a faint violet tint, and stone is warm. Mauve, olive, mist, and taupe are low-chroma grays tinted purple, yellow-green, blue-green, and brown. Pick one gray family per project and use it for all text, borders, and surfaces, so the tints do not clash.
If you are migrating from Tailwind v3, the names are the same but the values are not. v3 defined its colors in sRGB HEX, and v4 redefined them in OKLCH, so sky-500 was #0ea5e9 in v3 and is #00a6f4 in v4. Values copied from a v3 design file or an old stylesheet will not match v4 utilities exactly.
Updated