Conversor de HEX a RGB
Escriba o pegue un color en HEX, RGB, HSL o CMYK y los demás formatos se actualizan mientras escribe. Copie valores CSS listos, explore variantes más claras y más oscuras y compruebe el contraste con el texto.
¿Necesita una interfaz que se vea bien y se lea con facilidad?
Diseñamos y desarrollamos sitios web y aplicaciones con un sistema de color coherente: paleta de marca, contraste accesible y design tokens compartidos por diseñadores y desarrolladores. Cuéntenos su proyecto y reciba una estimación.
¡Gracias! Le responderemos en un día laborable.
En resumen: escriba un color en cualquier campo, por ejemplo #2e5cf2, rgb(46, 92, 242), hsl(226, 88%, 56%) o cmyk(81%, 62%, 0%, 5%), y el conversor rellena al instante los demás formatos. Debajo encontrará valores CSS, incluido OKLCH, variantes más claras y más oscuras y una comprobación de contraste WCAG 2.2.
Cómo convertir HEX a RGB
- Introduzca el color. Pegue un código HEX con o sin «#»: se admiten 3, 4, 6 u 8 dígitos. También puede empezar por RGB, HSL, CMYK o el selector de color.
- Lea el resultado. Los cuatro campos se actualizan mientras escribe. Un valor no válido se resalta y los demás campos conservan el último color válido.
- Copie lo que necesite. Cada campo y cada valor CSS tiene un botón de copiar. La dirección de la página incluye el color, así que puede compartir el enlace.
- Compruebe la legibilidad. El comprobador de contraste usa el color actual como fondo. Elija el color del texto y vea si el par cumple AA y AAA.
Cómo funciona la conversión
Un código HEX es el mismo color RGB escrito en base 16: cada par de dígitos es un canal de 00 a FF, es decir, de 0 a 255. #2E5CF2 significa rojo 0x2E = 46, verde 0x5C = 92, azul 0xF2 = 242. Un código corto como #3AF duplica cada dígito y se convierte en #33AAFF. El séptimo y el octavo dígito añaden el canal alfa: #2E5CF280 es el mismo azul con un 50% de opacidad.
| Formato | Ejemplo | Dónde se usa |
|---|---|---|
| HEX | #2E5CF2 | CSS, Figma, manuales de marca |
| RGB | rgb(46, 92, 242) | CSS, código Android e iOS, editores de imagen |
| HSL | hsl(226, 88%, 56%) | Temas CSS: cambiar la luminosidad sin tocar el tono |
| OKLCH | oklch(54.2% 0.23 265.7) | Escalas de color CSS modernas con luminosidad percibida uniforme |
| CMYK | cmyk(81%, 62%, 0%, 5%) | Referencia aproximada para impresión |
HSL describe el mismo color como tono (0–360°), saturación y luminosidad, algo útil para crear versiones más claras y más oscuras de un color de marca. OKLCH hace lo mismo en un espacio de color perceptual, de modo que pasos de igual luminosidad se ven iguales. Lo admiten todos los navegadores actuales.
Una nota sobre CMYK
El conversor usa la fórmula estándar independiente del dispositivo: K = 1 − max(R, G, B), y después C, M e Y a partir de los canales restantes. Las imprentas trabajan con perfiles ICC para un papel y unas tintas concretos, así que sus valores pueden diferir en varios puntos porcentuales. Use el valor CMYK como punto de partida y pida el definitivo a su imprenta.
Contraste y accesibilidad
Las WCAG 2.2 exigen una relación de contraste de al menos 4,5:1 para texto normal, y 3:1 para texto grande y para elementos de la interfaz como iconos y bordes de campos. Muchos azules y verdes de marca quedan justo en el límite con texto blanco. Para obtener una paleta completa a partir de una foto o un logotipo, use el generador de paletas de colores. Si su producto necesita un sistema de color coherente, consulte nuestros servicios de diseño y desarrollo web.
Preguntas frecuentes
¿Cómo se convierte HEX a RGB?
Divida el código de seis dígitos en tres pares y convierta cada par de hexadecimal a decimal. Para #2E5CF2: 2E = 46, 5C = 92 y F2 = 242, así que el color es rgb(46, 92, 242). El conversor de esta página lo hace al instante mientras escribe.
¿Cómo se convierte RGB a HEX?
Convierta cada canal de 0–255 en un número hexadecimal de dos dígitos y únalos tras «#». Para rgb(255, 165, 0) se obtiene FF, A5 y 00, así que el código HEX es #FFA500. Escriba el valor en el campo RGB y copie el código HEX.
¿Qué es un código HEX de 8 dígitos?
Los dos últimos dígitos son el canal alfa, de 00 (totalmente transparente) a FF (totalmente opaco). #2E5CF280 es el color #2E5CF2 con alrededor de un 50% de opacidad. Todos los navegadores modernos admiten HEX de 8 y de 4 dígitos en CSS.
¿Es mejor HSL que RGB para CSS?
Describen los mismos colores. HSL es más fácil de leer y ajustar a mano: para aclarar un color basta con cambiar la luminosidad. Para escalas de color y temas, OKLCH es aún mejor, porque los pasos iguales se ven iguales.
¿Por qué mis valores CMYK no coinciden con los de la imprenta?
Esta página usa la fórmula estándar sin perfil de color. Las imprentas convierten con perfiles ICC para su papel y sus tintas, y algunos colores de pantalla, sobre todo azules y verdes intensos, no se pueden imprimir con exactitud. Tome el valor CMYK como referencia.
¿Puedo compartir un color con un enlace?
Sí. Al cambiar el color, la dirección de la página recibe el código HEX tras «#», por ejemplo /es/products/hex-to-rgb#2e5cf2. Quien abra el enlace verá el mismo color.
¿Cómo compruebo si un texto sobre este color es legible?
Use el comprobador de contraste situado debajo del conversor. El color actual se fija como fondo; elija el color del texto y vea la relación y si cumple WCAG AA (4,5:1) y AAA (7:1).