Convert between HEX, RGB and HSL color codes. Pick a color and all three formats update instantly, with one-click copy.
HEX, RGB, and HSL all describe the exact same color; they just use different coordinate systems to record it. RGB is the most direct: three integers from 0–255 for red, green, and blue, representing how much of each color of light your screen mixes together — this is the physical basis of digital displays, and every color eventually gets converted to RGB to light up pixels. HEX simply rewrites those same three RGB numbers in base 16 so they're compact enough to paste into code or design files: in a 6-digit HEX value, the first two digits are R, the middle two are G, and the last two are B — it's literally the same data as RGB, just a different number base. HSL takes a more human-intuitive approach, using Hue (0–360°, which basic color it is), Saturation (how vivid it is), and Lightness (how light or dark it is) instead of "how much red light, how much green light."
To go from RGB to HSL, the code first divides R, G, B by 255 to get 0–1 ratios, then takes the max and min of the three; Lightness is the average of the max and min; Saturation depends on the gap between max and min (a bigger gap means a more vivid color); and Hue depends on which channel is largest, computed through a piecewise formula based on an angle — this is exactly what this tool's rgbToHsl() function does. Going the other way, from HSL back to RGB, uses the hue angle together with a helper function (hue2rgb) that works out, piece by piece, how much of each channel to mix in. None of this is arbitrary — every one of the three formats can be converted to and from the others with zero loss of precision. No format is "more accurate"; they just trade off differently for human readability versus computation.
For CSS or talking to developers, HEX wins on brevity and easy copy-paste — #4F46E5 is a complete, compact color reference, and design tools like Figma and Photoshop default their swatch fields to HEX. When you need to fine-tune a color, HSL is often more useful: to get a lighter or darker version of the same hue, just keep H and S fixed and change L, instead of fumbling with three separate RGB numbers to visually land on "same color family, but brighter." Want a more muted, Morandi-style tone? Just lower S. RGB shows up most in code that does numeric operations on color — alpha blending, gradient interpolation — because it's the rawest, most linear representation.
Take the tool's default color, #4F46E5 (an indigo-blue). Split into its three HEX pairs — 4F, 46, E5 — and convert each to decimal: R=79, G=70, B=229, i.e. rgb(79, 70, 229). Converting further to HSL: among the three ratios, B is the largest and G is the smallest, which places the hue in the blue-to-purple range, giving hsl(244, 75%, 59%) — a hue of 244° (blue-purple), 75% saturation (fairly vivid), and 59% lightness (medium brightness), which matches what your eyes see as indigo-blue. You can type #4F46E5 into the tool above to confirm this yourself.
Normally, no. RGB, HEX, and HSL convert through exact mathematical formulas, not estimates, so converting a color back and forth repeatedly gives consistent results. The one place tiny rounding can creep in is when HSL's angle or percentage values get rounded to whole numbers on the way back to RGB — in theory this can shift an RGB value by ±1, but it's completely invisible to the eye.
This tool's HEX validation only accepts a clean 3- or 6-digit hex string (with or without a leading #). If what you pasted has extra spaces, a line break, or is actually a different format like rgba(), it won't trigger an update. Strip it down to just the code (e.g. 4F46E5 or #4F46E5) and it will work.
No. All conversion runs as pure JavaScript directly in your browser. There's no code on this page that sends color data anywhere — refresh the page and the data is gone. That makes it fine to use for internal design drafts or brand colors that aren't public yet.
They're related but not identical, so be careful mixing terminology. HSL's S and L are standardized computer-graphics definitions that differ slightly from the saturation/value math used in HSV or in print-oriented color spaces like Lab. The numbers aren't directly interchangeable, but as an intuitive way to adjust the depth and vividness of a hue, HSL is more than good enough.
The 3-digit shorthand doubles each digit to expand into 6 digits — for example #4F6 expands to #44FF66, not #4F0F60. That's the CSS shorthand rule, and it can only represent colors where both digits of each channel match (16×16×16 possible colors total) — it can't express every color that full 6-digit HEX can.