Color Converter for HEX, RGB and HSL with Live Swatch

What is a color converter?

The same color can be written as a hex triplet, an rgb() function, or an hsl() function, and different parts of a codebase — a design tool's export, a CSS-in-JS theme file, an old stylesheet — tend to favor different ones. This tool parses whichever format you paste and shows the equivalent hex, RGB, and HSL values side by side, along with a live swatch so you can confirm it's the color you expect.

HSL in particular is useful beyond just display: because it separates hue from saturation and lightness, it's the easiest format to reason about when you want a lighter or darker variant of an existing brand color without guessing at RGB channel math.

When to use it

Use it when a designer hands you a hex value and your codebase's theme uses HSL custom properties (common in Tailwind/shadcn setups), or vice versa. It's also useful for sanity-checking a color pulled from a screenshot or a browser's color picker, or for quickly generating the HSL breakdown of a color so you can tweak lightness for a hover or disabled state.

The input accepts 6-digit and 3-digit hex (with or without the #), rgb()/rgba(), and hsl()/hsla() — paste any of them and the other two are derived automatically.

Example

Paste #3b82f6 and the tool resolves it to rgb(59, 130, 246) and hsl(217, 91%, 60%) — a mid-tone blue. Try lowering the lightness in the HSL value (e.g. to 40%) and converting that back to see a darker shade of the same hue, which is exactly the workflow for deriving a :hover state from a base color.