Convertir HEX a RGB – Códigos de color a RGB, HSL y CMYK
Pega un color HEX, RGB o HSL —o elígelo— y obtén todos los formatos a la vez, con vista previa y la relación de contraste sobre blanco y negro.
Divide el código HEX en tres pares y pasa cada uno de base 16 a base 10: #7C3AED → 7C = 124, 3A = 58, ED = 237, es decir, rgb(124, 58, 237). El conversor lo hace al instante en ambos sentidos y muestra también HSL y CMYK.
Cómo usar la herramienta: Convertir HEX a RGB
- Escribe o pega un color como #7c3aed, 124, 58, 237 o hsl(262, 83%, 58%).
- O pulsa la muestra para elegir un color.
- Lee los valores HEX, RGB, HSL y CMYK.
- Revisa el contraste sobre blanco y negro.
- Copia el formato que necesites.
Cómo funcionan los colores HEX
Un color HEX como #7C3AED son tres pares de dígitos hexadecimales: rojo, verde y azul. Cada par va de 00 (0) a FF (255). Pasarlo a RGB consiste simplemente en convertir cada par en un número decimal:
7C → 7 × 16 + 12 = 124, 3A → 3 × 16 + 10 = 58, ED → 14 × 16 + 13 = 237
Así, #7C3AED es rgb(124, 58, 237). Los códigos cortos como #F80 duplican cada dígito (#FF8800) y los de 8 dígitos como #7C3AED80 añaden un canal alfa para la transparencia.
Colores comunes
| Color | HEX | RGB |
|---|---|---|
| Blanco | #FFFFFF | 255, 255, 255 |
| Negro | #000000 | 0, 0, 0 |
| Rojo | #FF0000 | 255, 0, 0 |
| Verde | #00FF00 | 0, 255, 0 |
| Azul | #0000FF | 0, 0, 255 |
| Naranja | #FF8800 | 255, 136, 0 |
Cuándo usar cada formato
- HEX es compacto y el más usado en CSS, herramientas de diseño y manuales de marca.
- RGB / RGBA es práctico cuando necesitas transparencia o calcular colores en código.
- HSL describe tono, saturación y luminosidad, así que es el más cómodo para aclarar, oscurecer o desaturar un color.
- CMYK se usa en impresión. Los valores de aquí son una conversión simple; para imprenta profesional, pide a tu imprenta el perfil de color adecuado.
Contraste y accesibilidad
El texto debe destacar sobre el fondo para leerse bien. Las pautas WCAG piden una relación de contraste de al menos 4,5:1 para texto normal y 3:1 para texto grande. El conversor muestra la relación de tu color sobre blanco y sobre negro, para que veas al instante si sirve para texto o solo como decoración.
Instantáneo y privado
Todas las conversiones se hacen en tu navegador mientras escribes, sin enviar nada a ningún servidor. A los desarrolladores también les será útil el Formateador JSON y el codificador Codificar y decodificar Base64; los diseñadores pueden preparar imágenes con el Redimensionar imagen.
También te pueden servir estas herramientas gratis: Formateador JSON, Generador de contraseñas y Probador de regex.
Preguntas frecuentes
¿Cómo convierto HEX a RGB?
Divide el código en tres pares y pasa cada uno de hexadecimal a decimal. #FF8800 es 255, 136, 0.
¿Cómo convierto RGB a HEX?
Pasa cada valor de 0 a 255 a dos dígitos hexadecimales y únelos: 255, 136, 0 es #FF8800.
¿Qué es un código HEX de 3 dígitos?
Una forma abreviada en la que cada dígito se duplica: #F80 equivale a #FF8800.
¿Qué significa el valor alfa?
Es la opacidad, de 0 (transparente) a 1 (opaco). En HEX de 8 dígitos es el último par, de 00 a FF.
¿Qué contraste necesito para un texto?
Al menos 4,5:1 para texto normal y 3:1 para texto grande, según WCAG AA.
Última actualización: