Color Converter
Convert any color between HEX, RGB, and HSL and preview it on a live swatch - paste #336699, rgb(51, 102, 153), or hsl(210, 50%, 40%).
#336699
RGB
rgb(51, 102, 153)
HSL
hsl(210, 50%, 40%)
HEX (#336699), rgb(51, 102, 153), or hsl(210, 50%, 40%)
HEX, RGB, and HSL describe the same color three different ways, and each shows up at a different point in a design-to-code workflow. HEX (#336699) is the compact form designers hand off in style guides and Figma exports. RGB (rgb(51, 102, 153)) is what canvas and image-processing code usually expects, since it maps directly to the red, green, and blue channels a screen renders. HSL (hsl(210, 50%, 40%)) separates hue from how light or saturated the color is, which is why it is the format developers reach for when a hover state just needs to be "10% lighter" or a palette needs a consistent saturation across several hues. Paste a value in any of the three formats and this tool fills in the other two plus a rendered swatch, so you can move between a client's HEX spec, a CSS rgb() value, and an HSL tweak without doing the math by hand.
Examples
A muted corporate blue, #336699, is rgb(51, 102, 153) in decimal channels, or hsl(210, 50%, 40%) once you separate out the hue (210°, a blue) from its 50% saturation and 40% lightness.
A bright construction-orange, #ff6b35 (rgb(255, 107, 53)), sits at hue 16° with full saturation and 60% lightness: hsl(16, 100%, 60%). Full saturation is why the color reads as vivid rather than muted.
A mid-tone grey, rgb(128, 128, 128), converts to hsl(0, 0%, 50%). Hue is reported as 0° only because saturation is 0% - with no color intensity in any channel, there is no dominant hue to measure.
FAQ
Why would I use HSL instead of just RGB?
HSL isolates lightness as its own number, so "make this 10% darker" is a single subtraction on the L value instead of recalculating three RGB channels together. It is the format most CSS preprocessors and design tokens use for generating consistent hover, active, and disabled states from one base color.
Does a 3-digit HEX code like #f00 lose precision compared to #ff0000?
No - #f00 is shorthand where each digit is doubled, so #f00 and #ff0000 are the identical color (rgb(255, 0, 0)). The shorthand only works when both digits of each channel match; #ff6b35 has no 3-digit equivalent because its green channel is 6b (6 ≠ b) and its blue channel is 35 (3 ≠ 5), even though the red channel ff would qualify.
What happens if I type something the tool can't parse?
The HEX, RGB, HSL, and swatch fields simply stay blank - there is no error banner. This covers typos, incomplete values, and out-of-range numbers like rgb(300, 0, 0), where a channel exceeds 255.
Why doesn't it accept named colors like "tomato" or "steelblue"?
CSS defines 148 named colors, and supporting them accurately means shipping and maintaining that whole lookup table for a feature most workflows don't need - HEX, RGB, and HSL cover the values you actually copy out of design tools and DevTools. If you have a named color, browser DevTools will show you its HEX equivalent, which you can paste in here.
Can I convert colors with transparency (RGBA or an 8-digit HEX)?
Not currently - this tool works on fully opaque colors only. Alpha channels are a separate axis from hue/saturation/lightness and would need their own input and swatch rendering to show correctly against a background.