1. Fundamentos Matemáticos: Conversión de HEX a RGB
Los códigos hexadecimales representan los canales rojo, verde y azul en base 16 (0 al F). Cada par de dígitos equivale a un entero de 8 bits entre 0 y 255 (16² - 1 = 255). Para convertir el par `3B` a decimal: `R = (3 × 16¹) + (11 × 16⁰) = 48 + 11 = 59`. Aplicando esta lógica a los tres canales, `#3B82F6` se transforma exactamente en `rgb(59, 130, 246)`.
javascript Code Example
// Conversión manual en JavaScript:
const hex = "3B82F6";
const r = parseInt(hex.slice(0, 2), 16); // 59
const g = parseInt(hex.slice(2, 4), 16); // 130
const b = parseInt(hex.slice(4, 6), 16); // 246
console.log(`rgb(${r}, ${g}, ${b})`);Descomposición con parseInt en base 16.
2. Función en JavaScript Puro para HEX de 3, 6 y 8 Dígitos
El código en producción debe gestionar formatos abreviados (`#fff`), estándar (`#3b82f6`) y de 8 caracteres con canal alfa (`#3b82f680`). El formato abreviado duplica cada carácter (`#abc` pasa a ser `#aabbcc`).
javascript Code Example
function hexToRgba(hex, overrideAlpha) {
let clean = hex.replace(/^#/, "").trim();
if (clean.length === 3) {
clean = clean.split("").map(c => c + c).join("");
}
if (clean.length === 6) {
const num = parseInt(clean, 16);
const r = (num >> 16) & 255;
const g = (num >> 8) & 255;
const b = num & 255;
const a = overrideAlpha !== undefined ? overrideAlpha : 1;
return `rgba(${r}, ${g}, ${b}, ${a})`;
}
if (clean.length === 8) {
const num = parseInt(clean, 16);
const r = (num >> 24) & 255;
const g = (num >> 16) & 255;
const b = (num >> 8) & 255;
const a = overrideAlpha !== undefined ? overrideAlpha : +(num & 255) / 255;
return `rgba(${r}, ${g}, ${b}, ${Number(a.toFixed(2))})`;
}
throw new Error("Formato HEX inválido");
}Función binaria optimizada compatible con formatos de 3, 6 y 8 dígitos.
3. Códigos HEX de 8 Dígitos (#RRGGBBAA) y Transparencia
El estándar CSS Color Module Level 4 normalizó los códigos hexadecimales de 8 caracteres. Los últimos dos caracteres determinan la opacidad entre 00 (0% transparente) y FF (100% opaco). Valores alfa frecuentes: - `100%` = `FF` (255) - `80%` = `CC` (204) - `50%` = `80` (128) - `25%` = `40` (64) - `10%` = `1A` (26) - `0%` = `00` (0)
4. Sintaxis Moderna de CSS y color-mix() sin JavaScript
Las especificaciones modernas de CSS permiten sintaxis sin comas (`rgb(59 130 246 / 50%)`). Además, la función nativa `color-mix()` permite aplicar opacidad directamente sobre variables HEX sin convertirlas previamente en JS.
css Code Example
:root {
--color-primario: #3b82f6;
}
.elemento {
/* Sintaxis con barra diagonal */
background: rgb(59 130 246 / 0.5);
/* Opacidad nativa mediante CSS sin JS */
border-color: color-mix(in srgb, var(--color-primario) 50%, transparent);
}Uso de color-mix() en CSS para mezclar colores con transparencia nativa.
5. Conversión de RGB a HSL (Tono, Saturación y Luminosidad)
A diferencia de RGB, que representa intensidades de luz de hardware, HSL refleja la percepción humana del color. Esto facilita enormemente la creación de estados de componentes (hover, active) alterando únicamente el canal de Luminosidad (L).
6. Cálculo de Ratios de Contraste y Accesibilidad WCAG 2.1
Para garantizar la legibilidad en interfaces de usuario, los valores RGB se convierten a luminancia relativa (L). La especificación WCAG 2.1 exige un ratio de contraste mínimo de 4.5:1 para texto normal y de 3:1 para texto grande o elementos gráficos interactivos.