About this tool

Convert a HEX color into RGB, HSL, and a Tailwind arbitrary background class you can paste into markup.

How to use

Edit the HEX field — output updates with channels and bg-[#…] form. Use brand colors that are not on the default Tailwind palette.

Default sky accent demonstrates HEX → RGB/HSL → Tailwind arbitrary.

Input

#38bdf8

Output

HEX: #38BDF8
RGB: rgb(56, 189, 248)
HSL: hsl(199, 93%, 60%)
Tailwind arbitrary: bg-[#38bdf8]

Arbitrary colors are valid Tailwind; nearest-palette guessing is often wrong for brand work.

Which color formats does it convert?

Type a 3- or 6-digit HEX value (or use the picker) and you get RGB, HSL, and a Tailwind arbitrary class such as bg-[#38bdf8].

Why an arbitrary class instead of the nearest Tailwind color?

Brand colors rarely match the default palette. A nearest-match guess changes your design silently, while bg-[#hex] keeps the exact color.