Fundamentos de teoría del color: Guía completa de RGB, HEX y HSL

En diseño web y medios digitales, los colores se describen mediante modelos matemáticos. Diferentes modelos describen colores desde diferentes perspectivas: • RGB: Modelo aditivo basado en rojo, verde y azul — ideal para pantallas • HEX: Representación hexadecimal de RGB — el formato más común en CSS • HSL: Basado en tono, saturación y luminosidad — más intuitivo para la percepción humana • CMYK: Modelo sustractivo basado en cian, magenta, amarillo y negro — para impresión Comprender las relaciones y conversiones entre estos modelos es una habilidad fundamental del diseño web.

RGB significa Rojo, Verde y Azul — los tres colores primarios de la luz. Cada canal va de 0 a 255: • rgb(255, 0, 0) → Rojo puro • rgb(0, 255, 0) → Verde puro • rgb(0, 0, 255) → Azul puro • rgb(255, 255, 255) → Blanco • rgb(0, 0, 0) → Negro RGB es un modelo aditivo — al mezclar las tres luces se vuelve más brillante hasta ser blanco. Esto es opuesto a mezclar pinturas (modelo sustractivo). En CSS: color: rgb(52, 152, 219); /* Un azul bonito */

Los códigos HEX son otra forma de representar valores RGB, la más común en CSS. Formato: #RRGGBB • Cada par de dígitos representa un canal • Usa dígitos hexadecimales (0-9, A-F) • Cada canal va de 00 a FF (0-255 en decimal) Colores comunes: • #FF0000 → Rojo • #00FF00 → Verde • #0000FF → Azul • #FFFFFF → Blanco • #000000 → Negro Abreviación: Si los dos dígitos de cada canal son iguales: • #FF0000 → #F00 • #336699 → #369 Conversión: RGB (52, 152, 219) → 52=34, 152=98, 219=DB → #3498DB

HSL significa Tono (Hue), Saturación y Luminosidad — el modelo más intuitivo. • Tono (H): 0-360 grados, posición en la rueda de colores 0° = Rojo, 120° = Verde, 240° = Azul • Saturación (S): 0-100%, 0% es gris, 100% es más vívido • Luminosidad (L): 0-100%, 0% es negro, 50% normal, 100% blanco Ventajas de HSL: 1. Ajustar brillo: Solo cambia L — el tono se mantiene 2. Ajustar vivacidad: Solo cambia S 3. Crear temas: Fija S y L, cambia solo H para obtener colores armoniosos En CSS: color: hsl(204, 70%, 53%); /* El mismo azul */

Métodos comunes de combinación: 1. Colores complementarios: Opuestos en la rueda (rojo y cian) — alto contraste 2. Colores análogos: Adyacentes en la rueda (azul y púrpura) — armoniosos 3. Colores triádicos: Tres colores equidistantes — vibrantes 4. Monocromático: Mismo tono, diferente saturación y luminosidad — elegante Consejos prácticos: • No más de 3 colores principales, más blanco/negro/gris como soporte • Suficiente contraste entre fondo y texto (WCAG recomienda al menos 4.5:1) • Considerar usuarios daltónicos Gigi Tools ofrece herramientas completas de color: Selector de color, HEX a RGB, RGB a HEX, Conversor HSL y Generador de degradados.