Tailwind Color Picker
Browse the full Tailwind CSS v4 color palette as a grid. Click any swatch to copy the HEX value or the Tailwind class name (e.g., bg-blue-600). Includes the OKLCH values that Tailwind v4 uses internally.
How to use the Tailwind Color Picker
Pick what to copy (HEX value, the full Tailwind class, or the OKLCH value used by Tailwind v4). Click any swatch to copy. The class prefix selector lets you grab background, text, border, or no-prefix variants.
The Tailwind palette at a glance
Tailwind ships a carefully tuned default palette — each color family running from 50 to 950 — and most projects lean on it heavily. The friction is recall: remembering whether a particular blue is blue-500 or blue-600, or what hex a class maps to when you need a raw value for a chart, an email, or a non-Tailwind context.
This shows the whole palette as a grid and copies whatever you need on click: the hex, the full class with your chosen prefix (such as bg-blue-600), or the OKLCH value Tailwind v4 uses internally. To build an equivalent 50–900 scale from your own brand color instead of the defaults, use the monochromatic palette; to explore the OKLCH space directly, the OKLCH color picker.
Common use cases
- Class lookup — find the exact Tailwind class for a shade you want.
- Hex for non-Tailwind — grab the raw hex for a chart, email, or canvas.
- OKLCH values — copy the v4 OKLCH definition for custom theming.
- Prefix variants — switch between bg-, text-, and border- on copy.
- Design reference — eyeball the full palette while choosing colors.