HEX vs RGB vs HSL: Color Format Guide

Colors are fundamental to web design, yet many developers treat them as magic numbers to be copied from design tools without understanding the formats underneath. Whether you are styling a button, defining a palette in CSS, or reading a designer’s color spec, you need to understand HEX, RGB, HSL, and how they relate. This guide covers everything you need to know.

How Computers Represent Color

Before diving into specific formats, understand the underlying principle: computers represent color using three channels — red, green, and blue (RGB). Every pixel on your screen is made of tiny red, green, and blue light emitters. By varying the intensity of each channel from 0 (off) to 255 (full brightness), your monitor can display 16.7 million distinct colors (256 × 256 × 256).

All color formats in web development — HEX, RGB, HSL, named colors — ultimately describe the same RGB values in different notations. Converting between them is simply a matter of translating one representation to another.

HEX Colors

HEX (hexadecimal) is the most compact color notation in CSS. A HEX color is a 3-digit or 6-digit base-16 number prefixed with #.

6-Digit HEX (Most Common)

The standard format uses 6 hexadecimal digits: #RRGGBB, where each pair represents the intensity of red, green, and blue respectively.

/* Pure red */
color: #FF0000;

/* Pure green */
color: #00FF00;

/* Pure blue */
color: #0000FF;

/* White */
color: #FFFFFF;

/* Black */
color: #000000;

/* A teal color */
color: #008080;

Each digit is a hex value from 0–F (0–15 in decimal). So:

00 (hex) = 0 (decimal) = no intensity
FF (hex) = 255 (decimal) = full intensity
80 (hex) = 128 (decimal) = half intensity

For example, #FF6B35 breaks down as:

FF → Red intensity 255
6B → Green intensity 107
35 → Blue intensity 53

3-Digit HEX (Shorthand)

When each channel uses the same digit twice (e.g., #FF, #00, #99), you can abbreviate to 3 digits. Each digit doubles automatically:

/* #RGB expands to #RRGGBB */
#F00  → #FF0000 (red)
#0F0  → #00FF00 (green)
#00F  → #0000FF (blue)
#ABC  → #AABBCC (light gray)

Use the 3-digit form only when applicable; it is not shorter in all cases.

8-Digit HEX (With Alpha/Transparency)

Modern CSS supports 8-digit HEX with an alpha channel: #RRGGBBAA, where the last two digits control opacity (transparency).

/* Fully opaque red */
color: #FF0000FF;

/* 50% transparent red */
color: #FF000080;

/* Fully transparent */
color: #FF000000;

/* Shorthand with alpha: #RGBA */
#F00F  → #FF0000FF (opaque red)
#F008  → #FF000088 (50% transparent red)

The alpha channel ranges from 00 (completely transparent) to FF (fully opaque).

RGB and RGBA Colors

RGB notation expresses color as three separate decimal values (0–255) for red, green, and blue. This format is often more readable than HEX when working with code.

Modern RGB Syntax (Preferred)

The current CSS standard allows the simplified rgb(r g b) syntax (note the space, not comma):

/* Pure colors */
color: rgb(255 0 0);    /* Red */
color: rgb(0 255 0);    /* Green */
color: rgb(0 0 255);    /* Blue */

/* Mixed colors */
color: rgb(255 107 53);  /* Orange */
color: rgb(70 130 180);  /* Steel blue */

/* Percentages are also valid */
color: rgb(100% 50% 0%);  /* Orange */
color: rgb(50% 50% 50%);  /* Gray */

/* Mixed units (decimals allowed) */
color: rgb(255 107.5 53.2);

Legacy RGB Syntax

Older CSS uses comma-separated values. This still works but is less common in new code:

color: rgb(255, 0, 0);   /* Red */
color: rgb(255, 107, 53); /* Orange */

RGBA (With Alpha)

To add transparency, use the rgba() function. The fourth parameter is alpha as a decimal from 0 to 1, or a percentage:

/* 100% opaque red */
color: rgba(255 0 0 / 1);

/* 50% transparent red */
color: rgba(255 0 0 / 0.5);

/* 25% opaque red (75% transparent) */
color: rgba(255 0 0 / 0.25);

/* Percentage alpha */
color: rgba(255 0 0 / 50%);

/* Legacy comma syntax */
color: rgba(255, 0, 0, 0.5);

HSL Colors

HSL (Hue, Saturation, Lightness) represents color using three perceptual dimensions rather than the raw RGB values. For designers and developers working with color schemes, HSL is often more intuitive than RGB.

Understanding HSL Components

Hue (0–360°): The position on the color wheel. 0° is red, 120° is green, 240° is blue. Values wrap around (360° = 0°).
Saturation (0–100%): Color intensity. 0% is grayscale (no color), 100% is full saturation.
Lightness (0–100%): Brightness. 0% is black, 50% is the color at full saturation, 100% is white.

HSL Syntax

/* Pure red (0° hue, full saturation, 50% lightness) */
color: hsl(0 100% 50%);

/* Pure green */
color: hsl(120 100% 50%);

/* Pure blue */
color: hsl(240 100% 50%);

/* Light red (less saturation, higher lightness) */
color: hsl(0 100% 75%);

/* Dark red (lower lightness) */
color: hsl(0 100% 25%);

/* Gray (0% saturation makes it grayscale) */
color: hsl(0 0% 50%);

/* Legacy comma syntax */
color: hsl(0, 100%, 50%);

HSLA (With Alpha)

HSL also supports transparency via the alpha channel:

/* 50% transparent red */
color: hsl(0 100% 50% / 0.5);

/* 75% opaque blue */
color: hsl(240 100% 50% / 0.75);

/* Legacy syntax */
color: hsla(0, 100%, 50%, 0.5);

Why Designers Prefer HSL

HSL maps directly to how humans perceive color. Want a darker version of your brand red? Lower the lightness. Want it more muted? Lower saturation. This makes building color schemes, hover states, and disabled states far easier:

:root {
  --brand-red: hsl(0 100% 50%);
}

.button {
  background-color: var(--brand-red);
}

.button:hover {
  /* Darker on hover */
  background-color: hsl(0 100% 40%);
}

.button:disabled {
  /* Muted and grayed out */
  background-color: hsl(0 30% 60%);
}

CSS Named Colors

CSS defines 147 named colors (formally: X11 color keywords). Common ones include:

color: red;
color: blue;
color: green;
color: orange;
color: purple;
color: cyan;
color: magenta;
color: gray;
color: darkblue;
color: lightcoral;
color: mediumseagreen;
color: rebeccapurple;

Named colors are readable in code but inflexible — you cannot easily create variations or adjust opacity. They also lack standardization: gray and grey are valid, but only one shade of gray is available (you cannot darken or lighten it).

For production code, prefer HEX, RGB, or HSL so you have full control over the color space. Use named colors only for quick prototypes or when the exact shade does not matter.

Comparing HEX, RGB, and HSL

Aspect	HEX	RGB	HSL
Format	`#RRGGBB` or `#RRGGBBAA`	`rgb(r g b)` or `rgba(r g b / a)`	`hsl(h s% l%)` or `hsla(h s% l% / a)`
Readability	Compact, good for sharing	Moderate; three separate values	Excellent for designers; intuitive
Opacity	8-digit variant only	RGBA function	HSLA function
Precision	24-bit (16.7M colors)	Same as HEX	Same as HEX
Use Case	General styling, quick specs	Programmatic color math	Color scheme design, variations
Browser Support	All browsers	All browsers	All browsers

When to Use Each Format

Use HEX when:

Collaborating with designers who share color specifications
You need a compact format for shorthand notation
Working in legacy CSS that predates modern syntax
You are building a design system and want visual clarity

Use RGB when:

Computing colors programmatically (easier to manipulate individual channels)
Working with grayscale or near-gray colors (e.g., rgb(128 128 128))
You need readability of numeric values in code

Use HSL when:

Building color schemes that require lightness and saturation variations
Creating hover, active, and disabled states from a base color
You are a designer thinking about color perceptually
You need to generate complementary or analogous colors

CSS Color Functions

Modern CSS provides powerful color manipulation functions beyond simple notation.

rgb() and hsl() with Fallbacks

The color-mix() function (CSS Color Module Level 4) blends two colors in a specified color space:

/* Mix 50% red and 50% blue in RGB space = magenta */
color: color-mix(in rgb, red, blue);

/* 30% white, 70% blue = light blue */
color: color-mix(in rgb, white 30%, blue);

/* Mix in HSL space for different results */
color: color-mix(in hsl, red, blue);

Note: color-mix() is well-supported in modern browsers but has limited support in older ones. Check caniuse.com for current support.

Transparency and the Alpha Channel

All modern color formats support an alpha channel (opacity) parameter:

/* HEX with alpha (8 digits) */
background-color: #FF000080;  /* 50% transparent red */

/* RGB with alpha */
background-color: rgb(255 0 0 / 0.5);

/* HSL with alpha */
background-color: hsl(0 100% 50% / 0.5);

/* Named color with alpha (using rgb) */
background-color: rgb(red / 0.5);

Alpha is especially useful for:

Overlays and glass-morphism effects
Hover states that fade
Gradients with color stops
Watermarks and disabled states

.overlay {
  background-color: rgba(0 0 0 / 0.7);  /* 70% black overlay */
}

.fade-in {
  color: hsl(240 100% 50% / 0);          /* Fully transparent */
  transition: color 0.3s;
}

.fade-in:hover {
  color: hsl(240 100% 50% / 1);          /* Fully opaque */
}

Color Accessibility

Choosing colors is not just aesthetic — it is an accessibility responsibility.

Contrast Ratios

The WCAG (Web Content Accessibility Guidelines) define minimum contrast ratios between foreground and background colors:

4.5:1 for normal text (AA standard)
7:1 for enhanced contrast (AAA standard)
3:1 for large text (18pt+ or 14pt+ bold)

Example: Black text (#000000) on white (#FFFFFF) has a contrast ratio of 21:1 — excellent. Light gray text (#CCCCCC) on white has a ratio of 1.4:1 — fails WCAG AA.

Use tools to check contrast: WebAIM’s Contrast Checker and the Chrome DevTools accessibility inspector both measure contrast ratios.

Don’t Rely on Color Alone

Never convey critical information using color only. People with red–green color blindness cannot distinguish certain color combinations. Always pair color with text, icons, or patterns:

/* Bad: color only */
.error { color: red; }

/* Good: color + icon/text */
.error::before {
  content: "⚠ ";
  color: red;
}

Testing for Color Blindness

Simulate color blindness using Chrome DevTools:

Open DevTools (F12)
Press Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows)
Type “emulate”
Select “Emulate vision deficiencies”
Choose Protanopia, Deuteranopia, or Tritanopia

Converting Between Formats

All color formats represent the same RGB values — conversion is straightforward.

HEX to RGB: Convert each pair of hex digits to decimal.

#FF6B35 → rgb(255 107 53)

RGB to HEX: Convert each decimal value to hex.

rgb(255 107 53) → #FF6B35

HSL to RGB: More complex; use a tool or the mathematical formula. Fortunately, browsers handle this automatically.

hsl(0 100% 50%) = rgb(255 0 0)

RGB to HSL: Also complex, but browsers handle it. Use a tool for manual conversion.

rgb(255 0 0) = hsl(0 100% 50%)

Convert between any color format instantly with our Color Converter.

Best Practices

Use CSS custom properties (variables) for color schemes. Define your palette once and reuse it:

:root {
  --primary: hsl(240 100% 50%);
  --primary-light: hsl(240 100% 70%);
  --primary-dark: hsl(240 100% 30%);
  --secondary: hsl(30 100% 50%);
  --neutral-gray: hsl(0 0% 50%);
  --text-color: hsl(0 0% 10%);
  --bg-color: hsl(0 0% 98%);
}

body {
  color: var(--text-color);
  background-color: var(--bg-color);
}

button {
  background-color: var(--primary);
}

button:hover {
  background-color: var(--primary-dark);
}

Prefer HSL for dynamic color generation. When you need variations of a color (hover, disabled, inverted), HSL makes the math intuitive.

Document your color choices. In design systems, include both the hex and HSL values alongside the use case.

Test color contrast early. Do not wait for the final design review to discover a text color fails accessibility standards.

Avoid pure black and pure white in UI. #000000 and #FFFFFF are harsh on the eyes. Use near-black (#1a1a1a) and near-white (#fafafa) instead for softer, more readable interfaces.

FAQ

What is the difference between transparent and opacity?

Transparency (the alpha channel) applies only to that element. Opacity (the opacity CSS property) applies to the element and all its children. Use alpha for isolated transparency; use opacity when you want to fade out an entire component.

/* Only the background fades */
background-color: rgba(255 0 0 / 0.5);

/* The element and all children fade */
opacity: 0.5;

Can I use HSL in a design tool like Figma?

Yes. Most design tools (Figma, Adobe XD, Sketch) support HSL input. You can copy HSL values directly into CSS.

Why does my HEX color look different in the browser?

Color spaces, monitor calibration, and browser rendering can cause slight differences. Also, some browsers may apply color management. If precision matters, verify colors against the actual device or use a hardware color checker.

Is there a performance difference between color formats?

No. Browsers parse all formats identically before rendering. HEX, RGB, and HSL have the same performance characteristics.

How do I pick colors for my brand?

Start with a base hue (e.g., 240° for blue), then define light, medium, and dark variants by adjusting saturation and lightness. Tools like Coolors.co and Color Hunt provide inspiration and palette generators.