Color Converter

hex#3b82f6
rgbrgb(59, 130, 246)
hslhsl(217, 91%, 60%)
rgbargba(59, 130, 246, 1)
tailwindbg-[#3b82f6]

Why Convert Colours?

Different tools and frameworks expect colours in different formats. Figma exports HEX, CSS gradients often use RGBA, Tailwind needs class names, and HSL is ideal for programmatic colour manipulation. Our converter shows all formats at once so you never have to calculate manually.

Features

  • Visual colour picker — use the native browser picker or type a hex value.
  • Five formats — HEX, RGB, RGBA, HSL, and Tailwind CSS class.
  • Live preview swatch — see the colour rendered in real time.
  • Copy individual formats — click any value to copy it.
  • Tailwind output — get the closest Tailwind utility class for your colour.

When to Use Each Format

  • HEX — CSS properties, design tokens, brand guidelines.
  • RGB / RGBA — CSS rgba() functions, Canvas API, transparency control.
  • HSL — programmatic lightening/darkening, generating palettes.
  • Tailwind — utility-first CSS frameworks.

Tags