Cambiar la paleta completa modificando solo 4 variables

Imaginate que tenés un control remoto que con solo tocar 4 botones cambia el color de todas las paredes, muebles y cortinas de tu casa al mismo tiempo. Eso es exactamente lo que vas a aprender hoy: cambiar 4 líneas en un archivo y transformar completamente el aspecto visual de tu sitio.

¿Cómo funciona el sistema completo?

Para que cambiar 4 líneas actualice TODO el sitio, hay 3 archivos trabajando juntos. No tenés que editar los 3 — solo variables.css — pero es bueno entender cómo se conectan:

Las 4 líneas que tenés que cambiar

Abrí el archivo variables.css. Las 4 líneas que controlan todo están al principio, en la sección «COLORES PRINCIPALES». Son exactamente estas:

3 paletas profesionales listas para usar

Acá te doy tres paletas armadas y probadas. Solo copiás las 4 líneas de la paleta que te guste, las pegás en tu archivo reemplazando las actuales, guardás — y listo.

--color-primary:   #2563eb;   /* Azul */
--color-secondary: #7c3aed;   /* Púrpura */
--color-accent:    #f59e0b;   /* Amarillo dorado */
--color-dark:      #1e3a5f;   /* Azul marino oscuro */

--color-primary:   #16a34a;   /* Verde */
--color-secondary: #0891b2;   /* Celeste */
--color-accent:    #ea580c;   /* Naranja */
--color-dark:      #14532d;   /* Verde oscuro */

--color-primary:   #7c3aed;   /* Púrpura */
--color-secondary: #ec4899;   /* Rosa fuerte */
--color-accent:    #f59e0b;   /* Amarillo dorado */
--color-dark:      #1e1b4b;   /* Azul noche */

Paso a paso: cómo cambiar la paleta

¿Qué cambia exactamente en el sitio?

Herramienta gratuita para crear tus propios colores

Vista previa — El antes y después

Así se transforma tu sitio con cada paleta. Con solo 4 números cambia completamente la identidad visual: