Tailwind Colour Converter

Features

• Tailwind class name to hex / rgb / hsl
• hex, rgb() and hsl() to a value and the nearest Tailwind name
• Built-in v3 default palette: 22 families × 11 shades plus black and white, 244 values
• Class names may keep a utility prefix (bg-, text-, border-t- …) and an opacity suffix such as /50
• Nearest colour by redmean-weighted RGB distance, with the distance shown
• Accepts 3-digit hex (#abc) and rgb/rgba, hsl/hsla
• A colour swatch is drawn in front of each value
• Convert several lines at once and copy them one by one

How to use

1. Type one colour value or Tailwind class per line
2. Pick the output format (hex, rgb, hsl, Tailwind, or all)
3. The conversion and the nearest name appear at once
4. Use the copy button on a row to take just that value

FAQ

How is the “nearest” colour worked out?

With a redmean-weighted RGB distance: the difference is taken on each of the three channels, then weighted by the mean of the red channel. It is far more sensible than comparing hex strings (which would treat two blues differing by one digit as unrelated) and closer to human perception than a plain Euclidean distance in RGB (the eye is most sensitive to green and least to blue). It is not a colour-management-grade CIEDE2000, but it is more than enough to pick the nearest of 244 candidates.

Why is there no matching class for some colours?

Because the built-in palette is the Tailwind default and does not include colours you defined yourself. If you changed the palette in `tailwind.config`, the nearest name reflects the default only — but it still tells you roughly which family and shade the colour falls into.

Which colour notations are accepted?

Hex (3 or 6 digits, with or without the leading `#`), `rgb()` / `rgba()`, `hsl()` / `hsla()`, and Tailwind class names. Both space-separated and comma-separated forms are recognised.

Is anything uploaded?

No. The palette and the conversions all run in the browser and the page makes no requests.