CSS Color Formats: HEX, RGB, HSL and When to Use Each

Color in CSS can be expressed in multiple formats, and the choice between them affects not just how you write code, but how easy that code is to maintain, how clearly it communicates your intent to other developers, and how smoothly your animations and transitions work.

Most developers learn HEX codes first and stick with them forever. But understanding RGB and HSL opens up new possibilities — especially when you need to dynamically adjust colors in JavaScript, create consistent color themes, or explain a color choice to a designer. This guide explains each format, how to convert between them, and the specific scenarios where each shines.

HEX Color Codes

Hexadecimal (HEX) color codes are the format you see most often in CSS. They represent a color as three pairs of hexadecimal digits — one pair each for red, green, and blue:

color: #FF6B6B;

Breaking this down:

• FF = Red channel (255 in decimal — maximum red)
• 6B = Green channel (107 in decimal)
• 6B = Blue channel (107 in decimal)

Each pair ranges from 00 (0, no contribution) to FF (255, full contribution).

Shorthand HEX

When both digits of each pair are identical, you can use a 3-digit shorthand:

#FF6600 → #F60
#AABBCC → #ABC
#FFFFFF → #FFF (white)
#000000 → #000 (black)

HEX with Alpha (Opacity)

Modern CSS supports an 8-digit HEX format including an alpha (opacity) channel:

color: #FF6B6B80; /* 50% opacity red-ish */

The last two digits (80 = 128 in decimal) represent the opacity from 00 (fully transparent) to FF (fully opaque).

When to Use HEX

• Design system values and brand colors — HEX codes are what designers export from Figma, Sketch, and Adobe XD, making them the natural format for hardcoded brand palette values
• CSS custom properties (variables) for static theme colors
• Anywhere you're copying a specific color from a design spec

HEX weakness: Hard to manipulate programmatically. If you want a color that is 20% lighter, you cannot calculate that with arithmetic on HEX values alone.

RGB — Red, Green, Blue

RGB expresses a color as three decimal values, each from 0 to 255 (or 0% to 100%):

color: rgb(255, 107, 107);
color: rgb(100%, 42%, 42%);

RGBA — RGB with Alpha

color: rgba(255, 107, 107, 0.5);  /* 50% transparent */
color: rgba(255, 107, 107, 1);    /* fully opaque */

The alpha value in rgba is a decimal from 0 (fully transparent) to 1 (fully opaque).

In modern CSS (CSS Color Level 4), you can use rgb() with a slash for the alpha:

color: rgb(255 107 107 / 50%);
color: rgb(255 107 107 / 0.5);

When to Use RGB

• JavaScript color manipulation — RGB values are straightforward to work with mathematically
• Canvas API — ctx.fillStyle = 'rgb(255, 107, 107)'
• CSS transitions on color — though hsl() is often better for this
• When you need opacity and prefer the rgba syntax over HEX with alpha

RGB weakness: Not intuitive for humans. Looking at rgb(47, 134, 201) tells you very little about the actual color without running it through a visual tool.

HSL — Hue, Saturation, Lightness

HSL is the most human-readable color format, designed to align with how humans actually think about color:

color: hsl(0, 100%, 67%);

• Hue (0–360): The position on the color wheel. 0° = red, 60° = yellow, 120° = green, 180° = cyan, 240° = blue, 300° = magenta, 360° = red again.
• Saturation (0%–100%): How vivid the color is. 0% is grey; 100% is the most vivid version of that hue.
• Lightness (0%–100%): How light or dark. 0% is black; 100% is white; 50% is the pure color.

HSLA — HSL with Alpha

color: hsla(0, 100%, 67%, 0.5); /* 50% transparent coral */

The Power of HSL: Programmatic Color Relationships

HSL's great advantage is that it makes color relationships explicit and easy to manipulate.

Creating lighter and darker shades:

:root {
  --brand-hue: 210;
  --brand-color: hsl(var(--brand-hue), 75%, 50%);
  --brand-light: hsl(var(--brand-hue), 75%, 70%);  /* just change lightness */
  --brand-dark: hsl(var(--brand-hue), 75%, 30%);
  --brand-muted: hsl(var(--brand-hue), 30%, 50%);  /* just change saturation */
}

This makes it trivially easy to create consistent tonal scales. Design systems like Tailwind CSS use systematic lightness scales (50, 100, 200, ... 900) that are natural to express in HSL.

Complementary colors: The complement of any hue is at hue + 180:

.primary { color: hsl(210, 75%, 50%); }   /* Blue */
.accent { color: hsl(30, 75%, 50%); }     /* Orange — 210 + 180 mod 360 = 30 */

Hover effects without JavaScript:

.button {
  background: hsl(210, 75%, 50%);
}
.button:hover {
  background: hsl(210, 75%, 40%); /* just darken by 10% */
}

When to Use HSL

• CSS custom property color systems — expressing an entire palette with related hues, saturations, and lightnesses
• Hover states, focus states, and active states — easy to slightly adjust lightness
• Generating color palettes programmatically — adjusting hue, saturation, lightness in steps
• Animation and transitions — smoothly transitioning between related colors
• Dark mode — often just requires flipping lightness values

Converting Between Formats

Our Color Converter tool converts between HEX, RGB, HSL, HSV, CMYK, and named colors instantly in your browser.

For developers, here is the core conversion:

HEX to RGB:

function hexToRgb(hex) {
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);
  return { r, g, b };
}

RGB to HSL involves a more complex formula (available in full in most utility libraries like chroma.js or tinycolor2).

Named Colors and Other Formats

CSS also supports 140+ named colors (red, coral, dodgerblue, mediumseagreen), the oklch() and oklab() functions for perceptually uniform color spaces, and color(display-p3 ...) for wide-gamut displays.

For everyday web development, HEX, RGB, and HSL cover the vast majority of needs. The newer formats (oklch, display-p3) are worth learning for high-fidelity design systems targeting wide-gamut screens.

Quick Reference

Format	Example	Best For
HEX	#FF6B6B	Brand colors, design specs
RGB	rgb(255, 107, 107)	JavaScript, canvas
RGBA	rgba(255, 107, 107, 0.5)	Transparency
HSL	hsl(0, 100%, 67%)	Color systems, theme variables
HSLA	hsla(0, 100%, 67%, 0.5)	Transparent theme colors

Summary

All three main CSS color formats — HEX, RGB, and HSL — represent exactly the same colors. The choice between them is about readability, maintainability, and how you need to work with the values.

Key takeaways:

• HEX for static brand colors copied from design tools
• RGB/RGBA for JavaScript color manipulation and canvas
• HSL for programmatic color systems, dark mode, and hover effects
• Convert between any format instantly with the Color Converter tool