Tailwind Color Picker

The Tailwind color palette is a small piece of public design infrastructure that quietly defined the look of the modern web. By shipping a carefully-curated set of 22 color families with 11 weights each, Tailwind gave millions of developers a starting palette that was good enough that most never bothered to customize it. The result: a generation of websites that share a common color language, with subtle family-to-family relationships (cool grays vs warm grays, the saturation ramp from red→rose→pink) that make every Tailwind-built site feel coherent in a way that ad-hoc color choices rarely do.

This tool gives you direct access to that palette without needing a Tailwind project to consult. The 242 swatches (22 families × 11 weights) are encoded as HEX values pulled from the v4 reference table, which means every value here is exactly what Tailwind itself ships. You can use this in a Tailwind project as a quick "what does `emerald-600` look like?" reference, OR you can use it as a general-purpose design palette in Figma, Sketch, vanilla CSS, presentation slides, or anywhere else you need credible-looking colors quickly.

The **family choice** matters more than people realize. Tailwind ships five "gray" families — slate, gray, zinc, neutral, stone — that look nearly identical at a glance but differ in **temperature**. Slate is cool (slight blue cast); stone is warm (slight tan cast); neutral is the most chromaless. The right gray to pair with your accent colors depends on those accents' temperature. Slate pairs naturally with sky, blue, and indigo; stone pairs with amber, orange, and rose; neutral works as a safe middle. Picking the right gray family upfront saves the "why does this feel slightly off" tweaking that haunts ad-hoc palettes.

The **weight ramp** (50 → 950) is the lightness scale. Tailwind designed these to be perceptually uniform: stepping from 500 to 600 produces about the same darkening as stepping from 600 to 700. This means linear use of the ramp produces visually consistent results — a "dark mode" that maps 100→900, 200→800, 300→700 produces something that reads as a true inversion. The weight 500 in each family is the family's "name color" — what people mean when they say "blue" or "emerald."

When you click a swatch, the detail panel shows **six formats** for the same color:

- **HEX** (`#3b82f6`) — universal, works everywhere. - **RGB** (`rgb(59, 130, 246)`) — useful when you need to extract or manipulate channels. - **HSL** (`hsl(217, 91%, 60%)`) — useful for understanding hue/saturation/lightness relationships when comparing colors. - **CSS variable** (`var(--color-blue-500)`) — Tailwind v4 exposes every palette value as a CSS custom property at the root, accessible from any CSS even outside Tailwind utilities. - **Tailwind bg class** (`bg-blue-500`) — ready to paste into a Tailwind JSX/HTML attribute. - **Tailwind text class** (`text-blue-500`) — same for text color.

The CSS variable form is the most underused. Many Tailwind v4 users don't realize they can write `color: var(--color-blue-500)` in a plain CSS file (no Tailwind directives, no JIT compilation) and it works because Tailwind injected the variables at the document root. This is the cleanest way to reference Tailwind colors from third-party components, from vendor stylesheets, or from CSS-in-JS where you want to share the design system's tokens without configuring a custom transformer.

A note on **OKLCH**. Tailwind v4 internally defines colors in OKLCH (a perceptually-uniform color space) and converts to RGB at render time. The OKLCH form is more useful than HEX for color manipulation (lightening, darkening, shifting hue while preserving perceived lightness), but most designers and developers think in HEX, and HEX is what every tool from Figma to Slack to your browser's DevTools accepts. This tool emits HEX/RGB/HSL because those are the universal formats; reach for OKLCH directly via Tailwind's docs or a dedicated color library when you need it.

Everything in this tool is client-side. The palette is about 10 KB of data baked into the page bundle; clicking a swatch and copying a value involves no network requests. The colors render via inline `style` on a 22×11 grid of buttons — the same way they would render in any Tailwind project.