Understanding Color Formats: HEX, RGB, and HSL Explained

Why Are There Multiple Color Formats?

Every color on a screen is produced by mixing red, green, and blue light at different intensities. The underlying data is always the same three numbers — but the way those numbers are written varies depending on the context, the tool, and what you are trying to accomplish.

HEX is compact and widely used in CSS and design tools. RGB maps directly to how displays work. HSL is far more intuitive for humans when adjusting brightness or saturation. Understanding all three makes you faster whether you are writing CSS, working in Figma, or debugging a color mismatch between design and code.

HEX Colors

HEX (hexadecimal) represents each of the three color channels — red, green, blue — as a two-digit number in base 16:

#FF5733
  ││ ││ ││
  ││ ││ └┘ Blue:  33 hex = 51 decimal
  ││ └┘    Green: 57 hex = 87 decimal
  └┘        Red:   FF hex = 255 decimal

Each channel ranges from 00 (0, off) to FF (255, full intensity). The # prefix is required in CSS.

Common HEX Examples

Shorthand HEX

When both digits of each channel are identical, you can abbreviate:

#FF5533  →  #F53
#AABBCC  →  #ABC
#FFFFFF  →  #FFF

The browser expands each digit by doubling it: #F53 becomes #FF5533.

HEX with Alpha (Transparency)

CSS supports an 8-digit HEX for colors with transparency:

#FF573380   /* 50% transparent orange */

The last two digits are the alpha channel: 00 = fully transparent, FF = fully opaque.

RGB Colors

RGB spells out the three channels as decimal integers from 0 to 255:

rgb(255, 87, 51)       /* orange */
rgb(0, 0, 0)           /* black */
rgb(255, 255, 255)     /* white */

RGBA — RGB with Alpha

rgba(255, 87, 51, 0.5)   /* 50% transparent orange */
rgba(0, 0, 0, 0.8)       /* 80% opaque black overlay */

The alpha value in RGBA is a decimal between 0 (invisible) and 1 (fully opaque), not a percentage.

In modern CSS, rgb() now accepts a fourth parameter directly without needing rgba():

rgb(255 87 51 / 50%)   /* space-separated, with / for alpha */

Converting HEX to RGB

Convert each two-digit HEX pair to decimal:

#FF5733
FF → 255 (red)
57 → 87  (green)
33 → 51  (blue)

Result: rgb(255, 87, 51)

To convert manually: for FF, compute (16 × 15) + 15 = 255. For 57, compute (16 × 5) + 7 = 87.

Converting RGB to HEX

Reverse the process — convert each decimal to two-digit hex:

255 → FF
87  → 57
51  → 33

Result: #FF5733

Or use the Color Converter to do it in one click.

HSL Colors

HSL stands for Hue, Saturation, Lightness. Unlike HEX and RGB, which describe color in terms of hardware (light channels), HSL describes color in terms of human perception.

hsl(14, 100%, 60%)   /* orange */
hsl(0, 100%, 50%)    /* pure red */
hsl(240, 100%, 50%)  /* pure blue */
hsl(0, 0%, 50%)      /* mid-gray */

The Three Components

Hue (0–360) is an angle on the color wheel:

• 0° / 360° = Red
• 60° = Yellow
• 120° = Green
• 180° = Cyan
• 240° = Blue
• 300° = Magenta

Saturation (0%–100%) controls color intensity:

• 0% = completely gray (no color)
• 100% = fully vivid color

Lightness (0%–100%) controls brightness:

• 0% = black
• 50% = the "true" color
• 100% = white

HSLA — HSL with Alpha

hsla(14, 100%, 60%, 0.5)   /* 50% transparent orange */

Modern CSS also accepts:

hsl(14 100% 60% / 50%)

Why HSL Is More Useful for Design

HSL lets you create color variations programmatically. Want a lighter version of your brand color? Just increase the lightness:

/* Brand blue */
hsl(220, 80%, 50%)

/* Lighter tint */
hsl(220, 80%, 70%)

/* Even lighter */
hsl(220, 80%, 85%)

/* Darker shade */
hsl(220, 80%, 30%)

All four share the same hue and saturation — only lightness changes. In CSS custom properties, this technique creates entire palettes from a single hue value:

:root {
  --brand-hue: 220;
  --brand-color: hsl(var(--brand-hue), 80%, 50%);
  --brand-light: hsl(var(--brand-hue), 80%, 85%);
  --brand-dark:  hsl(var(--brand-hue), 80%, 30%);
}

Converting Between Formats

RGB to HSL (the math)

Given rgb(255, 87, 51):

1. Normalize: R = 255/255 = 1.0, G = 87/255 ≈ 0.341, B = 51/255 = 0.2
2. Max = 1.0 (R), Min = 0.2 (B), Delta = 0.8
3. Lightness = (Max + Min) / 2 = (1.0 + 0.2) / 2 = 0.6 → 60%
4. Saturation = Delta / (1 - |2L - 1|) = 0.8 / (1 - |1.2 - 1|) = 0.8 / 0.8 = 1.0 → 100%
5. Hue = 60 × ((G - B) / Delta) = 60 × ((0.341 - 0.2) / 0.8) = 60 × 0.176 ≈ 10.6° → rounded to 14°

Result: hsl(14, 100%, 60%)

You do not need to do this by hand — use the Color Converter.

Quick Reference

Which Format Should You Use?

Use HEX when:

• Copy-pasting from design tools (Figma, Sketch, Adobe XD output HEX by default).
• Writing static CSS where you do not need to manipulate the color.
• Communicating a specific color value to a client or colleague.

Use RGB / RGBA when:

• Working with canvas, WebGL, or image processing code that needs decimal channel values.
• You need alpha transparency and prefer the explicit decimal syntax.
• Passing color values to JavaScript for arithmetic.

Use HSL / HSLA when:

• Building a design system or theme with multiple shades of the same color.
• Programmatically lightening, darkening, or desaturating colors.
• Writing readable CSS where the intent of a color adjustment should be obvious.
• Implementing dark mode variants — flip the lightness, keep the hue.

New CSS Color Formats (2024+)

Modern CSS introduces wider-gamut formats for displays that can show more colors than sRGB:

• oklch() — A perceptually uniform version of HSL (same Hue concept, better human-perception alignment). Increasingly recommended over HSL for design systems.
• display-p3 — Targets the wider P3 color gamut used by Apple displays and modern phones.
• color-mix() — Mixes two colors without JavaScript: color-mix(in hsl, red 40%, blue).

Browser support for these is solid in 2025+. For most web projects today, HEX, RGB, and HSL remain the practical defaults.

Frequently Asked Questions

Why does my HEX color look different in CSS vs. Figma? Both should render the same color in sRGB. Differences usually come from the monitor's color profile or display color space settings. Some Figma files use P3 colors that cannot be exactly represented in sRGB.

What is the difference between rgba(0,0,0,0.5) and rgb(0 0 0 / 50%)? They produce identical results. The newer space-separated syntax with / for alpha is the modern CSS standard and works in all current browsers.

Can I use HSL in older browsers? HSL has been supported since IE 9 (2011). HSLA since IE 9 as well. The space-separated slash syntax requires a modern browser (Chrome 91+, Firefox 89+, Safari 15+).

Is there a lossless round-trip between HEX and HSL? Not exactly. HEX and RGB store values in 8-bit integer space (0–255 per channel). HSL involves floating-point math, so converting HEX → HSL → HEX may introduce tiny rounding errors in the LSB. In practice this is visually imperceptible.

Convert any color between HEX, RGB, and HSL instantly using the Color Converter — paste in any format and get all three outputs at once.