Convertidor de Color HEX a RGB

HEX y RGB: dos formas de escribir el mismo color

Cada color que ves en una pantalla se mezcla a partir de tres luces: rojo, verde y azul. Sube las tres al máximo y obtienes blanco; apágalas todas y obtienes negro. HEX y RGB son simplemente dos notaciones para describir el brillo que debe tener cada uno de esos tres canales. Apuntan exactamente al mismo color, así que un buen conversor solo traduce entre los dos sistemas de escritura sin alterar nunca el tono real. Eso es lo que hace esta herramienta, completamente en tu navegador, mientras te muestra una muestra de color en vivo para que confirmes el resultado con tus propios ojos.

Cómo leer un código hex

Un color hex se ve así: #1E90FF. El símbolo de almohadilla solo marca el inicio; los seis caracteres que le siguen son tres pares, escritos con el patrón #RRGGBB. El primer par es rojo, el segundo es verde, el tercero es azul. Cada par es un número escrito en hexadecimal, es decir, en base 16, donde los dígitos van del 0 al 9 y luego A, B, C, D, E, F representan del 10 al 15. Un par puede contener valores desde 00 (el canal totalmente apagado) hasta FF (totalmente encendido). En decimal normal ese rango es exactamente de 0 a 255, la misma escala que usa RGB. Con 256 niveles posibles por canal, la forma de seis dígitos puede describir 16.777.216 colores distintos.

Convertir en ambos sentidos, con un ejemplo resuelto

Para pasar de HEX a RGB, divide el código en sus tres pares y convierte cada uno de base 16 a decimal corriente. Toma #1E90FF. El par rojo es 1E: eso es 1 multiplicado por 16, más 14 (E), lo que equivale a 30. El par verde 90 es 9 multiplicado por 16, más 0, lo que equivale a 144. El par azul FF es 15 multiplicado por 16, más 15, lo que equivale a 255. Así que #1E90FF se convierte en rgb(30, 144, 255) — el conocido azul dodger.

Hacerlo al revés es el mismo proceso en sentido inverso. Toma cada número RGB y escríbelo como dos dígitos hex. El rojo puro, rgb(255, 0, 0), da FF, 00 y 00, que se unen en #FF0000. Algo que conviene recordar: si un valor es menor que 16, igualmente necesitas ambos dígitos, así que 5 se escribe 05 y no solo 5. El conversor se encarga de ese relleno por ti, pero hace tropezar a la gente cuando lo hace a mano.

Dónde se usa cada formato

HEX es el lenguaje cotidiano de la web. CSS, HTML y la mayoría del código que escribes recurren a los códigos hex porque son compactos y fáciles de copiar. RGB tiende a aparecer dentro de herramientas de diseño e imagen — Figma, Photoshop, Sketch e Illustrator suelen mostrar deslizadores o campos en el rango 0-255, y las apps de grabación de pantalla o de vídeo a menudo también esperan RGB. Así que con frecuencia tomas un código hex de una hoja de estilos y necesitas su forma RGB para escribirla en un panel de diseño, o al revés. Ese ida y vuelta es justamente la razón por la que un conversor resulta útil. Si necesitas crear todo un conjunto de tonos que combinen en lugar de traducir uno solo, nuestro generador de paletas de color es un mejor punto de partida, y encontrarás más utilidades como esta en herramientas para desarrolladores.

Alfa, opacidad y HSL

Ambas notaciones tienen una forma extendida que añade transparencia. RGB se convierte en rgba(30, 144, 255, 0.5), donde el cuarto valor es el alpha — 0 es totalmente transparente y 1 es totalmente sólido. HEX añade un cuarto par con el mismo propósito, dando un código #RRGGBBAA de ocho dígitos; 80, por ejemplo, es aproximadamente un 50 por ciento de opacidad. Algunos conversores también ofrecen HSL (matiz, saturación, luminosidad), que describe el color como lo haría una persona — eliges un matiz en la rueda y luego ajustas su viveza y su brillo. HSL es un modelo mental diferente más que una paleta diferente, así que puede ser más intuitivo cuando quieres aclarar o apagar un color sin malabarear tres números por separado.

Preguntas frecuentes