Color converter
HEX ⇄ RGB ⇄ HSL, with a picker and live preview.
How to use the color converter
- Type or paste a HEX code — with or without the
#, and 3-digit shorthand works too (#f80expands to#ff8800). - Or click the color input to open your browser's picker — on most desktop browsers it includes an eyedropper for sampling a color anywhere on screen, plus sliders for visual tweaking.
- Watch the swatch, RGB and HSL boxes update live. The strings are formatted exactly as CSS wants them:
rgb(79, 70, 229),hsl(243, 75%, 59%). - Copy any of the three with its button — useful when a tool insists on one particular format.
Common uses
- Translate brand-guide HEX values into the
rgb()orhsl()strings your CSS, JavaScript or canvas code needs. - Build consistent shade scales: convert to HSL, keep the hue and saturation, and step the lightness for hover states, borders and dark-mode variants.
- Pull out the red/green/blue components for tools that want numbers instead of hex — video editors, game engines, LED controllers.
- Sample a color from a screenshot or another app with the picker's eyedropper (where your browser offers one) and read off its exact HEX.
Tips & limitations
- Conversion flows one way — from the HEX field or the picker. The RGB and HSL boxes are read-only output; to start from an RGB value, use your browser's picker dialog, which usually accepts RGB entry directly.
- No alpha channel here: 8-digit hex and rgba() aren't supported. Convert the solid color, then add the alpha yourself —
rgb(79, 70, 229)becomesrgba(79, 70, 229, 0.5). - HSL values are rounded to whole numbers. That's fine for CSS, but a round trip through another converter can drift by a point — treat the HEX as your canonical value.
- In HSL, hue is a position on a 0–360° color wheel, saturation is intensity, and lightness runs black→white — which is why nudging one number does something predictable, unlike editing hex digits.
How it's built & why it's safe
A native HTML <input type="color"> provides the picker, and the conversions are a few lines of plain JavaScript — hex pairs are parsed straight into red/green/blue with bit shifts, and the standard RGB→HSL formula produces hue, saturation and lightness. No libraries, no lookups, no network calls. Nothing you type or pick is sent or stored anywhere, and the page keeps no history — it resets to the default color on refresh.
Related tools: SVG to PNG · Image to Base64 · Number Base Converter
Frequently asked questions
Which color formats does it support?
Input is HEX (3- or 6-digit, the # is optional) or the visual picker; output is CSS-ready rgb() and hsl() strings plus the normalized hex. Alpha (transparency) values aren't supported — convert the solid color and add alpha in your code.
Can I convert RGB or HSL back to HEX?
Not by typing into those boxes — they're outputs. But most browsers' color pickers accept RGB or HSL entry inside the picker dialog, and the moment you confirm a color there, this page shows its hex.
What's the practical difference between RGB and HSL?
They describe the same colors with different knobs. RGB mixes red, green and blue light, which suits machines; HSL separates hue from saturation and lightness, which suits humans — “make it lighter” is one number.
Why did my color shift slightly after converting back?
The hue, saturation and lightness shown are rounded to whole numbers for readable CSS. Converting a rounded HSL back to hex elsewhere can land one step away from the original — keep the hex if you need the exact color.
What does a hex code like #4f46e5 actually mean?
Hex is base-16: each pair of characters is one channel from 00 to ff (0 to 255). Here 4f is red 79, 46 is green 70 and e5 is blue 229 — the same numbers the rgb() output shows.
Is my color data sent anywhere?
No — the math runs in a small local script with no network requests. Colors aren't logged, saved or synced, and refreshing the page resets it to the default.