Z

Color Converter (HEX / RGB / HSL)

Convert colors between HEX, RGB and HSL and preview the result.

Runs in your browser — files never leave your device

HEX: #5A3FF0
RGB: rgb(90, 63, 240)
HSL: hsl(249, 86%, 59%)

How it works

Pick a color with the swatch or type a HEX code, and the tool shows the same color in the three notations CSS understands — HEX, RGB and HSL — each with its own copy button, above a live preview panel. The three rows always agree: one color is stored and reconverted on every keystroke, so there’s no “apply” step and no drift between formats.

HEX to RGB is byte arithmetic. A six-digit code is three two-digit hexadecimal numbers — red, green, blue — each from 00 to FF (0 to 255). #336699 splits into 33, 66 and 99, which are 51, 102 and 153 in decimal, so it becomes rgb(51, 102, 153). Three-digit shorthand expands by doubling each digit: #369 becomes #336699, the identical color. Letter case doesn’t matter, and an incomplete or invalid code falls back to black — rgb(0, 0, 0) — until enough valid digits exist.

RGB to HSL uses the standard formula, implemented exactly as displayed. Channels are normalized to 0–1; lightness is the midpoint of the largest and smallest channel, (max + min) / 2; saturation divides their difference by (max + min) below 50% lightness, or by (2 − max − min) above it; and hue falls into a 60°-wide sector chosen by whichever channel is largest. All three round to whole numbers. For #336699 the largest channel is blue (0.6) and the smallest red (0.2), giving hsl(210, 50%, 40%); pure red #FF0000 lands at hsl(0, 100%, 50%).

Why bother with three formats:

  • HEX is the shortest form and the lingua franca of design tools
  • HSL is the easiest to reason about — tints, shades and hover states are usually a lightness move
  • RGB matches JavaScript, canvas and image-data APIs

One caveat: because the displayed HSL values are rounded to integers, pasting the HSL into CSS can render a color a point or two off the original bytes — invisible in practice, but keep the HEX as the source of truth when matching a brand color exactly. And a six-digit HEX carries no alpha; transparency belongs in 8-digit HEX or in rgb(51 102 153 / 0.5) slash syntax in your stylesheet.

Frequently asked questions

How does HEX to RGB conversion work?
A six-digit HEX code is three hexadecimal bytes: the first pair is red, the second green, the third blue, each running 00–FF (0–255). #336699 therefore converts to rgb(51, 102, 153) — hexadecimal 33 is decimal 51, 66 is 102 and 99 is 153. The conversion is exact in both directions.
Do 3-digit shorthand codes like #369 work?
Yes. CSS shorthand doubles each digit, so #369 expands to #336699 and converts to exactly the same rgb(51, 102, 153) and hsl(210, 50%, 40%). Only colors whose channel bytes are doubled digits (33, 66, 99 and so on) have a shorthand form.
What do the three HSL numbers mean?
Hue is an angle on the color wheel from 0 to 360 — 0 is red, 120 green, 240 blue. Saturation runs from 0% (grey) to 100% (fully vivid), and lightness from 0% (black) through 50% (the pure hue) to 100% (white). That structure is why HSL suits palette work: keep hue fixed, move lightness, and you get consistent tints and shades.
Why does the preview turn black while I type?
Any value that isn’t 3 or 6 valid hexadecimal digits falls back to rgb(0, 0, 0). That is normal mid-keystroke — finish the code and the real color appears.
Can it convert colors with transparency?
A six-digit HEX is always fully opaque, and the converter works on opaque colors. In CSS, alpha lives in 8-digit HEX (#33669980) or in slash syntax like rgb(51 102 153 / 0.5) — convert the opaque part here and append the alpha in your stylesheet.
Which format should I use in my CSS?
They render identically, so it is a workflow choice. HEX is the most compact and what most design tools copy; HSL is the easiest to adjust systematically, since hover and disabled states are usually just lightness moves; RGB matches what JavaScript, canvas and image APIs return.
Is anything uploaded?
No. The conversion is a few arithmetic operations that run in your browser on every keystroke; the colors you pick never leave your device.

Related tools