Hexadecimal Numbers - Intro to Programming Tutorial

Quick Summary

Hex is base-16 and is commonly used for colors, memory addresses, and compact binary representation. Each hex digit maps to 4 binary bits, making conversions easy. You'll see hex everywhere in web development, especially for colors.

What is Hexadecimal?

Hexadecimal (hex) is base-16, using digits 0-9 and letters A-F:

| Decimal | Hex | Binary | |---------|-----|--------| | 0 | 0 | 0000 | | 9 | 9 | 1001 | | 10 | A | 1010 | | 15 | F | 1111 | | 16 | 10 | 10000 | | 255 | FF | 11111111 |

Why Hex is Useful

Compact: 2 hex digits = 1 byte (00 to FF)
Easy binary conversion: Each hex digit = 4 bits
Widely used: Colors, memory addresses, encoding

Hex in Web Colors

CSS colors use hex notation:

/* #RRGGBB format */
#FF0000  /* Red: 255, 0, 0 */
#00FF00  /* Green: 0, 255, 0 */
#0000FF  /* Blue: 0, 0, 255 */
#FFFFFF  /* White: 255, 255, 255 */
#000000  /* Black: 0, 0, 0 */

/* Shorthand (when pairs are same) */
#FFF     /* Same as #FFFFFF */
#F00     /* Same as #FF0000 */

Hex in JavaScript

// Hex literal (prefix with 0x)
const hex = 0xFF; // 255

// Parse hex string
parseInt("FF", 16); // 255

// Convert to hex string
(255).toString(16); // "ff"

Binary ↔ Hex Conversion

Each hex digit = 4 binary bits:

Hex:    A    3    F
Binary: 1010 0011 1111

So 0xA3F = 0b101000111111 = 2623 decimal

Try It Yourself

Here's a practical example you can try. Copy this code and run it in your browser's console (press F12 to open developer tools) or in the Code Playground.

// Hexadecimal literals in JavaScript (0x prefix)
const red = 0xFF;    // 255
const green = 0x80;  // 128
const blue = 0x00;   // 0

// Converting decimal to hex
const decimal = 255;
const hexString = decimal.toString(16);
console.log(hexString); // "ff"

// Converting hex to decimal
const hex = "ff";
const decimalResult = parseInt(hex, 16);
console.log(decimalResult); // 255

// Padding hex to 2 digits
function toHex(num) {
  return num.toString(16).padStart(2, '0').toUpperCase();
}
console.log(toHex(15));  // "0F"
console.log(toHex(255)); // "FF"

// RGB to Hex color conversion
function rgbToHex(r, g, b) {
  return '#' + toHex(r) + toHex(g) + toHex(b);
}
console.log(rgbToHex(255, 128, 0)); // "#FF8000" (orange)

// Hex color to RGB
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 };
}
console.log(hexToRgb("#FF8000")); // { r: 255, g: 128, b: 0 }

// Memory addresses are often shown in hex
const address = 0xDEADBEEF;
console.log(address.toString(16).toUpperCase()); // "DEADBEEF"

Key Takeaways

✓Represent values with base-16 digits (0-9, A-F).
✓Practice with real code examples to solidify your understanding
✓This concept builds the foundation for more advanced topics