Convert HEX to RGB & HSL Online

Every color on screen is built from three numbers, red, green and blue, while design tools also write that same color as HEX or HSL. This converter keeps the three forms in step. Paste a HEX code and the R, G and B channels fill in, or change any channel and the HEX code and HSL string are rebuilt. The swatch below the form shows exactly that value, so a typo is visible immediately. Channel values are clamped to 0–255 and all the maths runs in the browser. This version works with opaque colors only (no alpha) and does not accept three-digit shorthand such as #fff; use the full six-digit form.

This tool runs entirely in your browser. No data is sent to any server.

How to use it

1. 1

   Put the color code, including the #, into the HEX box, for example #8b5cf6.

2. 2

   For finer control, change the R, G and B numbers; HEX and HSL update at the same time.

3. 3

   Take the hsl(...) string or the HEX code from the boxes into your CSS or design app.

Frequently asked questions

What is the difference between HEX and RGB?

Same color, different notation. HEX writes the three 0–255 numbers in base 16 back to back; #8b5cf6 means red 139, green 92 and blue 246.

Why bother with HSL?

Because it reads the way people think: hue is the angle on the color wheel, saturation the intensity, lightness the brightness. Making a lighter or darker shade of one color is far easier by adjusting lightness than by guessing HEX values.

Does it accept colors with transparency?

No. This version converts opaque colors and does not parse the eight-digit HEXA form. If you need alpha, add it separately in CSS with rgba or the eight-digit notation.