Convert colors between hex, RGB and HSL with a picker, four CSS output formats and a live contrast preview; every value stays in sync as you type.
Color conversion happens locally in your browser. Nothing is sent anywhere.
—————The three notations describe the same integer triple, and the tool keeps one canonical state — R, G, B in 0–255 plus an alpha — and re-renders every view from it. Hex is just the bytes written in base 16, so that conversion is packing, not math.
#RRGGBB is the red, green and blue channel as two hex digits each: 37 → 25, so rgb(37, 99, 235) becomes #2563EB. The 3-digit shorthand #abc means #aabbcc and is accepted on input; the 8-digit form appends the alpha byte (#2563EB80 ≈ 50 %).cmax and cmin, then L = (cmax + cmin) / 2 and S = (cmax − cmin) / (1 − |2L − 1|) (0 when grey). Hue is the angle of whichever channel is the maximum — e.g. when red is max, H = 60° × ((G − B) / Δ mod 6) — so a color's hue survives every later lightness tweak.C = (1 − |2L − 1|) × S as the chroma, X = C × (1 − |(H/60 mod 2) − 1|), pick the sector of the color wheel, then add m = L − C/2 to each channel. The tool hand-writes both directions — no CSS parsing shortcuts — and rounds consistently, so hsl → rgb → hsl round-trips within one unit.Because HSL channels map to the three questions people actually ask about a color: what hue is it, how saturated, how light? Deriving a hover state becomes 'lightness minus 8 %', tonal palettes become one hue with stepped lightness, and desaturating a warning to grey is one number to zero. The same edits in RGB require trial and error because its channels mix hue and brightness together.
Both work in every modern browser — 8-digit hex landed with CSS Color Level 4 support (Chrome/Safari/Edge for years, Firefox 49+). rgba() has the longer compatibility tail and is still what most style guides and preprocessors emit. This tool shows both so you can match your project's convention; note the order is R-G-B-A in hex, never A first.
Early 1990s displays could show 256 colors, so designers restricted palettes to 6×6×6 = 216 colors whose RGB channels are multiples of 51 (#33, #66, #99, #CC, #FF). That palette survived dithering on 256-color screens. Modern screens make it obsolete except in retro pixel art — which is why #FF6600 still reads as a 'classic' web orange.
The native <input type=color> element has no concept of transparency — it always returns an opaque #RRGGBB. Alpha is therefore a separate slider that only affects the RGBA and HSLA output strings; the swatch and the contrast preview render the color fully opaque on purpose.
No. Parsing, the RGB↔HSL math and every output string are computed by a few dozen lines of JavaScript in your browser. No color you type leaves the page, and the converter works with the network disabled.
If you just finished with HEX to RGB Converter, the natural next steps are Color Palette Generator, Color Contrast Checker, Color Blindness Simulator, or browse every tool in Privacy File Tools.