Expandir color hex abreviado

CSS y las herramientas de diseño suelen escribir colores en forma abreviada de tres dígitos, por ejemplo #f0a, en lugar de la forma completa de seis dígitos #ff00aa. Los navegadores expanden esa abreviatura duplicando cada dígito hexadecimal para que cada canal sea un byte completo. Esta herramienta de expansión de color hex abreviado acepta un código de tres dígitos con o sin almohadilla inicial, comprueba que cada carácter sea un dígito hexadecimal y devuelve la expansión determinista de seis dígitos más los enteros de canal rojo, verde y azul correspondientes. Los desarrolladores front-end la usan cuando los tokens de diseño llegan en códigos cortos y las hojas de estilo, capturas o sistemas de diseño exigen la forma larga. Estudiantes y scripts de QA la usan para verificar que una paleta escrita a mano coincide byte a byte con la regla del CSS Color Module.

Qué significa la abreviatura de 3 dígitos y cómo funciona la expansión

En CSS, un color hexadecimal puede escribirse con tres dígitos tras una almohadilla opcional: un nibble para el rojo, uno para el verde y uno para el azul. La regla oficial de expansión es simple y absoluta: cada dígito se repite una vez de modo que tres caracteres se convierten en seis. Por ejemplo, #abc se expande a #aabbcc, #f0a a #ff00aa y #000 a seis ceros.

Esa regla no es una heurística ni una aproximación perceptual; es el mismo mapeo que aplican los navegadores al analizar una hoja de estilo. Esta calculadora codifica exactamente ese mapeo.

Usted proporciona una abreviatura de tres dígitos, el motor pasa los dígitos a minúsculas para una forma canónica estable, duplica cada nibble y devuelve la cadena completa con almohadilla, los seis dígitos sin almohadilla, una forma en mayúsculas para guías de estilo que prefieren A–F en mayúscula, la abreviatura normalizada de tres dígitos con y sin almohadilla, un booleano que indica si la entrada llevaba almohadilla inicial, y los canales enteros r, g y b de 0 a 255 para que pueda alimentar el mismo color a herramientas RGB sin una segunda conversión.

No hay ruta que invente un cuarto canal, preserve alfa o trate prefijos 0x como colores CSS válidos. Use un convertidor dedicado de hex a RGB o multiformato cuando ya tenga seis dígitos y solo necesite números de canal; use esta página cuando la entrada es deliberadamente corta y la tarea es materializar la forma larga con un contrato de validación claro.

Dónde resulta útil expandir el hex abreviado

Los sistemas de diseño suelen recibir muestras de marca como códigos de tres dígitos de guías de estilo antiguas, plugins de Figma o notas manuscritas, mientras que las tuberías de tokens modernas y las propiedades personalizadas CSS prefieren hashes de seis dígitos para búsquedas, diferencias de capturas y mapeo canal a canal. Expandir la abreviatura una sola vez en el límite mantiene a todos los consumidores posteriores en la forma larga sin que cada equipo reimplemente la regla de doblado de forma ligeramente distinta.

Los materiales didácticos de desarrollo web introducen colores de tres dígitos pronto porque son fáciles de escribir y luego piden a los estudiantes explicar la expansión; una herramienta determinista permite mostrar que #fff es blanco y que #f0a no es lo mismo que inventar dígitos faltantes. Las tuberías de QA y accesibilidad a veces almacenan colores en formatos mezclados; normalizar códigos cortos a seis dígitos antes de las comprobaciones de contraste evita falsos desajustes cuando un lado usó abreviatura y el otro la forma larga.

Combine este expansor con convertidores RGB o HSL cuando necesite otros espacios, y mantenga esta página centrada cuando la única tarea sea de tres dígitos a seis bajo un contrato de validación estricto que rechaza códigos ya largos y caracteres ilegales en lugar de adivinar.