Cómo funcionan los códigos de color hex (y qué significa #FF5733)

Un color como #FF5733 parece un código que debes copiar sin entender nunca. No es un código en ese sentido. Son tres números corrientes con un disfraz compacto, y en cuanto consigues separar los seis caracteres en rojo, verde y azul, cualquier color hex que te encuentres se vuelve legible. El truco está en saber que el hex no es más que contar en base 16.

Resumen: un código de color hex son tres números, rojo, verde y azul, cada uno de 0 a 255, escritos en base 16 con dos caracteres cada uno. #FF5733 es rojo 255, verde 87, azul 51, el mismo color que rgb(255, 87, 51). Un #FFF corto se expande a #FFFFFF, y un par extra al final fija la transparencia.

Qué son en realidad los seis caracteres de un código hex

Un color hex son tres números pegados, uno para el rojo, uno para el verde y uno para el azul. Los seis caracteres después del # se reparten en tres pares: el primer par es el rojo, el segundo el verde y el tercero el azul. Cada par es un único valor de 0 a 255 que indica cuánto de ese canal hay que mezclar. Esa es toda la estructura.

Así que #FF5733 no es un solo número largo. Es FF para el rojo, 57 para el verde y 33 para el azul, tres cantidades separadas que se leen de izquierda a derecha. Las pantallas construyen cada color mezclando esos tres canales de luz, y el código hex es solo una forma ordenada de anotar los tres niveles en seis caracteres en lugar de deletrearlos.

Por qué cada par va de 0 a 255 en base 16

Hex es la forma corta de hexadecimal, que significa contar en base 16 en vez de la base 10 que usamos por defecto. Un solo carácter hex guarda 16 valores: del 0 al 9, y luego A, B, C, D, E, F, que representan del 10 al 15. Dos caracteres juntos cubren 16 por 16, que son 256 valores posibles, contados desde 0 hasta 255. De ahí sale el rango de cada canal.

Por eso un par llega como máximo a FF y no a 99. En base 10, FF equivale a 15 por 16 más 15, que da 255, el máximo. El más bajo es 00, que es 0. Cada canal se sitúa en algún punto de ese rango de 256 pasos, y dos caracteres hex bastan justo para escribir cualquier valor de ese rango sin desperdiciar nada. Un solo carácter solo llegaría a 15, y tres serían más de lo necesario.

Cómo dividir #FF5733 en rojo, verde y azul

Coge #FF5733 y pártelo en sus tres pares para ver el color real. FF es el canal rojo, y FF es 255, el máximo, así que este color es totalmente rojo. 57 es el canal verde, que es 87 en base 10, una cantidad de baja a media. 33 es el canal azul, que es 51, también baja. Mucho rojo, un poco de verde y algo menos de azul, mezclados, dan un naranja rojizo cálido.

El cálculo para cualquier par es el mismo. El primer carácter es su valor por 16, y le sumas el valor del segundo carácter. Para 57, el 5 es 5 por 16, que da 80, más el 7, que da 87. Para 33, el 3 es 3 por 16, que da 48, más 3, que da 51. Rara vez tienes que hacerlo a mano, pero hacerlo una vez ayuda a entender la notación de golpe. Si prefieres crear y leer paletas enteras en lugar de convertir pares de cabeza, el generador de paletas en color.hivly.net muestra el hex y los valores de cada canal uno al lado del otro.

Por qué hex y rgb() son el mismo color

Un código hex y un valor rgb() son dos notaciones para un mismo conjunto de números. #FF5733 y rgb(255, 87, 51) describen el mismo píxel. El hex escribe los tres canales en base 16 y los mete muy juntos; rgb() escribe los mismos tres canales en base 10 normal y los separa con comas. Ninguno es más “real” que el otro. Se convierten de uno a otro de forma exacta.

Verás los dos en CSS, y cuál aparece depende sobre todo de la costumbre y el contexto. El hex es compacto y fácil de pegar desde una herramienta de diseño, así que domina en las hojas de estilo. La forma rgb() es más fácil de leer de un vistazo para una persona y deja claro cuándo quieres ajustar un solo canal. Usa el que te resulte más claro en cada momento. El navegador los trata como la misma instrucción.

La forma abreviada y las formas con alfa

El hex tiene dos variantes además de la de seis caracteres. La versión corta usa tres caracteres, y cada uno simplemente se duplica para formar un par. #FFF se expande a #FFFFFF, que es blanco; #F00 se expande a #FF0000, rojo puro. La abreviatura solo funciona cuando los dos caracteres de cada par son iguales, así que #FF5733 no tiene versión de tres caracteres. Es una comodidad para valores redondos, no un sistema distinto.

La variante más larga añade un cuarto par para la transparencia, llamado canal alfa. Un código de ocho caracteres como #FF5733CC mantiene el mismo rojo, verde y azul, y luego usa el par final, CC, para fijar la opacidad en la conocida escala de 0 a 255. 00 es totalmente transparente, FF es totalmente opaco, y CC es 204, alrededor del 80 por ciento. Así que #FF5733CC es ese naranja rojizo, casi sólido pero dejando pasar un poco del fondo. La abreviatura de cuatro caracteres, como #FFFA, duplica cada carácter de la misma manera.

Leer un código hex de un vistazo

Puedes leer la mayoría de los códigos hex sin convertir nada en cuanto conoces la estructura. Mira el primer par para el rojo, el par del medio para el verde y el último para el azul, y juzga cada par por lo alto que está. Un par cerca de FF significa mucho de ese canal; un par cerca de 00 significa casi nada. #FF5733 se lee al instante como mucho rojo, poco verde y poco azul, así que es cálido y rojizo antes de que calcules un solo valor.

Esta lectura rápida es donde el hex gana su sitio, y también donde deja de bastar. Los números encajan bien con cómo una pantalla mezcla la luz, pero no se corresponden con cómo el ojo percibe el brillo ni con cómo pensamos un color en palabras. Dos códigos pueden diferir en lo mismo sobre el papel y verse a mundos de distancia. Cuando necesitas razonar sobre luminosidad, saturación o uniformidad perceptiva, formatos como HSL u OKLCH describen un color tal como lo vemos las personas, mientras que el hex sigue siendo la forma compacta de guardar y pegar la mezcla exacta.