Convert colors between HEX, RGB, and HSL formats, with a live color preview.
How to Use the Color Converter
Select the format your color value is currently in (HEX, RGB, or HSL).
Enter the color value, e.g. #3366ff — or use the color picker to choose one visually instead.
Click "Convert" to see it in all three formats, with a live color preview swatch.
How HEX, RGB and HSL Relate
HEX and RGB are two ways of writing exactly the same thing: how much red, green and blue light a screen pixel should emit, each on a scale from 0 to 255. RGB writes the three amounts as decimal numbers. HEX writes each one as a two-digit hexadecimal number, from 00 to ff, and joins them after a # sign. Converting between them is pure arithmetic and never loses information.
HSL describes the same color in terms people find more intuitive. Hue is an angle on the color wheel, where 0 is red, 120 is green and 240 is blue. Saturation is how far the color is from grey. Lightness runs from 0% for black, through 50% for the purest version of the hue, to 100% for white.
Whatever format you enter, this tool first turns it into red, green and blue values, then writes those values out as HEX, as RGB and as HSL. The HSL numbers are rounded to whole degrees and whole percentages.
Worked Example: #3366ff
Split the hex code into pairs: 33, 66 and ff. In decimal these are 51, 102 and 255, so the RGB value is rgb(51, 102, 255).
Divide each by 255 to get 0.2, 0.4 and 1. The largest is 1 and the smallest is 0.2, so lightness is their average, 0.6, or 60%.
Because lightness is above 50%, saturation is the difference (0.8) divided by 2 minus the sum of the largest and smallest (0.8), which gives 1, or 100%.
Blue is the largest channel, so the hue is 60 × (4 + (red − green) ÷ difference) = 60 × (4 − 0.25) = 225 degrees. The result is hsl(225, 100%, 60%).
Common Colors in All Three Formats
Color
HEX
RGB
HSL
Red
#ff0000
rgb(255, 0, 0)
hsl(0, 100%, 50%)
Green (CSS green)
#008000
rgb(0, 128, 0)
hsl(120, 100%, 25%)
Blue
#0000ff
rgb(0, 0, 255)
hsl(240, 100%, 50%)
Navy
#000080
rgb(0, 0, 128)
hsl(240, 100%, 25%)
Orange
#ffa500
rgb(255, 165, 0)
hsl(39, 100%, 50%)
Grey
#808080
rgb(128, 128, 128)
hsl(0, 0%, 50%)
White
#ffffff
rgb(255, 255, 255)
hsl(0, 0%, 100%)
Black
#000000
rgb(0, 0, 0)
hsl(0, 0%, 0%)
Practical Tips
Building a palette: convert your brand color to HSL, keep the hue fixed and change only the lightness. hsl(225, 100%, 60%) for a button, 50% for its hover state and 95% for a light background give shades that clearly belong together.
Greys always have 0% saturation, and their hue is meaningless, which is why the tool reports it as 0.
Enter values with commas, as in rgb(51, 102, 255), and include the % signs for HSL saturation and lightness. The newer CSS syntax that separates values with spaces is not recognised by this tool, and an alpha (transparency) value is ignored.
These formats describe colors for screens. A printer in India or anywhere else will usually ask for CMYK or a Pantone reference, and the same hex code can look duller on paper than on a monitor, so ask for a printed proof before a large print run.
Frequently Asked Questions
It converts between HEX (#rrggbb), RGB (rgb(r, g, b)), and HSL (hsl(h, s%, l%)) — the three most common color formats used in web design and CSS.
Yes, shorthand hex codes like #36f are automatically expanded to their full 6-digit form (#3366ff) before conversion.
Hue (0-360°) is the color's position on the color wheel, Saturation (0-100%) is how vivid the color is, and Lightness (0-100%) is how light or dark it is.
HSL values are shown rounded to whole numbers, and there are fewer whole-number HSL combinations than there are hex colors. Orange, #ffa500, becomes hsl(39, 100%, 50%), and converting that back gives #ffa600. The difference is one step in the green channel and is not visible, but keep the original hex code as your reference value.
Only partly. You can paste an rgba or hsla value, but the alpha number is ignored and the result is the fully opaque color. Eight-digit hex codes that include alpha are not accepted. To keep transparency, convert the color here and add the alpha value back by hand.