Cómo convertir códigos de color HEX a RGB
HEX y RGB son dos formas de escribir exactamente los mismos colores. Diseñadores y desarrolladores malabarean constantemente entre los dos — HEX en las hojas CSS, RGB en las animaciones JavaScript, HSL en las herramientas de diseño. Entender su vínculo hace el trabajo con colores mucho más sencillo.
Cómo funciona HEX
Un código de color HEX como #FF5733 es un número hexadecimal de 6 dígitos que representa los canales rojo, verde y azul:
| Parte | Hex | Decimal | Canal |
|---|---|---|---|
| FF | FF | 255 | Rojo |
| 57 | 57 | 87 | Verde |
| 33 | 33 | 51 | Azul |
Cada canal va de 00 (0, ningún color) a FF (255, intensidad máxima). Así que #FF5733 significa rojo al máximo, verde moderado, un poco de azul — lo que da un rojo anaranjado cálido.
Cómo convertir HEX a RGB
- Introduce tu código HEX — escribe o pega un código como #FF5733, o usa el selector de color.
- Consulta los valores RGB — ve los equivalentes en rojo, verde y azul (0-255 cada uno).
- Copia en cualquier formato — recupera los valores en
rgb(255, 87, 51), canales individuales u otros formatos como HSL.
Códigos de color habituales
| Color | HEX | RGB |
|---|---|---|
| Blanco | #FFFFFF | rgb(255, 255, 255) |
| Negro | #000000 | rgb(0, 0, 0) |
| Rojo | #FF0000 | rgb(255, 0, 0) |
| Verde | #00FF00 | rgb(0, 255, 0) |
| Azul | #0000FF | rgb(0, 0, 255) |
| Amarillo | #FFFF00 | rgb(255, 255, 0) |
Consejos
- Usa HEX en CSS —
color: #FF5733es más limpio y más habitual quecolor: rgb(255, 87, 51)en las hojas de estilo. - Usa RGB para la transparencia — cuando necesites colores semitransparentes, usa
rgba(255, 87, 51, 0.5). No hay forma de añadir alfa en HEX estándar (aunque el HEX de 8 dígitos existe, el soporte de navegador varía). - Atajo de 3 dígitos —
#F00equivale a#FF0000. Úsalo cuando cada par tenga dígitos idénticos para ganar espacio. - El selector de color es más rápido — si buscas el color adecuado, usa el selector visual en lugar de adivinar los valores HEX. Copia el código cuando estés satisfecho.
Preguntas frecuentes
¿Cómo convertir HEX a RGB manualmente?
Divide el código hex en tres pares (p. ej. #FF8800 se convierte en FF, 88, 00). Convierte cada par de base 16 a base 10. FF = 255, 88 = 136, 00 = 0. El resultado es rgb(255, 136, 0).
¿Y los códigos HEX de 3 dígitos?
El HEX de 3 dígitos es un atajo en el que cada dígito se duplica. #F80 equivale a #FF8800. La mayoría de los convertidores gestionan ambos formatos automáticamente.
¿Cuándo usar HEX o RGB?
HEX es más compacto y más habitual en CSS. RGB es preferible cuando hay que manipular los canales individualmente en código o usar rgba() para la transparencia. Ambos representan los mismos colores.
¿Qué representa el símbolo # en un código HEX?
La almohadilla (#) es un prefijo que indica que el valor es un código de color hexadecimal. No forma parte del valor en sí. Algunas herramientas aceptan códigos con o sin almohadilla.