Un color hexadecimal y un color rgb() son los mismos tres números escritos de dos formas. #4F46E5 son simplemente 79, 70, 229 en base 16: dos dígitos hexadecimales por canal, cada uno con capacidad de 0 a 255. Convertir entre ambos es aritmética. Lo interesante es qué significan realmente esos números, porque no es lo que casi todo el mundo supone.
La forma corta duplica cada dígito, no rellena
El hexadecimal de tres dígitos se expande repitiendo cada carácter: #f00 se convierte en #ff0000, no en #f00000. La regla existe para que la forma corta abarque todo el rango: #fff tiene que ser blanco puro, y solo puede serlo si f se convierte en ff.
La consecuencia es que la forma corta no puede expresar la mayoría de los colores. Solo son alcanzables 4.096 de los 16,7 millones, porque cada canal está limitado a los dieciséis valores 00, 11, 22 … ff. #4F46E5 no tiene forma de tres dígitos. La forma corta es una comodidad para números redondos, no un esquema de compresión.
El número no es el brillo, y esta es la gorda
He aquí el dato que sorprende a casi todos, y que causa errores reales en sistemas de diseño reales. #808080 está numéricamente justo a mitad de camino entre #000000 y #FFFFFF. No está a mitad de camino en brillo. Emite alrededor del 21,6% de la luz que emite el blanco.
La razón es que sRGB —el espacio de color en el que vive todo código hexadecimal de la web— está codificado en gamma en lugar de ser lineal. La codificación dedica deliberadamente más valores disponibles a los tonos oscuros, porque la visión humana es mucho más sensible a las diferencias ahí abajo. Así que los números están espaciados perceptualmente, no físicamente. El gris que emite de verdad la mitad de luz que el blanco ronda #BCBCBC, que escrito así no se parece en nada a un gris "medio".
Esto importa en cuanto haces aritmética con colores. Promediar #000000 y #FFFFFF sumando los canales y dividiendo entre dos da #808080: un color con el 21,6% de la luminancia del blanco, presentado como si fuera el punto medio. Lo mismo en espacio lineal da #BCBCBC. Por eso los degradados ingenuos entre colores saturados atraviesan una banda oscura y turbia, por eso desenfocar y redimensionar imágenes en espacio gamma las oscurece, y por eso código de mezcla que parece obviamente correcto produce resultados que parecen sutilmente equivocados.
Ocho dígitos, y lo que esta herramienta no hace
El CSS Color Module Level 4 añadió un canal alfa al hexadecimal: #RRGGBBAA, donde el último par es la opacidad: #FF0000 80 es rojo al 50%. También hay una forma corta de cuatro dígitos, #RGBA, que se expande igual. Todos los navegadores actuales soportan ambas.
Esta herramienta maneja seis dígitos y tres, y ahí se detiene: la entrada está limitada a siete caracteres incluida la almohadilla. Si trabajas con transparencia, rgba() o el moderno rgb(255 0 0 / 50%) separado por espacios es de todos modos la notación más clara, porque una opacidad escrita como par hexadecimal es ilegible para cualquiera, tú incluido dentro de seis meses.
Ambas notaciones describen sRGB, y eso ya es una limitación
Un código hexadecimal no lleva información sobre qué espacio de color quiere decir; la web simplemente acordó que es sRGB, un estándar definido en 1996 en torno a las capacidades de los monitores de tubo. Eso funcionaba mientras todas las pantallas eran más o menos iguales. Funciona menos bien ahora que la mayoría de móviles y portátiles pueden mostrar un rango de colores notablemente más amplio.
Por eso el CSS ganó funciones de color como oklch() y color(display-p3 …). Pueden expresar colores saturados que ningún código hexadecimal alcanza: un rojo más vivo que #FF0000. Si el rojo de tu marca se ve apagado en una pantalla moderna, ese es el techo con el que has chocado, y ningún ajuste de dígitos hexadecimales lo superará. Para el trabajo cotidiano de interfaz, eso sí, sRGB sigue siendo el denominador común seguro, y el hexadecimal sigue siendo la forma más corta de escribirlo.
Preguntas frecuentes
¿Se envía algo a un servidor?
No. Esta herramienta está marcada como "client": la conversión son unas pocas líneas de aritmética ejecutándose en la pestaña de tu navegador. No se transmite nada y no se guarda nada.
¿Por qué el punto medio entre dos de mis colores se ve mal?
Casi seguro que es el problema de gamma descrito arriba. Promediar valores hexadecimales trata los números sRGB como si fueran cantidades de luz, y no lo son: están codificados perceptualmente. Para mezclar dos colores correctamente, convierte cada canal a luz lineal, promedia allí y vuelve a convertir. O usa un espacio de color pensado para ello: interpolar en Oklch da resultados suaves sin la banda turbia, y el CSS ya lo soporta directamente en los degradados.
¿Es mejor hexadecimal que rgb()?
Son idénticos en lo que pueden expresar, así que es cuestión de legibilidad. El hexadecimal es más corto y domina las herramientas de diseño, por eso la mayoría de los códigos lo usan. rgb() es más fácil de razonar cuando un valor viene de una variable o de un cálculo, y la sintaxis moderna rgb(255 0 0 / 50%) maneja el alfa de forma más legible de lo que un hexadecimal de ocho dígitos lo hará jamás. La coherencia dentro de un código importa más que la elección en sí.
¿Importan las mayúsculas de las letras?
No. #FF0000 y #ff0000 son el mismo color para cualquier analizador. La minúscula es la convención más común en CSS y lo que producen la mayoría de los formateadores; la mayúscula es más común en herramientas de diseño. Elige una y deja que un formateador la imponga, porque mezclar mayúsculas en un código hace los colores más difíciles de buscar de lo que tiene derecho a ser.
¿Cómo consigo una versión más clara u oscura de un color?
No multiplicando los canales hexadecimales, que es el movimiento intuitivo y produce los resultados turbios descritos arriba. Convierte a HSL o, mejor, a Oklch, ajusta la luminosidad y vuelve a convertir. Oklch merece la curva de aprendizaje aquí porque su eje de luminosidad es perceptualmente uniforme: añadir diez puntos de luminosidad parece el mismo paso sin importar el tono de partida, que es exactamente lo que necesita una escala de color en un sistema de diseño y exactamente lo que HSL no te da.