Convertir HEX a RGB Hexadecimal ↔ Red Green Blue Gratis En línea Seguro
Escriba un valor en HEX y léalo al instante en RGB. La cuenta se hace en su navegador, no se envía nada a ninguna parte, y de qué depende el resultado está escrito más abajo en vez de darse por supuesto.
No se sube nada
De dónde vienen estas notaciones
El hexadecimal y el RGB son lo mismo escrito dos veces. Un color de pantalla son tres números —cuánta luz roja, verde y azul emitir—, cada uno de 0 a 255, es decir un byte; el hexadecimal escribe sencillamente esos bytes en base dieciséis, de modo que #FF8800 y rgb(255, 136, 0) son la misma orden al mismo píxel. El HSL se inventó porque ninguno de los dos es legible para un humano: da el tono como un ángulo en una rueda de color, con saturación y luminosidad en porcentajes, así que un diseñador puede aclarar algo sin recalcular tres cifras. El CMYK pertenece a otro mundo por completo: a la tinta, no a la luz. Es sustractivo, construido con cuatro planchas de impresión, y no alcanza todos los colores de una pantalla, porque la pantalla emite luz mientras que el papel solo la refleja.
Dónde se las encuentra
El hexadecimal es lo que se teclea en una hoja de estilo y lo que una herramienta de diseño le entrega. El RGB aparece dondequiera que un color necesite aritmética: degradados, transparencia, código que calcula un matiz. Al HSL se recurre al ajustar una paleta a mano, porque los cambios que uno quiere suelen ser cambios de uno de sus tres números. El CMYK es lo que pide la imprenta, y convertir a él es el instante en que un diseño deja de ser luz y pasa a ser tinta.
Preguntas frecuentes
¿Por qué mi resultado CMYK difiere del que me da la imprenta?
Porque no existe una única conversión correcta. La aritmética de esta página es la simple, independiente del dispositivo, y es la respuesta adecuada cuando se necesita un punto de partida o un equivalente aproximado. Una imprenta convierte mediante un perfil de color que tiene en cuenta la tinta, el papel y la máquina concretos, y el mismo color RGB dará valores CMYK distintos en estucado brillante que en papel sin estucar. Para lo que deba coincidir, pida a la imprenta su perfil en vez de fiarse de una fórmula.
¿Por qué algunos colores de pantalla no se pueden imprimir?
Porque ambos no alcanzan los mismos colores. Una pantalla crea color sumando luz y puede dar un cian o un verde vivo y saturado que la tinta sencillamente no iguala; el papel crea color absorbiendo luz, y lo más claro que puede llegar a ser es el blanco de la página. El conjunto de colores al que llega cada uno se llama gama, y donde no se solapan, una conversión ha de elegir el color disponible más cercano. Por eso un color brillante en pantalla suele verse algo apagado impreso.
¿El resultado es exacto?
Donde ambas unidades se definen una por otra con números enteros, sí: la página lo dice encima de la cifra, y el único redondeo está en cuántos dígitos se muestran. Donde la razón no tiene decimal finito, la página muestra doce cifras significativas y califica la relación de aproximada en vez de fingir otra cosa.
¿Algo de lo que escribo sale de mi dispositivo?
No. La aritmética se hace en su navegador; no se sube nada, y tampoco hay servidor que lo reciba. Cargada una vez, la página sigue funcionando con la red apagada.
Por qué se convierte HEX a RGB
Una herramienta de diseño le da un color como #5A4632. Una hoja de estilos, un script de canvas, una biblioteca de gráficos o un programa de gráficos lo piden como rgb(90, 70, 50). Son el mismo color, y el trabajo de pasar de una escritura a la otra surge todo el tiempo: una guía de marca enumera códigos hexadecimales y su código necesita números para calcular un tono más claro, un cliente envía un color de un logotipo y usted tiene que rellenar un rgba() con transparencia, una biblioteca acepta solo tres valores por separado. Convertir HEX a RGB es una tarea pequeña, y un convertidor fiable le ahorra hacer aritmética en base dieciséis de cabeza y equivocarse.
La conversión es exacta, algo que no es cierto de toda conversión de color. El hexadecimal y rgb() son dos escrituras de los mismos tres números, las cantidades de luz roja, verde y azul que una pantalla debe emitir, cada una de 0 a 255. No se aproxima nada, y un viaje de ida y vuelta devuelve lo que se tenía al principio. Esta página lo hace en su navegador, y no se sube nada. Más abajo encontrará cómo los dígitos hexadecimales se asignan a los tres números, cómo se traslada la transparencia, qué hace la forma abreviada, los límites de sRGB y las situaciones en las que los desarrolladores y diseñadores necesitan convertir HEX a RGB.
Cómo funciona la conversión
Tres pares de dígitos se convierten en tres números
Un color hexadecimal es un signo de almohadilla seguido de seis dígitos hexadecimales, que se leen por pares: el primer par es el rojo, el segundo el verde, el tercero el azul. Cada par es un número en base dieciséis entre 00 y FF, que es de 0 a 255 en el sistema decimal que usa cada día. Así, #5A4632 se divide en 5A, 46 y 32. 5A es 5 × 16 + 10 = 90, 46 es 4 × 16 + 6 = 70, y 32 es 3 × 16 + 2 = 50. El color es rgb(90, 70, 50), que es el ejemplo con el que empieza la página.
Por qué los dígitos van de 0 a F
La base dieciséis necesita dieciséis símbolos, así que después del 9 vienen las letras de la A a la F, que representan de 10 a 15. Un par de tales dígitos da 16 × 16 = 256 valores, exactamente lo que cabe en un byte. Un color de pantalla son tres bytes, y el hexadecimal es simplemente una forma compacta de escribirlos: seis caracteres en lugar de tres números con comas y paréntesis.
Mayúsculas y minúsculas
#5a4632 y #5A4632 son el mismo color. CSS acepta cualquiera, y este convertidor también. Elija un convenio para un proyecto y respételo, ya que mezclar mayúsculas y minúsculas dificulta buscar en una hoja de estilos.
Qué conserva la conversión y qué no puede
Conserva el color, exactamente
El hexadecimal y rgb() son dos escrituras de los mismos tres números, de 0 a 255 para el rojo, el verde y el azul, así que no se aproxima nada y un viaje de ida y vuelta devuelve lo que se tenía al principio. Convierta HEX a RGB y de vuelta, y tendrá el mismo código con el que empezó, con la posible excepción de las mayúsculas.
Traslada la transparencia
Un cuarto valor para la transparencia también se traslada: #RRGGBBAA se convierte en rgba(), y viceversa. El último par es el canal alfa, de 00, totalmente transparente, a FF, totalmente opaco. Así, #5A463280 es rgba(90, 70, 50, 0.5), ya que 80 en hexadecimal es 128, y 128 de 255 es aproximadamente la mitad. Todos los navegadores actuales aceptan ocho dígitos.
No puede describir colores fuera de sRGB
Ambas escrituras describen sRGB, el espacio de color que una pantalla usa desde hace treinta años. No pueden describir un color fuera de él, para lo cual existen las notaciones CSS más nuevas, lab(), oklch() y color(). Las pantallas modernas pueden mostrar colores más saturados de los que contiene sRGB, y un diseñador que eligió un color así en una herramienta de gama amplia lo verá recortado a sRGB cuando se escriba como hexadecimal.
La forma abreviada se expande, no se conserva
La forma abreviada se expande en lugar de conservarse: #abc vuelve como #AABBCC, que es el mismo color escrito de la manera larga. Cada dígito se duplica. Eso significa que puede pegar un código de tres dígitos y obtener los números correctos, pero no puede recuperar la escritura corta a partir de la larga con solo mirarla, sino únicamente comprobando que cada par se repite.
Colores comunes y sus números
Unos cuantos que recordar
El blanco es #FFFFFF, que es rgb(255, 255, 255): las tres luces a plena potencia. El negro es #000000, rgb(0, 0, 0): nada de luz. El rojo puro es #FF0000, el verde #00FF00 y el azul #0000FF. Un gris medio es cualquier código con tres pares iguales, como #808080, que es rgb(128, 128, 128). Los pares iguales siempre significan gris, porque cantidades iguales de las tres luces no dan matiz.
Leer un código de un vistazo
Una vez que conoce el patrón puede estimar un color a partir de sus dígitos hexadecimales. Un código que empieza con un primer par alto es rojizo, un par central alto es verdoso, un último par alto es azulado. #FF8800 es mucho rojo, algo de verde y nada de azul, que es naranja. No necesita una herramienta para eso, pero sí la necesita para los números exactos.
Cómo convertir HEX a RGB aquí
Escriba o pegue el código hexadecimal
Introduzca el color en el primer campo, con o sin el signo de almohadilla. Se aceptan las formas de tres, seis y ocho dígitos.
Lea el valor rgb
La respuesta aparece al instante en el otro campo, en la forma rgb(90, 70, 50), o rgba() si el código llevaba transparencia. La página muestra la frase #5A4632 = rgb(90, 70, 50) para que pueda comprobarlo de un vistazo.
Cópielo en su código
Pegue el resultado en la hoja de estilos, el script o la herramienta que lo pidió. Si necesita los tres números por separado, son los que están entre paréntesis.
De dónde vienen estas notaciones
Hexadecimal y RGB son lo mismo escrito dos veces
Un color de pantalla son tres números, cuánta luz roja, verde y azul emitir, cada uno de 0 a 255, que es un byte. El hexadecimal simplemente escribe esos bytes en base dieciséis, así que #FF8800 y rgb(255, 136, 0) son la misma instrucción para el mismo píxel.
HSL y CMYK
HSL se inventó porque ninguno de los dos es legible para un ser humano: da el matiz como un ángulo alrededor de una rueda de colores, con la saturación y la luminosidad como porcentajes, de modo que un diseñador puede aclarar algo sin recalcular tres cifras. CMYK pertenece a un mundo totalmente distinto, la tinta en lugar de la luz. Es sustractivo, construido con cuatro planchas de impresión, y no puede alcanzar todos los colores que una pantalla puede, porque una pantalla emite luz mientras que el papel solo la refleja. Para esos, vea HEX a HSL y HEX a CMYK.
Dónde se los encuentra
En las hojas de estilos
El hexadecimal es lo que se escribe en una hoja de estilos y lo que entrega una herramienta de diseño. RGB aparece dondequiera que un color necesita aritmética: degradados, transparencia, código que calcula un tono. Conocer ambas escrituras, y poder pasar de una a otra, forma parte del trabajo diario de front-end.
En scripts y dibujo en canvas
El código de dibujo suele querer los tres números por separado, para mezclar dos colores, oscurecer uno en una cantidad fija o comprobar si un píxel coincide con un objetivo. Convertir HEX a RGB le da los números directamente.
En herramientas de gráficos e imagen
Los editores de imágenes suelen mostrar un color como tres números o como un código hexadecimal, y permiten escribir cualquiera de los dos. Pasar de uno a otro permite reproducir un color de una página web en un programa que quiere números.
En documentación y guías de marca
Una guía de marca puede enumerar un color en hexadecimal para la web, en RGB para pantallas y en CMYK para impresión. Hacer que los dos primeros concuerden es cuestión de una conversión, y es el tipo de comprobación que atrapa una errata antes de que se imprima en mil folletos.
Usos prácticos de la forma RGB
Transparencia sin un segundo color
Con rgba(90, 70, 50, 0.5) obtiene el color a media intensidad, de modo que lo que hay detrás se transparenta. Es la forma estándar de hacer superposiciones, sombras y fondos teñidos a partir de un color de marca sin inventar uno nuevo.
Calcular tonos más claros y más oscuros
Para hacer un estado de pasar el ratón algo más oscuro, un script puede restar una cantidad fija a cada uno de los tres números. Hacer lo mismo con una cadena hexadecimal es incómodo; con rgb es simple aritmética. Si necesita un ajuste basado en el matiz, convierta HEX a HSL en su lugar.
Comprobaciones de contraste
Las herramientas de accesibilidad calculan el contraste entre dos colores a partir de sus valores de rojo, verde y azul. Tener los números le permite hacer el cálculo usted mismo, o pegarlos en un verificador, para confirmar que el texto sobre un fondo es legible.
Trampas al convertir HEX a RGB
Olvidar el par alfa
Un código de ocho dígitos lleva la transparencia en los dos últimos. Si los quita, la pierde. Compruebe la longitud del código antes de decidir que el resultado es el color.
Confundir el orden
El hexadecimal es rojo, verde, azul. Unos pocos formatos, y algunas API gráficas antiguas, usan azul, verde, rojo. Si un color sale mal en un programa concreto, compruebe su orden de canales.
Copiar de una captura de pantalla
Un color leído de una captura de pantalla es el color tras la gestión de color de la pantalla y cualquier compresión. Puede diferir ligeramente del color del archivo original. Use el archivo de diseño cuando pueda.
Suponer que las pantallas coinciden
Dos pantallas muestran el mismo código algo distinto. Los números son exactos; lo que usted ve depende de la pantalla y de su perfil.
Preguntas que la gente se hace antes de convertir
¿Qué es #FF0000 en RGB?
rgb(255, 0, 0), rojo puro.
¿Qué es #FFFFFF en RGB?
rgb(255, 255, 255), blanco.
¿Puedo convertir un código de tres dígitos?
Sí. Cada dígito se duplica: #09C se convierte en #0099CC, que es rgb(0, 153, 204).
¿Es exacta la conversión?
Sí. Son dos escrituras de los mismos tres números.
¿Se sube mi color?
No. La aritmética se ejecuta en su navegador y no se envía nada a ninguna parte.
¿Cómo vuelvo atrás?
Con RGB a HEX, que escribe los tres números como un código hexadecimal.
Elegir con acierto al convertir HEX a RGB
Sepa lo que necesita después
Si necesita transparencia, rgba() es la forma natural. Si necesita ajustar la luminosidad o el matiz, HSL es más fácil. Si el color va a imprimirse, CMYK es el siguiente paso, con las salvedades que lleva esa conversión. Vea RGB a CMYK.
Conserve el hexadecimal como maestro
Para los colores de una paleta de marca, conserve el código hexadecimal como referencia. Es corto, inequívoco y se entiende en todas partes. Derive de él las demás formas cuando las necesite.
Use propiedades personalizadas
En CSS, defina los colores una vez, como --brand: #5A4632, y refiérase a ellos por su nombre. Si necesita los números para rgba(), defina también --brand-rgb: 90 70 50. La conversión se hace entonces una sola vez.
CSS moderno y la forma RGB
Sintaxis separada por espacios
El CSS actual acepta rgb() con espacios y una barra para la transparencia, como en rgb(90 70 50 / 50%). Los números son los mismos que en la forma con comas, así que el resultado de una conversión sirve en ambas. Los navegadores más antiguos y algunas herramientas esperan las comas, así que la forma con comas sigue siendo la elección segura cuando no se sabe dónde se usará el color.
Porcentajes y fracciones
RGB también puede escribirse con porcentajes, como rgb(35% 27% 20%), donde el 100 por ciento es 255. La página da números enteros porque es lo que almacena el hexadecimal y lo que esperan la mayoría de las herramientas. Si necesita porcentajes, divida cada número entre 255 y multiplique por 100.
Propiedades personalizadas para los tres números
Un truco común es guardar solo los tres números en una propiedad personalizada, --brand-rgb: 90 70 50, y usarla como rgb(var(--brand-rgb) / 0.5). Permite que una sola definición sirva tanto para usos sólidos como translúcidos. Cuando convierta HEX a RGB con este fin, copie solo los números de la respuesta.
Trabajar con el color en la práctica
Compruebe con la guía de marca
Si una guía de marca da tanto el hexadecimal como el rgb del mismo color, convierta uno y compárelo con el otro. Una discrepancia suele significar una errata en la guía, y encontrarla antes de usarla en todas las páginas vale el minuto que lleva.
Mantenga una paleta como lista corta
La mayoría de los sitios usan de cinco a ocho colores. Escríbalos en una nota en ambas formas. Cada vez que necesite convertir HEX a RGB para un nuevo componente, puede consultarlo en lugar de calcularlo de nuevo, y la paleta se mantiene coherente.
Nombre los colores por su función
Nombres como primario, superficie y advertencia sobreviven mejor a los rediseños que nombres como verde o marrón. La conversión le da los números; el nombre dice para qué sirven.
Convertidores relacionados
La misma familia de herramientas cubre las conversiones vecinas. Para volver atrás, use RGB a HEX. Para los colores descritos por el matiz, están a mano HEX a HSL y HSL a HEX, y para la impresión, HEX a CMYK, CMYK a HEX y CMYK a RGB. Para los tamaños de la misma hoja de estilos, px a rem y px a em hacen con las longitudes lo que esta página hace con los colores.
Un ejemplo resuelto
Digamos que el color de su marca es #1E7A5C y quiere una versión translúcida para el fondo de una tarjeta. Escribe el código y lee rgb(30, 122, 92). En la hoja de estilos escribe background: rgba(30, 122, 92, 0.12), un tinte muy claro del mismo verde, y un borde de rgba(30, 122, 92, 0.4). La tarjeta se asienta cómodamente sobre una página blanca y sobre una gris, porque la transparencia deja pasar la página. Cuando más tarde cambia el color de la marca, sustituye los tres números en una sola propiedad personalizada y todos los tintes la siguen.
Una breve lista de comprobación
Antes de convertir
Compruebe la longitud del código: tres, seis u ocho dígitos. Decida si necesita transparencia.
Mientras convierte
Pegue el código, lea el valor rgb y cópielo con sus paréntesis, o solo los tres números.
Después de convertir
Pruebe el color en contexto, sobre el fondo real, y compruebe el contraste de cualquier texto que se asiente sobre él.
Errores comunes
Perder el par de transparencia
Ocho dígitos significan alfa. Consérvelo o conviértalo a rgba().
Confundir el orden de los canales
El hexadecimal empieza por el rojo. Algunas herramientas esperan el azul primero.
Tratar la pantalla como la verdad
Los números son exactos. El aspecto depende de la pantalla.
Sus colores se quedan en su dispositivo
El cálculo ocurre en local. Sus valores los usa su propio navegador y no se envía nada a ninguna parte. No hay nada que borrar después ni cuenta que crear. Esa es la forma sencilla de convertir HEX a RGB.
Resumen
Para convertir HEX a RGB aquí, escriba o pegue el código hexadecimal y lea el valor rgb al instante. La conversión conserva el color exactamente: el hexadecimal y rgb() son dos escrituras de los mismos tres números, de 0 a 255 para el rojo, el verde y el azul, así que no se aproxima nada y un viaje de ida y vuelta devuelve lo que se tenía al principio. Un cuarto valor para la transparencia también se traslada, ya que #RRGGBBAA se convierte en rgba(), y viceversa. Ambas escrituras describen sRGB, así que no pueden describir colores fuera de él, y la forma abreviada se expande en lugar de conservarse: #abc vuelve como #AABBCC. No se sube nada.