Convertidor de Hex a RGB
Convierte códigos de color hexadecimales, como #FF5733 o #0F8, en valores RGB de CSS, como rgb(255, 87, 51). El conversor admite tanto la notación abreviada de 3 dígitos como la de 6 dígitos, con o sin el símbolo # inicial, y valida la entrada antes de realizar la conversión.
Prueba rápida
Convierte códigos de color HEX de 3 y 6 dígitos al formato RGB al instante.
Acepta valores con o sin el símbolo # inicial, coincidiendo con los formatos habituales de CSS y herramientas de diseño.
Devuelve una salida limpia lista para CSS con la sintaxis rgb(r, g, b).
Valida códigos HEX mal formados y reporta errores claros en lugar de producir colores incorrectos.
Útil para convertir tokens de color de herramientas de diseño a CSS, JavaScript y documentación.
Cómo usarlo
Pega un código de color HEX en el campo de entrada, como #3498db o 3498db.
Utiliza la abreviatura de 3 dígitos si es necesario, como #0f8.
El valor RGB aparece en formato rgb(r, g, b).
Copia el resultado en CSS, en las especificaciones de diseño o en el código.
Desarrollo frontend
- Convertir tokens de diseño en valores rgb() de CSS
- Generar valores RGB para la manipulación de colores en JavaScript
- Normalizar valores de color a partir de cadenas HEX copiadas
Flujos de trabajo de diseño
- Traduce valores HEX de Figma, Sketch o paletas de marca
- Documentar los colores en los formatos preferidos por los distintos equipos.
- Compare los valores exactos de los canales para comprobaciones de accesibilidad y contraste.
| Texto original | Resultado |
|---|---|
#FF5733 | rgb(255, 87, 51) |
000000 | rgb(0, 0, 0) |
#FFF | rgb(255, 255, 255) |
0f8 | rgb(0, 255, 136) |
CSS y Web
- Propiedades personalizadas de CSS
- Objetos de estilo de JavaScript
- Componentes de React y Vue
- Configuración del tema de Tailwind
Sistemas de diseño
- Paletas de marca
- Documentación del token
- Verificaciones de color para la accesibilidad
El formato hexadecimal de tres dígitos es una abreviatura: #0F8 se expande a #00FF88 duplicando cada dígito. Esto significa que #ABC se convierte en #AABBCC, no en #ABC000.
Los valores RGB exponen directamente los canales rojo, verde y azul, lo que los hace prácticos para realizar cálculos de color y mezclas alfa en tiempo de ejecución en JavaScript.
El CSS moderno admite tanto HEX como RGB, pero a menudo resulta más sencillo combinar RGB con variables CSS cuando se requiere manipular la opacidad o los canales.
Utilice indistintamente mayúsculas o minúsculas para los valores hexadecimales; los dígitos hexadecimales no distinguen entre mayúsculas y minúsculas.
Mantén el prefijo # en CSS al escribir valores hexadecimales, pero omítelo cuando una API espere específicamente dígitos hexadecimales sin formato.
Valida los colores proporcionados por el usuario antes de almacenarlos en tokens de diseño o archivos de configuración.
Preguntas frecuentes
Encuentra respuestas a las preguntas más comunes sobre nuestras herramientas y servicios.
Entender Convertidor de Hex a RGB
La notación de color HEX es la forma más compacta y universalmente reconocida de representar colores RGB en el desarrollo web. Cada canal de color —rojo, verde y azul— se almacena como un número hexadecimal de dos dígitos que va de 00 a FF, lo cual equivale al rango decimal de 0 a 255. Un código HEX de seis caracteres, como #3498DB, almacena exactamente la misma información que rgb(52, 152, 219), pero en un formato más condensado que los diseñadores y desarrolladores pueden leer de un vistazo y escribir rápidamente. El prefijo de almohadilla (#) es una convención de CSS, pero resulta totalmente opcional en muchos contextos; este conversor admite ambos formatos sin necesidad de normalizar la entrada previamente.
La conversión de HEX a RGB es una de las operaciones de color más habituales en el desarrollo frontend y en las herramientas de diseño. Muchas API, operaciones de dibujo en canvas, bibliotecas de procesamiento de imágenes y utilidades de manipulación de color requieren canales RGB numéricos en lugar de cadenas hexadecimales. La API Canvas de HTML5 en JavaScript, por ejemplo, exige valores enteros para los canales al establecer datos de píxeles en un objeto `ImageData`. Las bibliotecas de animación que realizan interpolaciones entre dos colores necesitan extraer los canales para llevar a cabo la interpolación lineal; este proceso es sencillo en RGB, pero imposible de realizar directamente en HEX sin una conversión previa. Bibliotecas como Chroma.js, Tinycolor2 y color realizan esta conversión internamente cada vez que se les pasa una cadena HEX.
El algoritmo de conversión es totalmente determinista y no conlleva pérdida de información para valores de canal enteros. Una cadena hexadecimal de seis dígitos se divide en tres pares de caracteres; cada par se interpreta como un número entero en base 16, y los tres enteros resultantes conforman la triplete RGB. En el caso de la notación abreviada de tres dígitos, cada carácter se duplica antes de la interpretación: #ABC se convierte en #AABBCC, no en #ABC000. Esto significa que #FFF es exactamente equivalente a #FFFFFF y genera rgb(255, 255, 255). No se pierde información en ninguno de los sentidos de la conversión cuando la entrada es un color hexadecimal válido.
Para los diseñadores que trabajan con Figma, Sketch, Adobe XD y las herramientas de desarrollo del navegador, la conversión de HEX a RGB es una operación habitual de enlace entre formatos. Las herramientas de diseño suelen mostrar y exportar colores en formato HEX por ser compacto y familiar tanto para desarrolladores como para diseñadores. Sin embargo, al entregar los colores a un desarrollador que necesita implementar cálculos dinámicos —como ajustar el brillo en tiempo de ejecución, mezclar dos colores o aplicar opacidad a una propiedad personalizada de CSS—, la representación RGB suele resultar más útil. Documentar ambos formatos en un sistema de diseño o una guía de estilos agiliza las entregas y evita que distintos miembros del equipo tengan que repetir el proceso de conversión.
La validación de la entrada es un aspecto fundamental de un conversor HEX a RGB fiable. Una causa frecuente de errores en entornos de producción es pasar una cadena de color con formato incorrecto a una función que espera una entrada HEX válida: la función devuelve silenciosamente el color negro (rgb(0, 0, 0)) o genera un error no controlado, lo que provoca que la interfaz se renderice con un color incorrecto que podría pasar desapercibido inicialmente. Este conversor valida que la entrada contenga exactamente tres o seis dígitos hexadecimales (tras eliminar el carácter opcional «#») y devuelve un mensaje de error claro ante cualquier entrada que no supere la validación, evitando así alteraciones silenciosas del color.