Web Developmentbeginner7 min read

CSS Color Formats: HEX, RGB, HSL Explained

Understand the three main CSS color formats — HEX, RGB, and HSL — how to convert between them, and when to use each in your stylesheets.

Why CSS Has Multiple Color Formats

CSS supports multiple color notations because they were introduced at different times and serve different use cases. All three main formats (HEX, RGB, HSL) describe colors in the same sRGB color space — any color expressible in one format can be expressed in the others.

HEX — came from HTML's early web-safe color palette; compact and widely recognized
RGB — natural for programmatic color manipulation (lightening, darkening, mixing)
HSL — designed for human intuition; easy to reason about "make this 20% lighter"

HEX Colors

HEX colors represent red, green, and blue channels as two-digit hexadecimal values (00–FF = 0–255):

`#RRGGBB` → `#FF0000` is red (R=255, G=0, B=0)

Shorthand notation (`#RGB`) works when both digits of each channel are identical: `#FF6600` → `#F60`.

For transparency, CSS3 added `#RRGGBBAA` (8 digits) — the last two hex digits are the alpha channel: `#FF000080` is 50% transparent red.

HEX is compact and universally understood, but hard to manipulate programmatically — you'd need to convert to integers to add 10% lightness.

/* Standard 6-digit HEX */
color: #3B82F6;  /* Tailwind blue-500 */

/* 3-digit shorthand */
color: #F00;     /* same as #FF0000 */

/* 8-digit with alpha (last 2 digits) */
background: #3B82F680;  /* 50% transparent */

RGB and RGBA

RGB expresses each channel as an integer 0–255 or a percentage 0–100%:

`rgb(255, 0, 0)` → red `rgb(59, 130, 246)` → Tailwind blue-500

Modern CSS (Color Level 4) also supports space-separated syntax with an optional slash for alpha: `rgb(59 130 246 / 50%)`

The `rgba()` function (now just `rgb()` with the slash syntax) adds an alpha channel from 0 (transparent) to 1 (opaque) — useful for overlays, shadows, and glassmorphism effects.

RGB is better than HEX for dynamic values in JavaScript: computing `rgb(r, g, b)` from variables is straightforward.

/* Classic syntax */
color: rgb(59, 130, 246);

/* With alpha */
background: rgba(59, 130, 246, 0.5);

/* Modern CSS Level 4 syntax */
background: rgb(59 130 246 / 50%);

/* Dynamic in JavaScript */
const r = 59, g = 130, b = 246;
element.style.color = `rgb(${r}, ${g}, ${b})`;

HSL and HSLA: Intuitive Color Manipulation

HSL separates color into three independent axes that match how humans think about color:

Hue (0–360°) — the color family on the color wheel: 0°=red, 120°=green, 240°=blue
Saturation (0–100%) — 0% is grayscale, 100% is the most vivid version of the hue
Lightness (0–100%) — 0% is black, 100% is white, 50% is the "pure" color

HSL makes it trivial to create color palettes: fix the hue, vary the lightness. `hsl(220, 90%, 20%)` → dark navy `hsl(220, 90%, 50%)` → medium blue `hsl(220, 90%, 80%)` → light blue-gray

This is how design systems like Tailwind define their color scales.

/* Create a consistent color palette by varying lightness */
:root {
  --blue-900: hsl(220, 90%, 20%);
  --blue-500: hsl(220, 90%, 50%);
  --blue-100: hsl(220, 90%, 90%);
}

/* Dark mode: flip lightness, keep hue */
@media (prefers-color-scheme: dark) {
  :root {
    --text-primary: hsl(220, 20%, 95%);
    --bg-primary:   hsl(220, 20%, 10%);
  }
}

Modern CSS Color Features

CSS Color Level 4 and 5 bring powerful new capabilities:

`oklch()` — a perceptually uniform color space where equal changes in lightness look equal to the human eye; the future of CSS color
`color-mix()` — mix two colors: `color-mix(in srgb, blue 30%, white)` produces a 30/70 blue-white blend
`currentColor` — inherits the element's `color` property; useful for SVG fills and borders that follow text color
CSS custom properties — the modern way to implement theming: define color tokens as CSS variables and swap entire themes with a class or media query

Converting Between Formats with DevForge

The DevForge Color Converter accepts any HEX, RGB, or HSL value and instantly shows all three equivalent representations with a live color swatch preview. It's useful when a design tool gives you a HEX code but your codebase uses HSL tokens, or when you need to translate a brand color into the format your CSS framework expects.

Try it on DevForge

Free online tools related to this tutorial — no signup required.

Color Converter

Convert color formats

CSS

CSS Beautifier

Beautify or minify CSS