Tailwind Color Converter

Paste any color and find the closest Tailwind CSS class instantly. Supports hex, rgb and hsl.

Pick or paste a color

rgb(168, 85, 247)hsl(271, 91%, 65%)

Your color

purple-500

Closest: purple-500

Distance: 0.0 — Almost exact!

Top matches

Full purple palette

Tailwind CSS

/* Closest Tailwind match for #a855f7 */

/* Background */
<div class="bg-purple-500">...</div>

/* Text */
<p class="text-purple-500">...</p>

/* Border */
<div class="border border-purple-500">...</div>

/* With opacity */
<div class="bg-purple-500/50">...</div>

Explore more Goodies

Other free tools from Eguth Studio you might enjoy.

View all Goodies

Colors

Color Palette Generator

Generate harmonious color palettes from a base color. Export hex codes instantly.

Try it ->

Colors

Gradient Generator

Design linear and radial CSS gradients. Pick colors, set direction, copy the code.

Try it ->

Layout

Flexbox Playground

Build flexbox layouts visually. Control direction, justify, align, wrap, gap and individual item properties.

Typography Scale

Generate a responsive typographic scale from a base size and ratio. Export CSS variables, clamp() fluid values and Tailwind config.

Try it ->

Animation

CSS Animation Builder

Build CSS keyframe animations visually with a timeline editor. Export CSS and Tailwind classes.

Try it ->

NewEffects

Screenshot Beautifier

Transform screenshots into stunning visuals with browser frames, device mockups, gradient backgrounds and export in multiple formats.

Try it ->

View all Goodies