CSS Color Formats Explained: Hex, RGB, HSL — Which Should You Use?

CSS Color Formats Overview

CSS supports many ways to define colors. Understanding the differences helps you write more maintainable styles and choose the right format for your use case. The main formats are: named colors, hex codes, RGB/RGBA, HSL/HSLA, and newer formats like oklch.

Named Colors

CSS has 140+ named colors: red, blue, tomato, cornflowerblue, rebeccapurple.

Named colors are readable but limited. Use them for quick prototyping or very common colors only.

Hex Codes

Hex codes represent colors as three hexadecimal pairs (base-16 numbers) for red, green, and blue channels:

color: #FF5733;   /* Full form */
color: #f57;      /* Shorthand — same as #FF5577 */
color: #FF573380; /* With alpha (transparency) */

Each pair ranges from 00 (0) to FF (255), representing the intensity of that color channel.

Breaking down #FF5733:

• FF = 255 red (maximum)
• 57 = 87 green
• 33 = 51 blue

How to read hex: Convert each pair from base-16 to base-10. F = 15, so FF = (15 × 16) + 15 = 255.

Shorthand: #RGB where each digit is doubled. #f57 = #FF5577.

When to use hex: Hex is compact and copy-paste friendly. It's the most common format in design tools like Figma. Use it when working with fixed brand colors from a design system.

RGB and RGBA

RGB expresses colors as three integers (0–255) for red, green, and blue:

color: rgb(255, 87, 51);
color: rgba(255, 87, 51, 0.5);   /* 50% transparent */

/* Modern syntax (spaces, no commas, / for alpha) */
color: rgb(255 87 51);
color: rgb(255 87 51 / 50%);

RGBA adds an alpha (opacity) channel from 0 (transparent) to 1 (opaque).

When to use RGB: When you need to manipulate color values programmatically in JavaScript, or when you receive color values as separate R, G, B numbers from an API.

HSL and HSLA

HSL represents colors using three human-intuitive properties:

• Hue — the color wheel position (0–360 degrees)
• Saturation — how vivid vs gray (0%–100%)
• Lightness — how dark vs light (0%–100%)

color: hsl(11, 100%, 60%);       /* Vivid orange */
color: hsl(11, 100%, 40%);       /* Darker orange */
color: hsl(11, 20%, 60%);        /* Muted/desaturated orange */
color: hsl(11, 100%, 60% / 0.5); /* 50% transparent */

Why HSL is great for developers:

1. Intuitive adjustment — To make a color lighter, just increase the lightness value. You don't need to recalculate all three RGB channels.

2. Creating color palettes — Keep hue and saturation constant, vary lightness to create shade scales:

--color-blue-100: hsl(220, 90%, 95%);
--color-blue-500: hsl(220, 90%, 50%);
--color-blue-900: hsl(220, 90%, 20%);

3. Programmatic manipulation — Easy to create hover states: lightness + 10% for a lighter hover.

Hue reference points:

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

Modern Color Formats: oklch and oklab

CSS Color Level 4 introduces perceptually uniform color spaces. oklch() and oklab() are now supported in all modern browsers (2023+).

color: oklch(65% 0.15 30);  /* Lightness, Chroma, Hue */

The advantage: equal mathematical steps produce equal perceptual steps. In HSL, colors at the same "lightness" value can appear very different in perceived brightness (yellow appears much lighter than blue at the same L value). oklch fixes this, making it ideal for design systems and accessibility work.

Which Format Should You Use?

Situation	Recommended Format
Design system / brand colors	Hex or CSS custom properties
Creating color scales	HSL
Transparency effects	RGBA or HSL with alpha
JavaScript color manipulation	RGB or HSL
Modern design systems (2024+)	oklch
Quick prototyping	Named colors or hex

CSS Custom Properties (Variables) with Colors

The modern best practice is to define your color palette as CSS custom properties and use them throughout your stylesheet:

:root {
  --color-primary: hsl(220, 90%, 50%);
  --color-primary-light: hsl(220, 90%, 65%);
  --color-primary-dark: hsl(220, 90%, 35%);
}

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

Use our free Color Picker to find colors visually, and our Color Converter to convert between hex, RGB, and HSL instantly.