Convertidor de RGB a HEX
Introduce los valores de rojo, verde y azul y obtén el código #hex al instante.
¿Necesitas lo contrario? Convertidor de HEX a RGB
Este convertidor de rgb a hex transforma los tres valores de canal, rojo, verde y azul de 0 a 255, en un único código hex que puedes soltar en CSS, en la configuración de Tailwind o en un SVG. Escribe los números y el código #hex y una muestra de vista previa en vivo aparecen de inmediato.
Esta dirección aparece cuando sacas colores de otros programas. El cuentagotas de Photoshop, un muestreador de color de capturas de pantalla, GIMP o un motor de videojuegos suelen entregarte números RGB planos como 34, 139, 34. El trabajo web quiere eso como #228b22, un token compacto que puedes pegar en cualquier sitio, buscar en un repositorio o mandar a un desarrollador sin ambigüedad.
La herramienta se ejecuta completamente en tu navegador, sin viajes al servidor. Deslizadores o campos numéricos, lo que prefieras, actualizan la salida hex en vivo, así que también puedes subir o bajar un canal y ver cómo responde el color.
Cómo convertir de RGB a HEX
- Introduce los valores de rojo, verde y azul (0-255), o arrastra los deslizadores.
- Observa cómo la muestra de vista previa se actualiza al ajustar cada canal.
- El código hex aparece al instante, en la forma estándar #rrggbb.
- Haz clic en Copiar para llevarte el código a tu CSS, token de diseño o SVG.
- ¿Vas en el otro sentido? Usa el convertidor de HEX a RGB enlazado en esta página.
Qué hace este convertidor de RGB a HEX
La herramienta toma tres valores de canal, rojo, verde y azul de 0 a 255, y los empaqueta en un único token hexadecimal en la forma estándar #rrggbb, actualizándose en vivo mientras escribes o arrastras. Una muestra de vista previa confirma el color, y un botón de copiar te entrega el código listo para CSS, una configuración de Tailwind, el relleno de un SVG o un archivo de tokens de diseño.
Es intencionadamente sencilla y se ejecuta por completo en tu navegador. Tanto si prefieres escribir números exactos como mover deslizadores para explorar tonos cercanos, la conversión de rgb a hex ocurre al instante, sin enviar nada a un servidor y sin nada que instalar.
Cómo funciona la conversión
Cada canal de 0 a 255 se escribe como un número de dos dígitos en base 16 y los tres se concatenan. El rojo 255 es ff, el verde 102 es 66, el azul 0 es 00, así que rgb(255, 102, 0) se convierte en #ff6600. Los valores por debajo de 16 llevan un cero delante, y por eso 10 se convierte en 0a y no en a; saltarse ese cero es el error más común al convertir a mano.
Como el hexadecimal es solo la notación en base 16 de los mismos valores de canal sRGB, la conversión es precisa en ambos sentidos. Cada valor de 0 a 255 corresponde exactamente a un par de dos dígitos, así que no se pierde información de color al pasar de RGB a hex.
Cómo sacar valores RGB de imágenes y aplicaciones
Si intentas igualar un color de una foto, de la web de un competidor o de un mockup, usa primero un cuentagotas: la mayoría de los editores de imagen, las herramientas de desarrollador del navegador y las utilidades de captura del sistema pueden muestrear un píxel y darte sus valores RGB. Mete aquí esos tres números y tendrás un código hex listo para producción.
Ojo con una cosa: algunas herramientas dan el RGB como porcentajes o como decimales de 0 a 1 (0.13, 0.55, 0.91). Multiplica los decimales por 255 y redondea antes de convertir, o el hex resultante saldrá totalmente equivocado.
Por qué el hex es el estándar de la web
Un código hex es un único token corto y sin ambigüedad, que es justo lo que le gusta al código. #228b22 es fácil de pegar, fácil de buscar con grep en un repositorio y fácil de leer en un diff, mientras que tres números separados son tres oportunidades de transponer un valor o perder uno. Las guías de estilo, los linters y los sistemas de tokens de diseño casi todos se estandarizan en hex por esa razón.
Eso no vuelve obsoleto al RGB. Los scripts, el trabajo con canvas y cualquier código que manipule un solo canal están mucho más cómodos con números que con una cadena empaquetada. Convertir de RGB a hex trata de producir la forma almacenable y compartible una vez que has decidido el color.
Manejo de la transparencia
El hex estándar cubre solo el color opaco. Si tu fuente tiene un valor alfa, conviértelo aparte: multiplica el alfa de 0 a 1 por 255, redondea y añádelo como cuarto par hexadecimal. Así rgba(255, 102, 0, 0.5) se convierte en #ff660080, ya que 0.5 x 255 es aproximadamente 128, que es 80 en hexadecimal.
El soporte para hex de 8 dígitos es ya amplio en los navegadores modernos, pero si tienes como objetivo un entorno antiguo o un cliente de correo, mantén el color en seis dígitos y expresa la opacidad mediante rgba() o una propiedad de opacidad aparte.
Contraste y accesibilidad
Las comprobaciones de contraste de accesibilidad operan sobre los valores de canal RGB, así que si partes de RGB ya tienes los números que un verificador necesita antes incluso de convertir a hex. Eso facilita confirmar que el texto supera la proporción de 4.5:1 para el cuerpo del texto, o de 3:1 para texto grande, respecto a su fondo.
Un flujo práctico es probar el contraste en RGB, ajustar uno o dos canales hasta que la proporción pase, y solo entonces convertir el valor final a hex para tu hoja de estilos. Como la conversión es exacta, el tono que aprobaste es precisamente el tono que se publica.
Herramientas de color relacionadas
El viaje inverso es igual de frecuente, así que ten a mano el convertidor de HEX a RGB para cuando una hoja de estilos o una guía de marca te dé un código hex que necesitas como canales para rgba() o para trabajo con canvas. Ambos sentidos son sin pérdidas.
Si aún no te has decidido por un color, el selector de color te permite arrastrar hasta un tono y leer HEX, RGB y HSL juntos, mientras que el generador de degradados CSS convierte los colores que elijas en fondos lineales y radiales listos para copiar.
Preguntas frecuentes
¿Este conversor de RGB a hex es gratis?
Sí. Es gratuito, sin límites y se ejecuta por completo en tu navegador. Sin cuenta y sin recopilar datos.
¿Qué rango usan los valores RGB?
Cada canal va de 0 a 255. Los valores fuera de ese rango se recortan. Si tu fuente da decimales de 0 a 1 o porcentajes, escálalos primero a 0-255.
¿Por qué se prefiere hex en el código web?
Es un token corto y sin ambigüedad. #228b22 es más fácil de pegar, buscar y comparar que tres números sueltos, y es el formato que estandarizan la mayoría de guías de estilo, linters y archivos de tokens de diseño.
¿La conversión es exacta?
Sí. Cada canal de 0 a 255 corresponde exactamente a un par hexadecimal de dos dígitos, así que rgb(255, 102, 0) es precisamente #ff6600. No se pierde precisión en ningún sentido.
¿Puedo convertir un color con transparencia?
Si tienes un valor alfa, conviértelo aparte: multiplica el alfa de 0 a 1 por 255 y añádelo como cuarto par hexadecimal. rgba(255, 102, 0, 0.5) se convierte en #ff660080.
¿Funciona en iPhone y Android?
Sí. Los deslizadores y campos numéricos están pensados para pantallas táctiles, así que funciona bien en cualquier navegador móvil moderno.