HEX
RGB
rgb(74, 222, 128)
HSL
hsl(142, 69%, 58%)
CSS Snippets
background-color: #4ade80;color: rgb(74, 222, 128);border-color: hsl(142, 69%, 58%);Nearest Tailwind
green-400
Pick colors and convert HEX, RGB, HSL — with Tailwind classes
Pick any color and convert it between HEX, RGB, and HSL notations instantly, plus find the nearest Tailwind CSS color class. Runs entirely in your browser with live preview.
Frequently Asked Questions
- What is the difference between HEX, RGB, and HSL?
- They describe the same color differently: HEX (#4ade80) is compact for CSS, RGB expresses red/green/blue channels, and HSL (hue, saturation, lightness) is easiest for humans to adjust systematically.
- How does the nearest Tailwind class work?
- The tool computes the distance between your color and every color in the Tailwind palette, returning the closest match — handy when converting an existing design to Tailwind.
- When should I use HSL instead of HEX?
- Use HSL when you need systematic variations — lightening a hover state or building a palette — because changing one HSL component predictably changes the appearance.
- Does this support alpha (transparency)?
- The converter focuses on opaque colors. For transparency, append an alpha channel in your CSS using rgba() or 8-digit hex once you have the base color.