Convertisseur Tailwind Colors

Collez une couleur et trouvez la classe Tailwind CSS la plus proche instantanement. Supporte hex, rgb et 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>

Explorer d'autres Goodies

D'autres outils gratuits par Eguth Studio qui pourraient vous plaire.

Voir tous les Goodies

Colors

Generateur de palettes

Generez des palettes de couleurs harmonieuses a partir d'une couleur de base. Exportez les codes hex instantanement.

Try it ->

Colors

Generateur de gradients

Designez des gradients CSS lineaires et radiaux. Choisissez les couleurs, la direction, copiez le code.

Try it ->

Effects

Generateur d'effets texte

Creez des effets de texte — gradient, stroke, neon glow, ombre longue, retro 3D et emboss.

Try it ->

NewEffects

CSS Filter Playground

Combinez des filtres CSS visuellement — blur, luminosite, contraste, niveaux de gris, rotation de teinte, saturation, sepia et inversion avec apercu en temps reel.

Try it ->

Layout

Previsualisation border-radius

Visualisez et ajustez des valeurs complexes de border-radius sur un apercu en direct.

Calculateur Clamp

Generez des valeurs CSS clamp() responsives pour la typographie et l'espacement fluides. Definissez viewport et valeurs min/max, previsualisation a chaque breakpoint.

Try it ->

Voir tous les Goodies