Conversor HEX RGB Gratis: Convertir Colores HEX a RGB Online

A El cuentagotas captura colores de toda tu pantalla, no solo del navegador. Haz clic en el ícono, luego pasa sobre cualquier píxel en Slack, Figma o incluso un PDF. El color se fija al hacer clic. Un detalle: algunos sistemas operativos piden permiso de grabación de pantalla primero.

A Sí, los códigos HEX abreviados funcionan sin problema. Nuestro conversor expande #FFF automáticamente a #FFFFFF (blanco). Lo mismo con #F06, que se convierte en #FF0066. Verás los valores RGB, HSL y RGBA completos al instante. Ojo: la forma abreviada solo funciona cuando cada par tiene dígitos idénticos — #ABC se vuelve #AABBCC.

A Claro que sí. Los equipos de marketing lo usan para que el mismo rojo #E63946 se vea idéntico en banners web, publicaciones de redes sociales y plantillas de correo. Pega cualquier código HEX, y el conversor te entrega los valores RGB para Photoshop, RGBA para efectos de superposición y HSL para ajustes de teoría del color. Sincroniza ese único valor HEX en todos los entregables, y los degradados de tus secciones principales no se desviarán ni un tono. Consejo: guarda los resultados en tu guía de marca para que nadie aproxime a ojo.

A Pega tu código HEX en el conversor y anota los valores RGB. Luego, usa un verificador de contraste con los colores de frente y fondo. Para texto normal menor de 14pt en negrita, apunta a una relación 4.5:1 contra blanco o negro. Nuestra herramienta no calcula el contraste directamente, pero te da los números exactos para agilizar el proceso. WCAG AA exige 4.5:1, AAA necesita 7:1. Consejo: grises claros como #CCCCCC fallan contra blanco.

A Sí, #000000 se traduce exactamente a rgb(0, 0, 0) — negro puro sin nada de luz roja, verde o azul. Pero hay un truco: los monitores nunca muestran negro real por la fuga de luz de la retroiluminación. Tu píxel más oscuro podría mostrar rgb(10, 10, 10) o peor. Si diseñas para pantallas OLED, usa #000000 para negros profundos. En LCD estándar, un gris oscuro como #1a1a1a a menudo se ve más negro que el negro puro.

A RGB entrega tres valores: rojo, verde y azul. RGBA añade un cuarto — alfa — que controla la opacidad de 0 a 1. Si apilas elementos, como una barra de navegación sobre una imagen hero, RGBA permite ver a través del color. Nuestro conversor muestra ambos: pega #3498DB y tendrás rgb(52, 152, 219) y rgba(52, 152, 219, 1). Ese 1 final significa totalmente opaco. Pero no uses alfa para colores sólidos, es peso muerto. Resérvalo para estados hover o superposiciones modales. Consejo: prueba valores de 0,7 y 0,5 para ver cuál distrae menos.

A No hay diferencia funcional, solo cambia la notación. Nuestra herramienta expande #fff a #ffffff automáticamente, así que obtienes los mismos valores RGB en ambos casos. Esto funciona porque el formato corto duplica cada carácter: #f se convierte en ff, #c en cc. Pero ojo: #369 y #336699 NO son el mismo color. El formato corto #369 se expande a #336699, no a #036090 como podrías imaginar. Ante la duda, usa siempre el código completo de 6 dígitos para evitar sorpresas.

A Para nada. Pega un código como #FF5733 en el campo y verás rgb(255, 87, 51) al instante, junto con HSL y RGBA. Todo corre en el navegador: no instalas nada ni se sube nada a un servidor. Muchos diseñadores dejan esta pestaña abierta junto a Figma o VS Code. Un consejo: guárdala en marcadores, la vas a usar más de lo que crees.

A Los buscadores no penalizan tu posicionamiento por mezclar formatos de color en las hojas de estilo. Sin embargo, los navegadores procesan peor las sintaxis incorrectas o los olvidos de almohadilla. Nuestra herramienta genera valores limpios como rgb(241, 196, 15) para evitar errores tipográficos. Pega tu código de marca una vez y copia la cadena exacta para tu archivo CSS.

A Tailwind espera números separados por espacios como 59 130 246 en lugar de comas. Nuestra herramienta muestra cadenas CSS estándar por defecto. Debes quitar esas comas para usarlas en clases utilitarias modernas. Los desarrolladores suelen olvidar este cambio de sintaxis al saltar a frameworks. Copia los dígitos directamente desde el cuadro de salida y olvídate de los errores de compilación.