What this color converter does
This converter translates a single color across the three formats used in web development —HEX, RGB and HSL— in any direction. You type the color in whatever format you already have (the #3B82F6 you copied from Figma, the rgb(59, 130, 246) a library returns, or the hsl(217, 91%, 60%) from your design system) and the other two fields recompute instantly next to a live swatch. Each field has its own copy button. Every calculation runs in your browser.
How to use the tool
- Type or paste your color into the HEX, RGB or HSL field. Each field is editable on its own.
- The other two formats and the color swatch update automatically as you type.
- If a value is invalid, that field turns red with an “Invalid format” note; the rest keep the last valid color.
- Use the color picker (
input type=color) as a visual helper: choosing a shade fills all three fields. - Press Copy on the format you need, or copy all three at once.
The three formats and their formulas
HEX is hexadecimal notation: two digits per channel after # (red, green, blue), each pair from 0 to 255. RGB expresses those same three channels in decimal. HSL describes the color as hue (0 to 359 degrees), saturation and lightness in percent, and is the most convenient for lightening or darkening.
Converting RGB to HSL normalizes each channel by dividing it by 255 and takes the maximum and minimum:
- Lightness:
L = (max + min) / 2 - Saturation: if
L > 0.5,S = (max − min) / (2 − max − min); otherwiseS = (max − min) / (max + min) - Hue: derived from the dominant channel and multiplied by 60 degrees.
| HEX | RGB | HSL |
|---|---|---|
#3B82F6 | rgb(59, 130, 246) | hsl(217, 91%, 60%) |
#FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
#00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
#808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
#FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
Worked example
Let us convert #3B82F6 step by step.
From HEX to RGB, each hex pair is one channel: 3B = 59, 82 = 130, F6 = 246. That gives rgb(59, 130, 246).
From RGB to HSL, we normalize by 255: red 0.231, green 0.510, blue 0.965. The maximum is blue (0.965) and the minimum is red (0.231). Lightness is their average: (0.965 + 0.231) ÷ 2 = 0.598, so 60%. Because lightness is above 0.5, saturation is the difference (0.733) divided by (2 − 0.965 − 0.231) = 0.804, which is 0.912, so 91%. Since blue dominates, hue is ((red − green) ÷ 0.733 + 4) × 60 = 217.2, rounded to 217 degrees. Result: hsl(217, 91%, 60%), exactly what the tool shows.
Frequently asked questions
What is the difference between 3-digit and 6-digit HEX?
The 3-digit form is a shorthand where each digit is doubled: #F00 equals #FF0000 and #39F equals #3399FF. It only works when both digits of each channel match, so #3B82F6 has no short form. The converter accepts both and always returns the 6-digit form.
Why does a number sometimes change when converting HSL back to RGB?
Because HSL uses whole-number percentages, and that rounding loses precision. rgb(59, 130, 246) gives hsl(217, 91%, 60%), but going back from that rounded HSL yields rgb(60, 131, 246): one or two points of difference per channel. This is normal and visually imperceptible. To keep the exact color, store the HEX or RGB as the source of truth.
Can I paste rgba() or hsla() with transparency?
Yes: the converter reads the fourth value (alpha) but ignores it, because 6-digit HEX and HSL do not represent it. rgba(59, 130, 246, 0.5) is treated the same as rgb(59, 130, 246). If you need to keep transparency, add it separately in your CSS.
Is HSL the same as HSB or HSV?
No. They share the hue axis, but the third value differs: in HSL a lightness of 100% is always white, whereas in HSB (also called HSV) a brightness of 100% is the most vivid color possible. Photoshop uses HSB and CSS uses HSL, so the same color has different numbers in each.
Are the colors I type sent to any server?
No. All conversion runs in your browser with JavaScript; no value ever leaves your device. You can use the tool offline once the page has loaded.