HEX, RGB, HSL, HSV: How to Convert Colors and When to Use Each

Why one color needs four notations

A designer hands you #3498db. Then you need a semi-transparent version, so you want rgba(). Then you want a hover state that is ten percent darker, which is far easier in HSL. Then a color picker in your tooling reports HSV. It is one color, but four different notations, and doing the math in your head is a recipe for a slightly-off shade nobody can quite explain.

Each model exists because it answers a different question. Understanding what each is good at makes converting between them feel purposeful rather than mechanical.

What each model represents

• HEX is just RGB written in hexadecimal. #RRGGBB packs three 0-255 channels into six hex digits. It is compact and the default in CSS and design tools.
• RGB describes color as red, green, and blue light from 0 to 255. It maps directly to how screens emit light, and rgba() adds an alpha channel for transparency.
• HSL (hue, saturation, lightness) separates the which color (hue, 0-360 degrees) from how vivid and how bright. Want a lighter tint? Raise the lightness and leave hue alone.
• HSV/HSB (hue, saturation, value) is similar but models brightness differently, which is why the same color often shows different S and V numbers than its HSL equivalent. Many native color pickers use it.

How the conversion works

HEX to RGB is pure digit-splitting: each pair of hex characters is one channel. Here it is in JavaScript, including support for the three-digit shorthand:

function hexToRgb(hex) {
  let h = hex.replace('#', '');
  if (h.length === 3) h = h.split('').map(c => c + c).join('');
  const n = parseInt(h, 16);
  return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
}

hexToRgb('#3498db'); // { r: 52, g: 152, b: 219 }
hexToRgb('#fff');    // { r: 255, g: 255, b: 255 }

RGB to HSL is more involved: you normalize the channels to 0-1, find the max and min, derive lightness from their average, saturation from their spread, and hue from which channel is dominant. For #3498db the result is roughly hsl(204, 70%, 53%).

A practical walkthrough

Say you want a darker hover color for a #3498db button. Convert once and the choice becomes obvious:

#3498db  ->  rgb(52, 152, 219)  ->  hsl(204, 70%, 53%)

/* darken for :hover by lowering lightness */
.button        { background: hsl(204, 70%, 53%); }
.button:hover  { background: hsl(204, 70%, 43%); }

Because you only dropped the lightness, the hue and saturation stay identical, so the hover state reads as the same color, just darker. Paste your color into the Color Converter to get all four notations with a live preview, entirely in the browser.

Common pitfalls

• HSL and HSV are not interchangeable. A color that is hsl(204, 70%, 53%) is not hsv(204, 70%, 53%). Copying the numbers between the two models gives you the wrong color.
• Rounding drift. Converting HEX to HSL and back can shift a channel by one because of rounding at each step. Treat HEX or RGB as your source of truth and derive the others.
• Alpha lives outside the core model. HEX can carry alpha as #RRGGBBAA, but plenty of tools ignore the last pair. When transparency matters, prefer explicit rgba() or hsla().
• Shorthand expansion. #abc means #aabbcc, not #0abc. Expand it before parsing.

Related color tools

If you are still choosing colors, the Color Picker & Palette helps you build a set, and before you ship text on a colored background, run it through the Color Contrast Checker to confirm it meets accessibility guidelines.

Conclusion

HEX and RGB tell the screen what to emit; HSL and HSV let humans reason about lightness and vividness. Convert once, keep HEX or RGB as your canonical value, and reach for HSL when you need to tint, shade, or build a consistent palette.