Hex vs RGB vs HSL: what is the difference?

Hex, RGB, and HSL are three different ways to describe the same thing: a color. They are common in CSS, design tools, screenshots, brand guidelines, and developer handoffs.

The confusing part is that they look very different:

color: #0fa76e;
color: rgb(15 167 110);
color: hsl(157 84% 36%);

Those three values can represent the same green. They are just different coordinate systems for color.

What is a hex color?

A hex color is a compact code that usually looks like this:

#0fa76e

The six characters after the # are hexadecimal pairs:

• 0f controls red;
• a7 controls green;
• 6e controls blue.

Each pair ranges from 00 to ff, which corresponds to 0–255 in decimal. So #0fa76e becomes:

rgb(15 167 110)

Hex is popular because it is short, copyable, and supported almost everywhere. Designers often share brand colors as hex codes, and many CSS examples use hex by default.

What is RGB?

RGB stands for red, green, and blue. In CSS, a modern RGB value can be written as:

rgb(15 167 110)

Older examples often use commas:

rgb(15, 167, 110)

Both are widely understood. The numbers usually range from 0 to 255:

• red: 0–255;
• green: 0–255;
• blue: 0–255.

RGB is useful when you want to understand or manipulate a color channel directly. For example, increasing the red value makes the color warmer; reducing all three values usually makes it darker.

RGB also pairs naturally with opacity:

background: rgb(15 167 110 / 0.12);

That means the same green at 12% opacity.

What is HSL?

HSL stands for hue, saturation, and lightness:

hsl(157 84% 36%)

It describes color in a way many humans find easier to reason about:

• Hue is the base color on the color wheel, measured in degrees.
• Saturation is how intense or muted the color is.
• Lightness is how dark or bright the color is.

HSL is especially useful when designing color systems. If you want a lighter version of a brand color, you can adjust lightness. If you want a softer version, reduce saturation.

For example:

--green-strong: hsl(157 84% 36%);
--green-soft: hsl(157 45% 92%);
--green-muted: hsl(157 25% 55%);

The hue stays related, while saturation and lightness change.

When should you use hex?

Use hex when:

• you are copying colors from a design tool;
• you need compact static values;
• the color is part of a brand palette;
• you do not need to manipulate opacity or channels often.

Hex is practical for tokens such as:

--brand: #0fa76e;
--text: #161616;
--border: #e7e5df;

It is also easy to paste into most online tools and documentation.

When should you use RGB?

Use RGB when:

• you need red/green/blue channel values;
• you are working with APIs or canvas data;
• a tool asks specifically for RGB;
• you want CSS opacity using the slash syntax.

For example:

.card {
  border-color: rgb(15 167 110 / 0.25);
}

If you only have a hex value, use a CSS color converter to convert it into RGB before pasting it into code.

When should you use HSL?

Use HSL when:

• you are creating variants of one color;
• you want a logical palette;
• you are adjusting lightness or saturation by hand;
• you are building themes or design tokens.

HSL is often easier than RGB for design decisions. rgb(15 167 110) tells you exact channel values, but hsl(157 84% 36%) tells you that the color is a saturated green with medium-low lightness.

Are hex, RGB, and HSL equally valid in CSS?

Yes. CSS supports many color formats. MDN’s <color> documentation and the W3C CSS Color Module describe the broader color syntax used by modern CSS.

In daily work, the “best” format is the one that fits the task:

• hex for compact palette values;
• RGB for channels and opacity;
• HSL for human-friendly adjustments.

Quick conversion example

Hex:

#2563eb

RGB:

rgb(37 99 235)

HSL, approximately:

hsl(224 76% 53%)

The exact HSL result may vary slightly depending on rounding, but it should represent the same visual color.

Bottom line

Hex, RGB, and HSL are not competing systems so much as different views of the same color. Use hex when you want a short code, RGB when you need numeric channels or opacity, and HSL when you want to reason about hue, saturation, and lightness.