Conversor de color

En el diseño de interfaces de usuario y desarrollo frontend, la representación del color en pantallas electrónicas se fundamenta en el modelo de síntesis aditiva RGB (Red, Green, Blue). Mediante la combinación en intensidades graduadas de tres haces luminosos de luz roja, verde y azul emitidos por los subpíxeles de la pantalla física, el ojo humano percibe millones de matices distintos dentro del espacio de color estándar sRGB. El desarrollo web emplea tres notaciones fundamentales para codificar estos valores: 1. Notación Hexadecimal (HEX): Representa los tres canales primarios mediante números de base 16 en el formato #RRGGBB. Cada canal dispone de dos dígitos hexadecimales con un rango de 00 (intensidad nula, 0 en base decimal) a FF (máxima intensidad lumínica, 255 en decimal). Es el estándar más compacto para hojas de estilo CSS y guías de identidad corporativa. 2. Notación RGB (rgb(r, g, b)): Expresa la intensidad de cada canal directamente en base decimal en el intervalo de 0 a 255. Proporciona una lectura directa de la emisión lumínica física, pero resulta antiintuitiva para ajustar matices: si un diseñador desea oscurecer o aclarar un tono, debe recalcular simultáneamente los tres componentes en proporciones idénticas. 3. Notación HSL (hsl(h, s%, l%)): Concibe el color como un espacio cilíndrico modelado según la percepción cognitiva humana: - Tono (Hue, H): Representa el ángulo cromático en el círculo de color, desde 0° hasta 360° (0° rojo, 120° verde, 240° azul, completando el círculo de nuevo en el rojo). - Saturación (Saturation, S): Porcentaje de pureza cromática (0 % es una escala de grises neutra; 100 % es el color puro vibrante). - Luminosidad (Lightness, L): Cantidad de luz percibida (0 % es negro absoluto, 50 % es el color pleno sin pérdida de matiz y 100 % es blanco puro). Gracias a este desacoplamiento de la luminosidad respecto al tono, el formato HSL es el estándar preferido para construir paletas de diseño accesibles, estados dinámicos de botones (hover, active, focus) y modos oscuros (dark mode) sistemáticos.

La conversión precisa entre la síntesis física RGB y las coordenadas perceptuales HSL requiere primero normalizar las intensidades de cada canal a una escala unitaria entre 0 y 1, calculando los valores extremos de luminancia y su rango delta:

Normalización: r' = R/255, g' = G/255, b' = B/255 | C_max = max(r', g', b'), C_min = min(r', g', b'), Δ = C_max - C_min
Luminosidad: L = (C_max + C_min) / 2
Saturación: S = 0 si Δ = 0; S = Δ / (1 - |2L - 1|) si Δ > 0
Tono: H = 60° × ((g' - b')/Δ mod 6) si C_max=r' | H = 60° × ((b' - r')/Δ + 2) si C_max=g' | H = 60° × ((r' - g')/Δ + 4) si C_max=b'

Al desarrollar un sistema de diseño web (Design System), los componentes interactivos como botones requieren estados visuales secundarios (hover al pasar el ratón, active al pulsar y bordes sutiles) que conserven la identidad tonal exacta de la marca corporativa.

Paso 1: Conversión a RGB:
R = 0x25 = 37, G = 0x63 = 99, B = 0xEB = 235 → rgb(37, 99, 235).
Paso 2: Conversión a HSL:
Normalización: r' = 0,1451, g' = 0,3882, b' = 0,9216.
C_max = 0,9216 (azul), C_min = 0,1451, Δ = 0,7765.
L = (0,9216 + 0,1451) / 2 = 0,5333 (53 %).
S = 0,7765 / (1 - |2(0,5333) - 1|) = 0,7765 / 0,9334 = 0,8319 (83 %).
H = 60° × ((0,1451 - 0,3882) / 0,7765 + 4) = 60° × (-0,3131 + 4) = 221,2° (221°).
Color base en HSL: hsl(221, 83%, 53%).
Paso 3: Obtención de variante interactiva (hover):
Incrementamos únicamente la luminosidad en 10 puntos porcentuales: hsl(221, 83%, 63%) → #4f83ee.