Convertir RGB a HEX Red Green Blue ↔ Hexadecimal Gratis En línea Seguro
Escriba un valor en RGB y léalo al instante en HEX. 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é convertir RGB a HEX
Un editor de imágenes, un selector de color del sistema operativo o una línea de código le da un color como tres números: 90, 70, 50. Una hoja de estilos, un archivo de tokens de diseño o un mensaje a un colega lo quiere como un único código corto: #5A4632. El paso entre ambos es lo que hace esta página. Convertir RGB a HEX es escribir los mismos tres números en base dieciséis, dos dígitos cada uno, y poner un signo de almohadilla delante. Es fácil de hacer para un solo color y tedioso para veinte, y es fácil equivocarse cuando un número necesita un cero a la izquierda o un dígito es una letra.
La conversión es exacta, algo que no es cierto de todas las conversiones de color. Hex y rgb() son dos grafías de los mismos tres números, las cantidades de luz roja, verde y azul que debe emitir una pantalla, cada una de 0 a 255. No se aproxima nada, y un viaje de ida y vuelta devuelve lo que se tenía al empezar. La página lo hace en su navegador y no se sube nada. A continuación encontrará cómo cada número se convierte en dos dígitos hexadecimales, cómo se traslada la transparencia, los límites de sRGB, los lugares donde la gente necesita convertir RGB a HEX y unos cuantos hábitos que mantienen coherentes los colores de un proyecto.
Cómo funciona la conversión
Cada número se convierte en dos dígitos hexadecimales
Tome rgb(90, 70, 50). Divida cada número entre dieciséis: 90 es 5 veces 16 más 10, y 10 es el dígito A, así que 90 se convierte en 5A. 70 es 4 veces 16 más 6, así que 46. 50 es 3 veces 16 más 2, así que 32. Junte los tres pares y añada el signo de almohadilla: #5A4632. La página lo hace por usted a medida que escribe, y muestra la frase rgb(90, 70, 50) = #5A4632 para que pueda comprobarlo.
Ceros a la izquierda
Cada par debe tener dos dígitos. Un número menor que 16 necesita un cero delante: 7 se convierte en 07, y 0 en 00. Así, rgb(0, 7, 255) es #0007FF, no #07FF, que significaría algo bastante distinto. Olvidar el cero es el error más común al hacer la conversión a mano.
El rango
Cada número debe estar entre 0 y 255. Un valor superior a 255 no puede escribirse con dos dígitos hexadecimales, y un valor negativo no tiene sentido. Si un cálculo de su código ha producido 270 o −5, límitelo primero al rango. El conversor hace lo mismo, para no producir nunca un código no válido.
Lo que la conversión conserva y lo que no puede
Conserva el color, exactamente
Hex y rgb() son dos grafías de los mismos tres números, de 0 a 255 para rojo, verde y azul, así que no se aproxima nada y un viaje de ida y vuelta devuelve lo que se tenía al empezar. Convierta RGB a HEX y de vuelta, y tendrá los números con los que empezó.
Traslada la transparencia
Un cuarto valor para la transparencia también se traslada: #RRGGBBAA pasa a rgba(), y viceversa. Una transparencia de 0.5 se convierte en el par 80, ya que la mitad de 255 es aproximadamente 128, que es 80 en hexadecimal. Así, rgba(90, 70, 50, 0.5) es #5A463280. El hexadecimal de ocho dígitos lo aceptan todos los navegadores actuales.
No puede describir colores fuera de sRGB
Ambas grafías describen sRGB, el espacio de color que una pantalla ha usado durante 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(). Si parte de un color de una herramienta de gama amplia, los tres números que copia ya son la versión sRGB, y el hexadecimal es fiel a ellos.
No conserva la forma abreviada
Allí donde un código podría escribirse con tres dígitos, como #AABBCC como #ABC, el conversor da la forma larga. La forma larga es siempre válida y es el mismo color; la forma corta es solo una comodidad para el lector.
Colores comunes y sus códigos
Unos pocos que recordar
rgb(255, 255, 255) es #FFFFFF, blanco: las tres luces a plena potencia. rgb(0, 0, 0) es #000000, negro: nada de luz. rgb(255, 0, 0) es #FF0000, rojo puro; rgb(0, 255, 0) es #00FF00 y rgb(0, 0, 255) es #0000FF. Cualquier color con tres números iguales es un gris, y su código tiene tres pares iguales: rgb(128, 128, 128) es #808080.
La costumbre de los colores seguros para la web
Las guías antiguas hablaban de colores seguros para la web, cuyos pares eran solo 00, 33, 66, 99, CC o FF. Pertenecen a los tiempos de las pantallas de 256 colores y no hay razón para que sobrevivan. Use el valor que quiera; la pantalla puede mostrarlos todos.
Cómo convertir RGB a HEX aquí
Escriba los tres números
Introduzca el color en el primer campo con la forma rgb(90, 70, 50), o con los números separados por comas o espacios. No se necesitan porcentajes; use números de 0 a 255.
Lea el código hexadecimal
La respuesta aparece al instante en el otro campo, empezando con un signo de almohadilla, en letras mayúsculas. Si dio un cuarto valor para la transparencia, el código tiene ocho dígitos.
Cópielo en su trabajo
Pegue el código en la hoja de estilos, en el archivo de tokens o en el mensaje. Añádalo a su nota de paleta para que la próxima conversión sea una consulta.
De dónde vienen estas notaciones
Hex 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. Hex 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 ninguna de las dos es legible para un humano: da el matiz como un ángulo alrededor de una rueda de color, con la saturación y la luminosidad como porcentajes, de modo que un diseñador puede aclarar algo sin volver a calcular tres cifras. CMYK pertenece a un mundo completamente distinto, la tinta en lugar de la luz. Es sustractivo, está hecho de cuatro planchas de impresión y no puede alcanzar todos los colores que una pantalla, porque una pantalla emite luz mientras que el papel solo la refleja. Vea HEX a HSL y RGB a CMYK.
Dónde se las encuentra
En la entrega del diseño
Un diseñador trabaja en un editor que muestra valores rgb o un selector; el desarrollador necesita hex para la hoja de estilos. Convertir RGB a HEX es el paso intermedio, y se hace para cada color de una paleta.
En scripts que calculan colores
Un script que mezcla dos colores u oscurece uno trabaja con números y termina con tres de ellos. Para usar el resultado en una hoja de estilos, o mostrarlo, debe escribirse como un código hexadecimal. Hacerlo a mano en el código son unas pocas líneas; comprobar el resultado con un conversor es más rápido.
En la visualización de datos
Las bibliotecas de gráficos aceptan colores como cadenas hexadecimales. Las paletas generadas por métodos numéricos salen como tríos rgb. Un paso de conversión convierte uno en otro.
En documentos y presentaciones
Los programas de ofimática muestran los colores como números RGB; los editores web quieren hex. Cuando un color de marca tiene que aparecer en ambos, la conversión los mantiene idénticos.
Trampas al convertir RGB a HEX
Olvidar el cero a la izquierda
Escribir 7 como 7 y no como 07 desplaza todos los dígitos siguientes. Use siempre dos dígitos por par.
Confundir el porcentaje con el rango de 0 a 255
rgb(35%, 27%, 20%) es otra grafía de los números, con el 100 por ciento siendo 255. Si su fuente usa porcentajes, conviértalos primero a 0 a 255: multiplique por 2.55.
Errores de redondeo en colores calculados
Un script que produce 127.5 debe decidir si es 127 o 128. La diferencia es invisible, pero crea dos códigos para lo que usted creía que era un solo color. Redondee del mismo modo en todas partes.
Tomar el color de una captura de pantalla
Un color leído de una captura de pantalla ha pasado por la gestión de color de la pantalla y quizá por compresión. Puede diferir en un paso o dos de la fuente. Use el archivo de diseño cuando pueda.
Preguntas que la gente se hace antes de convertir
¿Qué es rgb(255, 0, 0) en hexadecimal?
#FF0000, rojo puro.
¿Qué es rgb(0, 0, 0) en hexadecimal?
#000000, negro.
¿Puedo usar minúsculas en el código hexadecimal?
Sí. #5a4632 y #5A4632 son el mismo color. La página escribe en mayúsculas.
¿Es exacta la conversión?
Sí. Son dos grafías 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 HEX a RGB, que lee los tres pares como números.
Hábitos que mantienen coherentes los colores de un proyecto
Defina cada color una sola vez
Ponga su paleta en propiedades personalizadas, como --brand: #5A4632, y refiérase a los colores por su nombre. Cuando convierta RGB a HEX para un color nuevo, añade una línea, y todos los usos la siguen.
Elija una sola caja
Elija mayúsculas o minúsculas para los códigos hexadecimales y respete la elección. Una búsqueda de un color en el código es entonces fiable.
Registre el origen
Junto a cada color, anote de dónde vino: la guía de marca, un logotipo, una imagen muestreada. Cuando surja la pregunta de si un color es correcto, sabrá dónde comprobarlo.
Pruebe el contraste
Para texto sobre un fondo de color, compruebe la relación de contraste con una herramienta. Los números de la forma rgb alimentan directamente la fórmula, y la forma hexadecimal es lo que se escribe en la mayoría de los comprobadores.
Por qué 256 pasos y qué hay detrás de los números
Ocho bits para cada luz
Cada uno de los tres números se almacena en ocho bits, lo que permite 256 valores de 0 a 255. Los tres juntos dan 256 × 256 × 256, unos 16.7 millones de combinaciones, más de las que el ojo puede distinguir en la mayoría de las condiciones. Esa es la razón por la que los códigos hexadecimales tienen exactamente seis dígitos: dos para cada luz, ni más ni menos. Cuando convierte RGB a HEX está escribiendo tres bytes en la forma más compacta en que la gente pudo ponerse de acuerdo.
Por qué los pasos iguales no se ven iguales
Los números no son proporcionales a la luz que llega a su ojo. Las pantallas aplican una curva, próxima a una potencia de 2.2, de modo que los tonos oscuros reciben más de los 256 pasos que los brillantes, lo que conviene al ojo. Un paso de 10 a 20 parece un cambio mayor que un paso de 240 a 250. Para usted esto significa que promediar dos colores promediando sus números no da el color que vería al mezclar las luces, un hecho que importa cuando calcula degradados y mezclas en código.
Grises y la diagonal
Todos los grises están en la línea donde los tres números son iguales. Hay 256 de ellos, desde el negro en 0 hasta el blanco en 255. Si convierte RGB a HEX y los tres pares coinciden, sabe de inmediato que el color no tiene matiz. Un casi gris con pares que difieren en un paso o dos tiene un tinte tenue, que los diseñadores suelen usar para dar a un color neutro un toque de calidez o de frialdad.
Construir y comprobar una paleta
De un puñado de colores elegidos a una paleta
Una paleta típica tiene un color primario, un acento, un neutro para el texto, un neutro más claro para las superficies y uno o dos colores de señal para el éxito y el error. Elija cada uno en su herramienta de diseño, lea sus números rgb y convierta RGB a HEX para la hoja de estilos. Escríbalos como propiedades personalizadas con nombres que describan el papel, y la paleta estará lista para usarse en cada componente.
Contraste entre el texto y el fondo
El texto legible necesita suficiente diferencia de brillo entre las letras y su fondo. Las pautas de accesibilidad definen una relación de contraste calculada a partir de los valores rojo, verde y azul de los dos colores, y piden al menos 4.5 a 1 para el texto normal. Los comprobadores aceptan códigos hexadecimales, así que los códigos que produzca aquí pueden ir directamente a ellos. Compruebe cada pareja que piense usar, no solo el color primario sobre blanco.
Convertir una lista
Cuando tenga muchos colores que convertir, trabaje con ellos de uno en uno y pegue cada resultado en una tabla con su nombre y su uso. Lleva un minuto por color, y la tabla se convierte en la referencia de todo el proyecto. Si más adelante se ajusta un color, solo hay que cambiar su fila.
Mantener hex y rgb a la par
Si su proyecto guarda algunos colores como hex y otros como rgb, es fácil que se desajusten cuando alguien edita uno y olvida el otro. Elija uno como maestro, normalmente hex, y derive el otro con el conversor siempre que lo necesite.
Conversores relacionados
La misma familia de herramientas cubre las conversiones vecinas. Para volver, use HEX a RGB. Para los colores descritos por el matiz, HEX a HSL y HSL a HEX están a mano, y para la impresión, RGB a CMYK, CMYK a RGB y CMYK a HEX. Para los tamaños de la misma hoja de estilos, px a rem hace con las longitudes lo que esta página hace con los colores.
Un ejemplo resuelto
Digamos que un selector de color de un editor de imágenes le dice que el acento de una fotografía es rgb(214, 98, 56). Escribe los tres números y lee #D66238. En la hoja de estilos escribe --accent: #D66238 y lo usa para botones y enlaces. Un colega pregunta cuál es el color en la guía de marca, y usted le envía el código. Más adelante necesita una versión translúcida para un banner, y la convierte de vuelta con HEX a RGB para construir rgba(214, 98, 56, 0.15). Ambas conversiones son exactas, así que el banner tiene el mismo matiz que el botón.
Una breve lista de comprobación
Antes de convertir
Compruebe que cada número esté entre 0 y 255. Decida si necesita transparencia.
Mientras convierte
Escriba los tres números, lea el código y cópielo con su signo de almohadilla.
Después de convertir
Pruebe el color en contexto, sobre el fondo real, y compruebe el contraste de cualquier texto que se apoye en él.
Errores comunes
Omitir un cero a la izquierda
Cada par tiene dos dígitos. 7 es 07.
Escribir números superiores a 255
No pueden escribirse con dos dígitos. Límitelos 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 se hace localmente. Sus valores los usa su propio navegador y no se envía nada a ninguna parte. No hay nada que borrar después ni ninguna cuenta que crear. Esa es la manera sencilla de convertir RGB a HEX.
Resumen
Para convertir RGB a HEX aquí, escriba los tres números y lea el código hexadecimal al instante. La conversión conserva el color exactamente: hex y rgb() son dos grafías de los mismos tres números, de 0 a 255 para rojo, verde y azul, así que no se aproxima nada y un viaje de ida y vuelta devuelve lo que se tenía al empezar. Un cuarto valor para la transparencia también se traslada, ya que rgba() pasa a #RRGGBBAA, y viceversa. Ambas grafías describen sRGB, así que no pueden describir colores fuera de él. Cada par tiene dos dígitos, de modo que un número menor que 16 lleva un cero a la izquierda. No se sube nada.