HEX to RGB Converter

HEX, RGB and HSL: what each notation is for

All three notations describe the same thing — a point in a color space — but they are read by different audiences and they make different edits easy. Knowing when to reach for each one saves a surprising amount of time.

HEX: the storage format

A HEX color is a six-digit base-16 number written as three pairs: #RRGGBB. Each pair ranges from 00 (0) to FF (255). So #2457D6 is red 36, green 87, blue 214. It is short, it is what design tools copy to the clipboard, and it is accepted everywhere CSS is. Its weakness is that it is unreadable to humans: nothing in #2457D6 tells you that this is a fairly saturated blue, or how to make a lighter version of it.

Three-digit shorthand (#f63) means each digit is doubled (#ff6633), which only works when each pair has repeated digits. Eight-digit HEX (#RRGGBBAA) adds an alpha channel, now supported in all modern browsers.

RGB: the programmatic format

rgb(36, 87, 214) is the same information in decimal, which is what canvas drawing, image processing and most JavaScript libraries expect. The rgba() form adds a fourth alpha argument (rgba(36, 87, 214, 0.5)), and modern CSS also allows the space-separated rgb(36 87 214 / 50%) syntax.

One caveat: RGB values are device-dependent. A color specified in sRGB will render slightly differently on a wide-gamut display unless the color space is declared, which is why newer specs introduce color(display-p3 …) and friends. For ordinary UI work, sRGB is still the safe default.

HSL: the editing format

hsl(223, 72%, 49%) splits the color into hue (0–360° around the color wheel), saturation (0–100%) and lightness (0–100%). This is the format to think in when you need a family of related colors: keep hue and saturation fixed and move lightness to generate hover, active, border and background states that obviously belong together. That is exactly what the palette generator does.

HSL has one known quirk: perceptually, hsl(60, 100%, 50%) (yellow) looks far brighter than hsl(240, 100%, 50%) (blue) even though both are “50% lightness”. If you need perceptually uniform steps, look at OKLCH or LCH, which modern browsers now support natively.

Doing the conversion by hand

HEX to RGB is a base change: take each pair, multiply the first digit by 16 and add the second. 6 is 6 and 6×16+6 = 102, so 66 = 102. RGB to HSL requires normalizing channels to 0–1, taking max and min, and computing lightness as their average, saturation from their difference, and hue from whichever channel is largest. The converter above does all of it instantly and round-trips without drift.

Related

Need to sample a color first? Use the color picker. Need to check whether two colors are readable together? Use the WCAG contrast checker.

The RGB to HSL algorithm in four steps

Converting by hand is less mysterious than it looks. One: divide each channel by 255 to get values between 0 and 1. Two: find the maximum and minimum of the three. Three: lightness is their average, (max + min) / 2, and saturation is their difference divided by 1 - |2L - 1| — zero whenever all three channels are identical. Four: hue comes from whichever channel is the largest, computed from the differences between channels and scaled around the 0–360° circle. For rgb(36, 87, 214) that works out to hue 223°, saturation 72%, lightness 49% — exactly what the converter above prints.

Doing the conversion in JavaScript

Hex to RGB is two characters at a time: parseInt(hex.slice(1, 3), 16) gives the red channel, and the same for green and blue. RGB back to hex is toString(16).padStart(2, "0") per channel, concatenated. Two details trip people up: three-digit shorthand like #f63 must be expanded to six digits before parsing, and untrusted input may carry whitespace or a missing hash, so normalise before you slice. For HSL there is a standard ten-line implementation, or you can let CSS do the arithmetic — set an element’s style to an hsl() value and read back the computed rgb().

Alpha, transparency and eight-digit HEX

None of the three notations carries transparency on its own — that is the job of the alpha channel. rgba() and hsla() add it as a fourth argument, eight-digit HEX (#RRGGBBAA) packs it into two extra hex digits, and modern CSS accepts space-separated percentages such as rgb(36 87 214 / 40%). One accessibility caveat: alpha is composited against whatever sits behind it, so white text at 80% opacity over a light background is not the color you typed — compute the composited result before checking contrast.

Reference values worth memorising

Hex and decimal snap points make hand-editing much faster: 00 is 0, 33 is 51, 66 is 102, 99 is 153, CC is 204 and FF is 255 — the step-51 ladder behind the old web-safe palette. Half brightness (128) is 80. When a HEX value is made only of pairs from that ladder you can convert it to RGB in your head, which is a small superpower during code review.

Where conversion shows up in real projects

Design tokens store HEX because it is compact; runtime code usually prefers RGB because channels are easy to clamp and blend; hand-authored CSS benefits from HSL because variants are one number away. Being able to bounce between the three notations on demand is the reason this converter is the page people bookmark: paste a value out of a design file, take out whichever notation the destination expects.

Frequently asked questions

How do I convert HEX to RGB?

A HEX value is three pairs of hexadecimal digits: RR, GG, BB. Convert each pair from base 16 to base 10 to get the red, green and blue channels. #FF6633 becomes FF=255, 66=102, 33=51, so rgb(255, 102, 51).

Which format should I use in CSS?

HEX is compact and widely supported, so it is a good default for stored values. RGB is convenient when you need an alpha channel via rgba(). HSL is the best choice when you intend to derive lighter or darker variants.

Does the converter accept shorthand HEX?

Yes. Three-digit shorthand such as #f63 is expanded to #ff6633 automatically.