On the web, every color is written as a code. The same color can be expressed three common ways — hex, RGB and HSL. They all describe the same thing; they just make different jobs easier.

Hex codes (#RRGGBB)

A hex code like #FF5733 is the most common format in web design. It's three pairs of hexadecimal digits for red, green and blue, each from 00 (none) to FF (255, maximum). So #FF5733 is a lot of red, some green, a little blue — a warm orange-red. Short hex like #F53 is just shorthand for #FF5533.

RGB (red, green, blue)

RGB writes the same three channels as numbers from 0 to 255: rgb(255, 87, 51). It maps directly to how screens create color by mixing red, green and blue light. RGBA adds a fourth value for opacity (alpha).

HSL (hue, saturation, lightness)

HSL describes color the way people think about it:

  • Hue — the color, as an angle from 0–360° on the color wheel.
  • Saturation — how vivid, from 0% (grey) to 100%.
  • Lightness — how light, from 0% (black) to 100% (white).

For example hsl(9, 100%, 60%). HSL is brilliant for making variations: to get a darker shade, just lower the lightness; to mute a color, lower the saturation. That's why it's the natural model for building color schemes.

Which should you use?

  • Hex — the default for handing colors to designers and writing CSS.
  • RGB / RGBA — when you need transparency.
  • HSL — when you're adjusting or generating related colors by hand.

You don't have to convert them yourself. Every color in the generator and the color reference shows its hex, RGB and HSL, and you can export straight to CSS variables or Tailwind config.