HEX Color Codes Explained — How to Read and Write CSS Colors

HEX color codes are everywhere in CSS and design tools. Once you understand how they work, reading and writing them becomes second nature.

What is a HEX color code?

A HEX color code is a 6-character representation of an RGB color in hexadecimal (base-16) notation. Each character can be 0–9 or A–F, giving 16 possible values per character.

#RRGGBB

#0071e3
 ^^---- RR = 00 (red = 0)
   ^^-- GG = 71 (green = 113)
     ^^ BB = e3 (blue = 227)

Reading hexadecimal numbers

Each pair of HEX digits represents a number from 0 to 255:

• 00 = 0 (minimum)
• 80 = 128 (halfway)
• ff = 255 (maximum)

Converting e3 to decimal: e = 14, so e3 = 14 × 16 + 3 = 224 + 3 = 227.

Common colors to memorize

#000000  Black    (all channels minimum)
#ffffff  White    (all channels maximum)
#ff0000  Red      (red max, others zero)
#00ff00  Green    (green max, others zero)
#0000ff  Blue     (blue max, others zero)
#ffff00  Yellow   (red + green max)
#ff00ff  Magenta  (red + blue max)
#00ffff  Cyan     (green + blue max)
#808080  Gray     (all channels at 128)

3-digit shorthand

When each pair of digits repeats, you can use 3-digit shorthand:

#ffffff → #fff
#000000 → #000
#ff0000 → #f00
#aabbcc → #abc
#112233 → #123

/* These are identical in CSS: */
color: #ffffff;
color: #fff;

HEX with opacity (8-digit)

Modern CSS supports 8-digit HEX for colors with transparency:

#RRGGBBAA   /* 8-digit with alpha channel */

#0071e380   /* 50% opacity blue */
#0071e3ff   /* 100% opacity (fully opaque) */
#0071e300   /* 0% opacity (fully transparent) */

/* The last two digits (AA) are the alpha:
   ff = 255 = 100% opaque
   80 = 128 = 50% transparent
   00 = 0   = fully transparent */

Convert HEX to RGB manually

// Take #0071e3
// Split: 00, 71, e3
// Convert each pair from hex to decimal:
// 00 hex = 0 decimal
// 71 hex = 7×16 + 1 = 113 decimal
// e3 hex = 14×16 + 3 = 227 decimal
// Result: rgb(0, 113, 227)

// In JavaScript:
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 };
}

hexToRGB('#0071e3') // { r: 0, g: 113, b: 227 }