HEX to RGB: Understanding CSS Color Formats

Here is a fun fact: every color on your screen is just a mix of red, green, and blue light. Every. Single. One. That gorgeous sunset orange? Red, green, and blue. That calming teal? Red, green, and blue. Even white is just all three cranked to max.

CSS gives you multiple ways to express these color mixes: HEX codes, RGB values, HSL notation, and more. They all describe the same thing — just in different languages. Think of it like temperature: 32°F, 0°C, and 273K are all "water freezes." Same concept, different notation.

HEX Colors: The Compact Notation

HEX codes are probably the color format you see most often. They are a six-character string prefixed with #, where each pair of characters represents one color channel in hexadecimal (base-16):

#3498DB
 ││││││
 ││││└┘── Blue:  DB = 219
 ││└┘──── Green: 98 = 152
 └┘────── Red:   34 = 52

Hexadecimal digits go from 0-9, then A-F (where A=10, B=11, all the way to F=15). Each pair can represent values from 00 (zero, nothing, nada) to FF (255, maximum blast).

The Shorthand Trick

When each pair is a repeated digit, you can shorten the code to three characters:

#AABBCC  →  #ABC
#FF0000  →  #F00  (pure red)
#336699  →  #369

Eight-Digit HEX (with Transparency)

Modern CSS supports an optional fourth pair for opacity, so you can do things like:

#3498DB80  ← the last two digits (80) = ~50% opacity

RGB: The Straightforward One

RGB notation just writes out the red, green, and blue values as regular numbers from 0 to 255. No hexadecimal math needed:

color: rgb(52, 152, 219);
color: rgba(52, 152, 219, 0.5);  /* 50% see-through */

/* Modern syntax (CSS Color Level 4) */
color: rgb(52 152 219);
color: rgb(52 152 219 / 0.5);

The modern syntax drops the commas and uses a slash for the alpha value. Both syntaxes work in all current browsers, so use whichever you find more readable.

Converting HEX to RGB (It is Just Math)

The conversion is surprisingly simple. Take each two-character pair and convert it from base-16 to base-10:

HEX: #3498DB

Red:   3 × 16 + 4 = 52
Green: 9 × 16 + 8 = 152
Blue:  D(13) × 16 + B(11) = 219

Result: rgb(52, 152, 219)

And here is how to do it in JavaScript, because who wants to do math by hand:

function hexToRgb(hex) {
  hex = hex.replace(/^#/, '');
  if (hex.length === 3) {
    hex = hex.split('').map(c => c + c).join('');
  }
  const num = parseInt(hex, 16);
  return {
    r: (num >> 16) & 255,
    g: (num >> 8) & 255,
    b: num & 255
  };
}

hexToRgb('#3498DB');  // { r: 52, g: 152, b: 219 }

Converting RGB to HEX

function rgbToHex(r, g, b) {
  return '#' + [r, g, b]
    .map(x => x.toString(16).padStart(2, '0'))
    .join('');
}

rgbToHex(52, 152, 219);  // "#3498db"

HSL: The One That Actually Makes Sense to Humans

HSL stands for Hue, Saturation, Lightness, and it maps to how we actually think about color in everyday life:

• Hue (0-360): The color itself on the color wheel. Red is 0, green is 120, blue is 240.
• Saturation (0-100%): How vivid the color is. 0% is gray, 100% is full color.
• Lightness (0-100%): How bright. 0% is black, 50% is the "normal" color, 100% is white.

color: hsl(204, 70%, 53%);
color: hsl(204 70% 53% / 0.5);  /* with transparency */

Why Developers Love HSL

HSL makes creating color variations ridiculously easy. Want a lighter version? Just bump up the lightness. Want a muted version? Dial down saturation. No calculator required:

--primary:       hsl(204, 70%, 53%);  /* base */
--primary-light: hsl(204, 70%, 70%);  /* lighter */
--primary-dark:  hsl(204, 70%, 35%);  /* darker */
--primary-muted: hsl(204, 30%, 53%);  /* less vivid */

When to Use Which Format

Quick Reference Cheat Sheet

White:   #FFFFFF = rgb(255,255,255) = hsl(0, 0%, 100%)
Black:   #000000 = rgb(0, 0, 0)     = hsl(0, 0%, 0%)
Red:     #FF0000 = rgb(255, 0, 0)   = hsl(0, 100%, 50%)
Green:   #00FF00 = rgb(0, 255, 0)   = hsl(120, 100%, 50%)
Blue:    #0000FF = rgb(0, 0, 255)   = hsl(240, 100%, 50%)
Yellow:  #FFFF00 = rgb(255, 255, 0) = hsl(60, 100%, 50%)
Cyan:    #00FFFF = rgb(0, 255, 255) = hsl(180, 100%, 50%)

At the end of the day, HEX, RGB, and HSL are just different languages for the same thing. Once you understand that, converting between them becomes second nature. Use whichever format makes your code the most readable for the job at hand.