PickCodeLook the hex up in the Tailwind palette: an exact match gives you a class like bg-blue-500 for #3b82f6. If there is no exact match, pick the closest shade only if the difference is invisible to you; otherwise keep the exact value as bg-[#3b82f6] or add it to your theme as a named color.
Exact matches
These hex values come from the Tailwind v3 palette, which most sites in the wild still use:
| Hex | Class | Note |
|---|---|---|
| #3b82f6 | blue-500 | Common primary button blue |
| #4f46e5 | indigo-600 | |
| #10b981 | emerald-500 | |
| #ef4444 | red-500 | |
| #111827 | gray-900 | Dark text |
| #f8fafc | slate-50 | Light background |
Tailwind v4 defines its palette in OKLCH, so the same class names render very close to, but not always exactly, these hex values.
When there is no exact match
- Find the hue family (blue, sky, indigo) and the two nearest shades.
- Put both side by side with the original. If you cannot tell them apart, use the class.
- If you can, keep the arbitrary value, or add it once to your theme so it gets a name.
- For transparency, use the opacity modifier:
bg-blue-500/50.
@theme {
--color-brand: #3a7bd5;
}
/* now: bg-brand, text-brand, border-brand/40 */Doing it for a whole component
PickCode checks every color on a picked element against the default palette and allows a difference of up to 2 in each RGB channel, so rounding noise still maps to a class. Anything further off stays exact, such as bg-[#3a7bd5]. Colors that came from a CSS variable stay variables. For single values, the free CSS to Tailwind converter also works.
Full walkthrough: Extract a color palette
Questions
Is there a formula for the nearest Tailwind color?
Tools usually compare colors by distance in a color space. A perceptual space such as OKLCH matches what your eye sees better than raw RGB.
Should I always snap to the nearest shade?
No. Brand colors should stay exact. Snap only when the difference is too small to notice.
How do I get the hex codes from a website?
Use the DevTools color picker, or see the color palette guide.