Hexadecimal en CSS y diseño web — convertir colores y valores hex
El sistema hexadecimal está presente en el trabajo de diseño y desarrollo web de forma cotidiana: los códigos de color CSS usan hex (#FF5733), las direcciones de memoria del DOM se expresan en hex en las DevTools, los hashes de integridad de subresource (SRI) están en hex y muchos valores de identificación únicos usan representación hexadecimal. Entender cómo funciona el hex y cómo convertirlo a decimal o RGB permite trabajar con más confianza en el código front-end y en las herramientas de diseño.
Cómo leer un código de color hexadecimal en CSS
Un código de color CSS como #FF5733 se divide en tres pares: FF (rojo), 57 (verde), 33 (azul). Cada par es un número hexadecimal de 0 a FF (0 a 255 en decimal). Para convertir FF a decimal: F es 15 en decimal, así que FF = 15×16 + 15×1 = 255. Para 57: 5×16 + 7 = 87. Para 33: 3×16 + 3 = 51. Por tanto, #FF5733 equivale a rgb(255, 87, 51) en CSS. Esta conversión es el caso de uso más habitual del conversor de bases para diseñadores web que necesitan verificar o ajustar valores de color.
Colores hex cortos (#RGB) y su expansión
CSS admite una forma abreviada de color hexadecimal de tres dígitos: #RGB, donde cada dígito se repite para obtener el par de dos dígitos. #F05 se expande a #FF0055. #ABC se expande a #AABBCC. Esta forma solo funciona cuando cada canal tiene ambos dígitos iguales: #FF5500 no se puede abreviar porque el canal azul (00) sí pero el verde (55) también, pero el conjunto completo requiere que los tres canales sean comprimibles. Herramientas de optimización CSS como cssnano comprimen automáticamente los colores que lo permiten. La forma expandida de seis dígitos es siempre válida.
Canales alpha en colores hexadecimales: #RRGGBBAA
CSS 4 añade soporte para un cuarto canal de opacidad en la notación hexadecimal: #RRGGBBAA. El canal alpha (A) también va de 00 (completamente transparente) a FF (completamente opaco). Por ejemplo, #FF573380 es el mismo rojo-naranja del ejemplo anterior con 50% de opacidad (80 en hex = 128 en decimal = 128/255 ≈ 50%). Esta notación de 8 dígitos es equivalente a la función rgba() de CSS. La compatibilidad con navegadores es amplia (Chrome 62+, Firefox 49+, Safari 10+), aunque para proyectos que necesitan soporte a navegadores muy antiguos, rgba() es más segura.
Hexadecimal más allá de los colores: identificadores y criptografía web
En el desarrollo web, el hexadecimal aparece también en los hashes de integridad de subresource (SRI) que protegen las CDN contra la inyección de código: <script integrity='sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC'>. El SHA-384 son 48 bytes = 96 dígitos hexadecimales (o 64 caracteres en Base64). Los identificadores de sesión de cookies, los tokens CSRF y muchos IDs de base de datos generados con UUIDs versión 4 usan representación hexadecimal: 550e8400-e29b-41d4-a716-446655440000. El conversor permite verificar el valor numérico decimal de cualquier segmento de estos identificadores.
Preguntas frecuentes
- ¿Cómo convierto rgb(255, 87, 51) a hexadecimal manualmente?
- Convierte cada valor decimal al equivalente hexadecimal dividiéndolo entre 16 y registrando el cociente y el resto: 255 = 15×16 + 15 = FF. 87 = 5×16 + 7 = 57. 51 = 3×16 + 3 = 33. Concatena los tres pares: #FF5733. El conversor de bases hace este cálculo automáticamente para cada canal.
- ¿Qué significa el prefijo 0x en valores hexadecimales de JavaScript?
- 0x es el prefijo de literales hexadecimales en JavaScript y la mayoría de lenguajes de programación. 0xFF es el número hexadecimal FF, que es 255 en decimal. En el contexto de los colores, rara vez verás 0xFF en CSS (que usa el formato #FF), pero sí en código JavaScript que manipula píxeles de canvas como datos binarios (por ejemplo, en la API ImageData).
- ¿Puedo usar el conversor para convertir hashes SHA a decimal?
- Sí. El conversor usa BigInt y maneja números hexadecimales de cualquier longitud. Un hash SHA-256 de 64 dígitos hexadecimales se convierte a decimal correctamente sin pérdida de precisión. Esto es útil para comparar hashes, verificar rangos de valores o analizar la distribución estadística de hashes en análisis de seguridad.