Convertidor HEX a RGB
Convierte códigos de color HEX a valores RGB y viceversa.
Valores CSS
#2b7190rgb(43, 113, 144)hsl(201, 54%, 37%)hsv(201, 70%, 56%)Cómo funciona la conversión HEX a RGB
Los colores HEX usan una cadena hexadecimal de seis dígitos (#RRGGBB) donde cada par representa los canales rojo, verde y azul. Los valores van de 00 (0) a FF (255).
El RGB usa tres números decimales (0 a 255) para cada canal. Por ejemplo, #2b7190 se descompone en R:43, G:111, B:142.
Preguntas frecuentes
¿Cómo convertir HEX a RGB manualmente?
Divide el código hex en tres pares (p. ej. #FF8800 → FF, 88, 00) y convierte cada par de base 16 a base 10: FF = 255, 88 = 136, 00 = 0. El resultado es rgb(255, 136, 0).
¿Y los códigos HEX de 3 dígitos?
El HEX de 3 dígitos es un atajo en el que cada dígito se duplica: #F80 = #FF8800. Este convertidor gestiona ambos formatos automáticamente.
¿Cuándo usar HEX o RGB?
El HEX es más compacto y popular en CSS. El RGB es preferible cuando necesitas manipular los canales individualmente en código o usar rgba() para la transparencia.
Qué es en realidad la notación hexadecimal
Un color hexadecimal es una representación en base 16 de un color RGB de 24 bits. Seis dígitos después de la #, tres pares: rojo, verde, azul. Cada par es un número de 00 a ff: un byte (8 bits) por canal, tres canales, 24 bits en total. Eso es exactamente lo suficiente para codificar cualquiera de los 2²⁴ = 16.777.216 colores discretos. El rango de «color verdadero» o «millones de colores» que ha sido el estándar de las pantallas de consumo desde finales de la década de 1990.
El signo de almohadilla no forma parte del valor: es un prefijo sintáctico que le dice al analizador de CSS «lo que sigue es un color hexadecimal, no el nombre de una variable». Sin él, una cadena como ff0000 podría resultar ambigua para el analizador léxico. Los dígitos 0-9 mantienen su significado decimal; las letras A-F (sin distinción de mayúsculas y minúsculas en CSS) representan del 10 al 15 en decimal. Así, f es 15 y ff es 15 × 16 + 15 = 255.
Las matemáticas, con ejemplos resueltos
Cada par hexadecimal de dos dígitos se corresponde con un decimal de 0 a 255 mediante la fórmula (high_digit × 16) + low_digit, donde cada dígito se interpreta como 0-15 (de A=10 a F=15):
FF→ (15 × 16) + 15 = 25588→ (8 × 16) + 8 = 13600→ 02B→ (2 × 16) + 11 = 43 (el canal rojo de la muestra predeterminada#2b7190de arriba)71→ (7 × 16) + 1 = 11390→ (9 × 16) + 0 = 144
En JavaScript, el análisis completo cabe en dos líneas. const n = parseInt(hex.slice(1), 16); seguido de const [r, g, b] = [(n >> 16) & 0xff, (n >> 8) & 0xff, n & 0xff];: ese es, en esencia, el código sustancial de todo conversor de hexadecimal a RGB de la web. La dirección inversa es '#' + ((r << 16) | (g << 8) | b).toString(16).padStart(6, '0').
Formas abreviadas de 3, 4 y 8 dígitos
CSS permite formas abreviadas cuando los canales son simétricos:
- 3 dígitos (
#RGB): cada dígito se duplica para formar el código equivalente de 6 dígitos.#F00→#FF0000;#FFF→#FFFFFF;#369→#336699. La forma es cómoda para colores «redondos» agradables para el diseñador, pero solo puede expresar 4096 valores únicos, no 16,7 millones: no hay forma abreviada para#778899porque los pares difieren. - 8 dígitos (
#RRGGBBAA): igual que el de 6 dígitos más un par alfa.00= totalmente transparente,FF= totalmente opaco,80≈ 50 % de opacidad. Funcionalmente idéntico argba(255, 0, 0, 0.5), pero más compacto. - 4 dígitos (
#RGBA): forma abreviada por duplicación de la forma de 8 dígitos.#F00A→#FF0000AA.
La forma abreviada de 3 dígitos ya existía en CSS Level 1 (1996). Las formas alfa de 4 y 8 dígitos llegaron mucho después, en CSS Color Module Level 4, con amplia disponibilidad entre navegadores desde alrededor de mediados de 2015.
Los colores con nombre y la historia de rebeccapurple
Antes de que el hexadecimal se convirtiera en el modismo predeterminado de la web, los colores con nombre eran la norma. HTML 4.01 (diciembre de 1999) especificó 16 colores con nombre, black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, aqua: basados en los 16 colores estándar de la paleta VGA de Windows. CSS 2.1 añadió orange como el decimoséptimo. CSS Color Module Level 3 adoptó después formalmente alrededor de 130 nombres adicionales del archivo rgb.txt de X11 (que Mosaic y los primeros Netscape heredaron de sus raíces en el X Window System), lo que elevó el total a aproximadamente 147-148 según cómo se cuenten alias como cyan/aqua y gray/grey.
CSS Color Module Level 4 añadió uno más, con una historia detrás. Rebecca Meyer era la hija de seis años de Eric A. Meyer, una autoridad temprana en CSS y participante del W3C. Murió de cáncer cerebral el 7 de junio de 2014, el día de su sexto cumpleaños. Eric escribió en su blog esa misma semana: «Llegó a los seis. Durante casi doce horas, tuvo seis años». Un miembro de la comunidad propuso añadir su color favorito, un púrpura berenjena intenso, hexadecimal #663399, como beccapurple; Eric aceptó con una condición: tenía que ser rebeccapurple, no beccapurple, porque la propia Rebecca había anunciado hacía poco que ya era demasiado mayor para el nombre de bebé. El Grupo de Trabajo de CSS aprobó el cambio el 22 de junio de 2014, dos semanas después de su muerte. WebKit y otros motores de navegador implementaron la compatibilidad en cuestión de días. Es el único color de CSS con el nombre de una persona, un homenaje discreto en todos los navegadores modernos.
sRGB: el espacio de color implícito de todo código hexadecimal
Cuando escribes #FF5733 en CSS, no solo estás especificando un número: lo estás especificando en el espacio de color sRGB. Esto es implícito; el navegador interpretará tu valor hexadecimal como sRGB salvo que uses una de las nuevas funciones color() para indicar lo contrario.
sRGB fue propuesto conjuntamente por Hewlett-Packard y Microsoft en 1996 y adoptado como IEC 61966-2-1:1999, un espacio de color único e independiente del dispositivo, diseñado en torno a la curva de respuesta del monitor CRT típico de la época. Comparte sus cromaticidades primarias con ITU-R BT.709 (el estándar de HDTV) en el punto blanco D65 (6500 K). El W3C definió explícitamente sRGB como el espacio de color predeterminado de la web; todos los códigos hexadecimales, todos los valores rgb(), todas las imágenes JPEG clásicas y PNG sin etiquetar se interpretan como sRGB.
Limitación honesta: sRGB cubre aproximadamente el 35,9 % del diagrama de colores visibles CIE 1931. Hay colores que existen en la naturaleza, que pueden mostrarse en las modernas pantallas OLED de los móviles, pero que no se pueden especificar en notación hexadecimal: verdes esmeralda saturados, vivos tonos rojo-naranja de atardecer, pinturas fluorescentes. CSS Color Module Level 4 introdujo nuevos espacios para ellos, accesibles mediante la función color(): Display P3 (usado por las pantallas de Apple desde el iPhone 7 y el iMac de finales de 2015, alrededor de un 25 % más amplio que sRGB) y Rec. 2020 (el estándar de difusión 4K/8K, alrededor del 75 % de CIE 1931). En los dispositivos más antiguos que solo admiten sRGB, el navegador recurre a una alternativa de forma adecuada.
Alternativas modernas: HSL, HWB, OKLCH
El hexadecimal es compacto, pero no es intuitivo para las personas: no puedes mirar #3DE7C9 y adivinar el tono. CSS ha ido añadiendo de forma progresiva notaciones funcionales que se ajustan a cómo piensan las personas sobre el color:
- HSL: tono, saturación, luminosidad. El tono es un ángulo de 0-360°. Introducido en CSS Color Module Level 3 (2011). Deslizadores intuitivos, pero la luminosidad no es perceptualmente uniforme: el amarillo con L=50 % parece mucho más brillante que el azul con la misma luminosidad.
- HWB: tono, blancura, negrura. Más fácil para el modelo mental de un pintor («un azul con un poco de blanco y un toque de negro»). La misma gama que HSL.
- LCH / Lab: perceptualmente uniforme; los cambios numéricos iguales se corresponden con cambios percibidos iguales. Admite la amplia gama P3+.
- OKLCH: el más reciente, presentado por Björn Ottosson en diciembre de 2020. Corrige la distorsión de tono de CIELAB y los problemas de degradado en colores oscuros. Los números de luminosidad iguales se ven igual de brillantes en todos los tonos. La interpolación lineal en OKLCH produce degradados visualmente suaves, sin los puntos medios de gris turbio que se obtienen de
linear-gradient(red, green)en sRGB. Tailwind CSS v4.0 (enero de 2025) trasladó toda su paleta de colores predeterminada dergb()aoklch(). La compatibilidad de los navegadores es amplia desde alrededor de 2023.
OKLCH es la dirección a largo plazo del color en CSS, pero los códigos hexadecimales seguirán siendo la lengua franca de las herramientas de diseño, las especificaciones de marca y los fragmentos copiados y pegados: son cortos, seguros para copiar y pegar en cualquier medio de texto, y universalmente comprendidos.
El origen de la RGB aditiva en 1861
El modelo RGB se remonta a la teoría tricromática de la visión de Young-Helmholtz (principios del siglo XIX), que propuso que el ojo humano tiene tres tipos de receptores de color correspondientes al rojo, el verde y el azul. James Clerk Maxwell lo demostró experimentalmente el 17 de mayo de 1861 en la Royal Institution de Londres. Proyectó tres fotografías en blanco y negro de una cinta de tartán (una tomada a través de un filtro rojo, otra verde y otra azul) mediante tres proyectores equipados con esos mismos filtros de color; la imagen recombinada en la pantalla mostró la cinta aproximadamente a todo color. En general, se considera la primera fotografía en color. El mismo principio aditivo RGB impulsa todas las pantallas CRT, LCD, OLED y de plasma jamás fabricadas: cada píxel es una tríada de subpíxeles rojo, verde y azul de brillo variable de forma independiente, y tu retina los mezcla en un color percibido.
Más preguntas
¿El hexadecimal distingue entre mayúsculas y minúsculas?
No. #abcdef y #ABCDEF son idénticos para el analizador. La especificación de CSS es explícita: los valores hexadecimales de color no distinguen entre mayúsculas y minúsculas. La combinación de mayúsculas y minúsculas como #FfAa00 también es válida, aunque poco común en el código de producción. (No debe confundirse con los fragmentos de URL, donde la almohadilla inicial es un concepto sintáctico totalmente distinto).
¿Por qué al promediar dos códigos hexadecimales se obtiene un gris turbio?
Porque los valores hexadecimales están codificados con gamma (se aplica la función de transferencia de sRGB), y promediar en el espacio gamma no es lo mismo que promediar en luz lineal. El ejemplo clásico es linear-gradient(red, green), que produce un punto medio verde oliva turbio: las matemáticas son correctas en el espacio codificado con gamma, pero visualmente erróneas. Las funciones de color modernas como OKLCH resuelven esto interpolando en un espacio perceptualmente uniforme, razón por la cual producen degradados más suaves.
¿Por qué no hay un código hexadecimal para los colores «neón» o «fluorescentes»?
Porque la notación hexadecimal es implícitamente sRGB, y sRGB solo cubre alrededor del 36 % de los colores que el ojo humano puede ver. Muchos colores vivos (verdes esmeralda saturados, rojo-naranjas brillantes, pinturas fluorescentes) existen en la naturaleza y pueden mostrarse en las modernas pantallas de gama amplia, pero quedan fuera del cubo sRGB. Para alcanzarlos necesitas color(display-p3 …), color(rec2020 …) u oklch() con valores de croma altos. Esos colores no tienen equivalente hexadecimal.
¿Qué era la «paleta segura para web»?
A finales de la década de 1990, cuando muchos monitores estaban limitados a 256 colores, los diseñadores se ceñían a una paleta de 216, la intersección de las paletas de sistema de Windows y de Mac OS. Los 216 provenían de un cubo de 6×6×6: cada uno de R, G y B tomaba solo los valores 00, 33, 66, 99, CC, FF. Lynda Weinman la popularizó en su libro de 1996 Designing Web Graphics. Quedó obsoleta alrededor del año 2000, cuando el color de 24 bits llegó al hardware de consumo. Hoy es pura curiosidad histórica, todavía visible de vez en cuando en códigos hexadecimales antiguos como #CC0033 o #993366.
¿Se envía algo a un servidor?
No. Hex-to-RGB son dos líneas de aritmética en JavaScript de función pura. La conversión se ejecuta localmente; nada del color que introduces se sube a ningún sitio; la página funciona sin conexión una vez cargada.