About HEX, RGB, and HSL colors
The same color can be written three common ways on the web, and this tool converts between all of them live, with a preview. Pick a color or type any of the formats, and the other two update instantly, in your browser.
The three formats
- HEX is the six-digit code like
#5fa88cyou see everywhere in CSS and design tools. It is really just RGB written in hexadecimal: two digits each for red, green, and blue. - RGB spells the same thing out as three numbers from 0 to 255, one per channel. It maps directly onto how screens make color by mixing red, green, and blue light.
- HSL describes a color the way people think about it: hue (which color, 0 to 360 degrees around the wheel), saturation (how vivid), and lightness (how bright). It is the friendly one for tweaking.
Why HSL is worth knowing
HEX and RGB are precise but not intuitive. If you have #5fa88c and want it a little darker, it is not obvious which digits to change. In HSL you just lower the lightness and leave hue and saturation alone. That makes HSL the natural choice for building color variations: take one hue and step the lightness to get a whole scale, or nudge the hue slightly for a related accent.
A note on rounding
Converting RGB to HSL and back can shift a channel by one, because HSL stores hue, saturation, and lightness as whole numbers and a little precision is lost in the rounding. It is invisible to the eye. When you need an exact value, keep the HEX or RGB form as your source of truth and treat HSL as the dial you turn to explore.