Tailwind CSS Color Matching Tool

Translate custom hex codes to standard Tailwind configuration class names.

Hex Color Input

HEX:

#6366F1

RGB:

rgb(99, 102, 241)

HSL:

hsl(239, 84%, 67%)

CMYK:

cmyk(59%, 58%, 0%, 5%)

Processed locally in your browser — nothing is uploaded.

How to Use

Supports all default Tailwind palette families (slate, red, blue, green, etc.) across shades 50 to 950.

HEX, RGB, HSL Converter

Convert colors between HEX, RGB, HSL, and CMYK formats.

CSS Box Shadow Generator

Design and customize CSS box shadow styles visually.