Hex, RGB, and HSL: The Difference Between Color Formats

There are several ways to write a color in CSS — hex, rgb, hsl — and every designer or codebase has a favorite. Here's what each one actually represents, and when you'll need to convert between them.

Hex — the most common format

#3B82F6

A hex color stores the Red, Green, and Blue values (0-255) as two hex characters each, in six characters total. It's compact and the most common format in design tools like Figma and Photoshop.

RGB — Red, Green, Blue as numbers

rgb(59, 130, 246)

The same color, but written as decimal numbers (0-255) — easier to generate or manipulate in code, since you can do math directly with the numbers (like adding rgba() for opacity).

HSL — the way humans think about color

hsl(217, 91%, 60%)

Hue (position on the color wheel, 0-360), Saturation (how vibrant, 0-100%), and Lightness (how light or dark, 0-100%). This format is easiest to use when you want different shades of the same color — just change the lightness value.

Whether you got a hex code from a design file and need rgba() in code, or need a lighter/darker shade of a color — our Color Converter shows hex, rgb, and hsl all at once, with a live preview.