Lección 4
Formatos de color CSS
Hex, rgb(), hsl(), alpha y funciones de color modernas.
Los navegadores aceptan varias sintaxis de color CSS. Saber cuáles permite tu matriz de soporte evita fallbacks silenciosos.
Hex en CSS
.brand {
color: #2563eb;
border-color: #2563eb80; /* hex de 8 dígitos con alpha en navegadores modernos */
}
Hex en minúsculas es una elección habitual de guía de estilo; los navegadores tratan #ABC y #abc igual.
rgb() y hsl() funcionales
Sintaxis legacy con comas:
background: rgba(37, 99, 235, 0.12);
Sintaxis moderna separada por espacios (CSS Color Level 4):
background: rgb(37 99 235 / 0.12);
color: hsl(221 83% 53%);
Autoprefixers y minificadores pueden normalizar formatos — mantén tokens fuente consistentes en tu repo de design system.
Colores con nombre y palabras clave
transparent, currentColor y la larga lista de colores con nombre (tomato, rebeccapurple) compilan rápido en prototipos. Los temas de producción deben preferir tokens sobre colores con nombre aleatorios para evitar deriva.
Herencia currentColor
color: currentColor permite que iconos y bordes sigan el color del texto — útil para botones que cambian de estado sin duplicar valores hex.
Espacios modernos: oklch y color-mix
CSS más reciente soporta espacios perceptualmente uniformes:
--accent: oklch(58% 0.22 264);
--hover: color-mix(in oklch, var(--accent) 85%, black);
La adopción depende de tus objetivos de navegador. Los stacks de fallback suelen mantener hex sRGB primero, luego bloques @supports para temas de gama amplia.
Restricciones de email y PDF
Muchos clientes de email HTML eliminan hsl() y variables. Exporta hex inline para plantillas aunque la app web use variables CSS internamente.
Conclusión clave
Elige un formato de autoría para tokens, genera salidas específicas de plataforma en tiempo de build y documenta qué superficies requieren fallbacks solo hex.