HEX Colors: Hexadecimal Notation and Shorthand Codes

Master HEX colors in CSS. Learn how hexadecimal notation translates to red, green, and blue values, shorthand codes, and alpha hex parameters.

Introduction

If you open a designer's mock-up on Figma or check color palettes on websites like Coolors, you will constantly see codes like #3B82F6 or #FFF.

This is Hexadecimal Notation (often called HEX codes). In web development, HEX is the most widely used format to specify colors. While it looks like a random string of numbers and letters, it is actually a highly structured base-16 mathematical formula representing red, green, and blue light channels. Understanding how to decode these strings will help you read and edit design variables on the fly.

What You Will Learn

  • How the base-16 hexadecimal system works.
  • How to decode a 6-digit HEX color code.
  • Using 3-digit shorthand HEX codes.
  • How to add transparency using 8-digit HEX codes.
  • Converting HEX codes to RGB values.

Prerequisites

Detailed Explanation: Hexadecimal Math

Our everyday counting system is decimal (Base-10), using numbers $0$ to $9$. The hexadecimal system is Base-16, using sixteen distinct symbols:

  • Numbers 0 to 9 represent values 0-9.
  • Letters A to F represent values 10-15 (A=10, B=11, C=12, D=13, E=14, F=15).

Decoding the 6-Digit HEX Code

A standard HEX color code is written as a hash (#) followed by 6 characters:

$$#\text{R R G G B B}$$

Where:

  • The first two digits represent the Red channel.
  • The middle two digits represent the Green channel.
  • The final two digits represent the Blue channel.

Each pair ranges from 00 (value 0, light off) to FF (value 255, maximum intensity).

Example: Decoding #3B82F6

  • Red (3B): $3 \times 16 + 11 = 59$
  • Green (82): $8 \times 16 + 2 = 130$
  • Blue (F6): $15 \times 16 + 6 = 246$
  • Result: #3B82F6 is identical to rgb(59, 130, 246).

Shorthand 3-Digit HEX Codes

If both digits in each channel pair are identical, you can compress the code into 3 digits:

  • #FFFFFF becomes #FFF
  • #000000 becomes #000
  • #336699 becomes #369

8-Digit HEX Codes (Alpha Channel)

Modern browsers support an optional fourth pair representing transparency (Alpha):

$$#\text{R R G G B B A A}$$

  • #FF000080 represents Red at 50% opacity (80 in base-16 is 128, which is roughly half of 255).

Visual Learning Diagram (Mermaid)

graph LR
    Hash[#] --> Red[RR: Red channel 00-FF]
    Hash --> Green[GG: Green channel 00-FF]
    Hash --> Blue[BB: Blue channel 00-FF]
    Hash -->|Optional| Alpha[AA: Alpha channel 00-FF]

Code Examples

Example 1: Standard and Shorthand Selectors

Apply standard and shorthand HEX properties to site elements:

/* Card Container */
.card {
  /* Opaque dark-slate background using 6-digit HEX */
  background-color: #1e293b;
  
  /* Pure white border using 3-digit shorthand */
  border: 1px solid #fff; 
}

/* Metadata Text */
.card__date {
  /* Slate-400 color */
  color: #94a3b8;
}

Example 2: Semi-Transparent Overlays (8-Digit HEX)

Let's build a modal backdrop using the 8-digit HEX transparency format:

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  
  /* Black color (#000000) at 60% opacity (represented by '99' in hex) */
  background-color: #00000099; 
}

Summary

HEX codes format RGB light channels into base-16 strings #RRGGBB. Ranging from 00 to FF, HEX supports compressed 3-digit shorthands for duplicate channel values, alongside 8-digit variants (#RRGGBBAA) to adjust transparency profiles natively.

Related Articles

Next Tutorial

How do we define colors based on intuitive concepts like Hue angle, Saturation, and Lightness? Let's check: HSL Colors.

← Back to Syllabus