Convertidor de HEX a RGB
Convierte HEX a RGB (y viceversa) con HSL, CMYK, rampa de tintas y sombras, tarjetas de contraste WCAG y un snippet de tokens CSS: convertidor de códigos de color gratis online.
= rgb(59, 130, 246)
= #3b82f6
Rampa tinte → sombra
Haz clic en un paso para cargar ese HEX en el convertidor.
Kit de formatos
| Código | Valor | CSS | |
|---|---|---|---|
| HEX | #3b82f6 | #3b82f6 | |
| RGB | 59, 130, 246 | rgb(59, 130, 246) | |
| HSL | 217°, 91%, 60% | hsl(217, 91%, 59.8%) | |
| CMYK | 76 / 47 / 0 / 4 | cmyk(76%, 47%, 0%, 4%) |
Texto sobre blanco
Contraste 3.68:1 · Normal Falla · Grande AA
Texto sobre negro
Contraste 5.71:1 · Normal AA · Grande AAA
Fragmento de tokens CSS
HEX + canales RGB separados por espacios + contraste automático para temas.
:root {
--brand: #3b82f6;
--brand-rgb: 59 130 246;
--brand-contrast: #000000;
}
.bg-brand { background-color: rgb(var(--brand-rgb) / <alpha-value>); }Acerca de Convertidor de HEX a RGB
Convierte códigos de color HEX a RGB (y RGB a HEX) con muestra en vivo, kit de formatos (HSL + CMYK), rampa clicable de tinta→sombra, previsualizaciones de contraste WCAG sobre blanco y negro, y un snippet de tokens CSS listo para pegar. Pega #rgb, #rrggbb o #rrggbbaa, usa el selector de color nativo o escribe los canales R/G/B. Todo se ejecuta en tu navegador: sin registro ni subidas.
Cómo usar Convertidor de HEX a RGB
- Pega un color HEX, usa el selector de color o haz clic en una muestra predefinida.
- Copia rgb()/rgba() CSS, o introduce R/G/B (0-255) para generar HEX en el otro sentido.
- Usa el kit de formatos para HSL y CMYK, y la rampa tinta→sombra para explorar pasos más claros o más oscuros.
- Revisa las tarjetas de contraste WCAG y luego copia el snippet de tokens CSS a tu tema.
Ejemplos de Convertidor de HEX a RGB
#FFFFFF a RGB
Blanco: rgb(255, 255, 255).
#3b82f6 a RGB
Tailwind blue-500: rgb(59, 130, 246) más HSL/CMYK correspondientes en el kit de formatos.
Corto #0f0
Se expande a #00ff00 → rgb(0, 255, 0).
Contraste + tokens
El azul #3b82f6 sobre blanco no cumple AA normal; el snippet de tokens igual exporta --brand-rgb para CSS moderno.
Leer la guía completa
Cómo usar Convertidor de HEX a RGB: guía completa (2026) - 5 min de lectura
Preguntas frecuentes sobre Convertidor de HEX a RGB
- ¿Cómo convierto HEX a RGB?
- Cada par de dígitos HEX es un canal en base 16 de 00 (0) a FF (255). Por ejemplo #1A2B3C → R=26, G=43, B=60, escrito como rgb(26, 43, 60). Esta herramienta hace la conversión mientras escribes.
- ¿Qué formatos HEX son compatibles?
- Corto #rgb (p. ej. #fff), completo #rrggbb (p. ej. #3b82f6) y de 8 dígitos #rrggbbaa con alfa. El # inicial es opcional y las letras pueden ser mayúsculas o minúsculas. También puedes elegir un color con el selector nativo.
- ¿Puedo convertir RGB a HEX?
- Sí: introduce valores R, G y B de 0 a 255 y la herramienta genera un código #rrggbb en minúsculas. Los valores fuera de rango se ajustan (clamp).
- ¿También muestra HSL y CMYK?
- Sí. El kit de formatos lista HEX, RGB, HSL y CMYK con copia CSS en un clic. CMYK es una aproximación en pantalla útil para entrega a impresión; siempre haz prueba de prensa cuando el color sea crítico.
- ¿Qué es la rampa tinta → sombra?
- Mezcla tu color hacia el blanco (tintas) y hacia el negro (sombras). Haz clic en cualquier paso para cargar ese HEX, o copia toda la rampa para una paleta rápida.
- ¿Qué significan las tarjetas de contraste?
- Muestran la relación de contraste WCAG de tu color como texto sobre blanco y sobre negro, con aprobado o fallido AA/AAA para texto normal y grande. Útil antes de publicar colores de UI.
- ¿Cuál es la diferencia entre rgb() y rgba()?
- rgb() solo tiene rojo, verde y azul. rgba() añade un canal alfa (opacidad) de 0 (transparente) a 1 (opaco). Cuando pegas un HEX de 8 dígitos, la herramienta genera rgba().