Números Hexadecimales - Tutorial de Introducción a la Programación

Resumen Rápido

El hexadecimal es base-16 y se usa comúnmente para colores, direcciones de memoria y representación compacta de binario. Cada dígito hexadecimal corresponde a 4 bits binarios, haciendo las conversiones fáciles. Verás hexadecimal en todas partes en el desarrollo web, especialmente para colores.

¿Qué es Hexadecimal?

Hexadecimal (hex) es base-16, usando dígitos 0-9 y letras A-F:

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

Por Qué Hex es Útil

Compacto: 2 dígitos hex = 1 byte (00 a FF)
Conversión binaria fácil: Cada dígito hex = 4 bits
Ampliamente usado: Colores, direcciones de memoria, codificación

Hex en Colores Web

Los colores CSS usan notación hexadecimal:

/* #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 en 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"

Conversión Binario ↔ Hex

Cada dígito hex = 4 bits binarios:

Hex:    A    3    F
Binary: 1010 0011 1111

So 0xA3F = 0b101000111111 = 2623 decimal

Pruébalo Tú Mismo

Aquí tienes un ejemplo práctico que puedes probar. Copia este código y ejecútalo en la consola de tu navegador (presiona F12 para abrir las herramientas de desarrollo) o en el Playground de Código.

// 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"

Puntos Clave

✓Representa valores con dígitos base-16 (0-9, A-F).
✓Practica con ejemplos de código reales para solidificar tu comprensión
✓Este concepto construye la base para temas más avanzados