Los colores en la web están definidos por números, no por nombres. Cuando un diseñador dice "ese tono exacto de azul", en realidad está especificando un punto matemático en un espacio de color tridimensional. HEX, RGB y HSL son tres formas diferentes de describir el mismo conjunto de colores — el mismo punto desde diferentes sistemas de coordenadas. Cada formato tiene diferentes ventajas para diferentes tareas, y cambiar entre ellos es parte del desarrollo web cotidiano.
HEX: El Estándar de la Web
Un código de color HEX como #3B82F6 es una representación compacta de tres valores de 8 bits (0–255) para rojo, verde y azul, escritos en hexadecimal (base 16). Los primeros dos caracteres son rojo (3B = 59 en decimal), los dos siguientes son verde (82 = 130) y los últimos dos son azul (F6 = 246). El prefijo # le dice al navegador que interprete el valor como un color hexadecimal.
Los códigos HEX cortos usan caracteres únicos por canal cuando ambos dígitos son iguales: #AABBCC puede escribirse como #ABC. Esto solo funciona cuando ambos dígitos en cada canal son idénticos, limitándolo a colores como #FFF (blanco), #000 (negro) y #F00 (rojo puro).
HEX con canal alfa usa ocho caracteres: #3B82F6FF donde los dos últimos (FF = 255 = 100% de opacidad) representan la opacidad. HEX es ideal para tokens de diseño, propiedades personalizadas de CSS y cualquier contexto donde la compacidad y la facilidad de copiar y pegar sean importantes.
RGB: La Base Lógica
RGB — Rojo, Verde, Azul — es el modelo subyacente que realmente usan las pantallas de computadora. Cada píxel emite luz en tres colores, y el ojo percibe su combinación como un solo color. La sintaxis RGB de CSS es rgb(59, 130, 246) para el mismo azul que #3B82F6. La variante rgba() agrega un canal alfa: rgba(59, 130, 246, 0.5) para 50% de opacidad.
RGB es aditivo — agregar más de cada canal aumenta el brillo. Los valores completos de los tres (255, 255, 255) producen blanco. Los valores cero para todos (0, 0, 0) producen negro. Esto es lo opuesto de la mezcla de colores sustractiva con pigmentos físicos, lo cual es una fuente de confusión para diseñadores que vienen del mundo impreso.
RGB es el mejor formato para la manipulación programática de colores. Cuando quieres oscurecer un color en JavaScript, restar una cantidad fija de cada canal RGB es sencillo. Cuando quieres mezclar dos colores, promedia sus valores RGB. El CSS moderno también admite rgb() con porcentajes y la función color() más nueva para espacios de gamut más amplio.
HSL: El Formato Amigable para Humanos
HSL significa Matiz, Saturación, Luminosidad. hsl(217, 91%, 60%) representa el mismo azul. El matiz es un grado en la rueda de color (0° y 360° son ambos rojo, 120° es verde, 240° es azul). La saturación es la intensidad del color (0% es gris, 100% es color completo). La luminosidad es el brillo (0% es negro, 50% es el color puro, 100% es blanco).
HSL es el formato más intuitivo para generar variaciones de color. Para crear una versión más clara de un color, aumenta la luminosidad. Para crear una versión atenuada, disminuye la saturación. Para crear un color complementario, agrega 180° al matiz. Estas operaciones se mapean directamente a cómo los diseñadores piensan sobre las relaciones de color.
HSL brilla en CSS para estados de hover, variantes de modo oscuro y temas de componentes. Si tu color primario es hsl(217, 91%, 60%), tu estado hover es hsl(217, 91%, 50%), tu estado deshabilitado es hsl(217, 30%, 70%) y tu fondo en modo oscuro es hsl(217, 30%, 15%). Estas relaciones son legibles en el código fuente, a diferencia de los valores HEX equivalentes.
Accesibilidad del Color y Ratios de Contraste
WCAG 2.1 define ratios de contraste mínimos para la legibilidad del texto. El texto normal requiere un ratio de contraste de al menos 4.5:1 contra su fondo. El texto grande (18pt+ o 14pt+ en negrita) requiere 3:1. El ratio de contraste se calcula a partir de la luminancia relativa de los dos colores — una fórmula que pondera los canales RGB por la sensibilidad del ojo humano a cada color.
El negro puro sobre blanco tiene un ratio de contraste de 21:1 — el máximo. Muchos diseñadores prefieren texto ligeramente no negro (#1F2937 o similar) sobre blanco, que mantiene un ratio muy por encima del umbral del 4.5:1 mientras reduce la fatiga visual en la lectura prolongada.
Herramientas como el Verificador de Contraste de WebAIM y las auditorías de accesibilidad de DevTools del navegador detectan automáticamente los fallos de contraste. Incorporar elecciones de color accesibles en tu sistema de tokens de diseño — en lugar de verificar componentes individuales después del hecho — es el enfoque sostenible.
HEX, RGB y HSL no son formatos competidores — son herramientas complementarias. Usa HEX para tokens de diseño y valores fáciles de copiar. Usa RGB cuando manipules colores de forma programática. Usa HSL cuando diseñes sistemas de color y necesites razonar sobre las relaciones entre tonos. Un selector de color que convierte entre los tres formatos en tiempo real es indispensable para este tipo de exploración, permitiéndote encontrar el color correcto visualmente y luego exportarlo en cualquier formato que requiera tu base de código.