Centro Global de Herramientas
Idioma actual: Spanish

Generador de variables CSS

Crea una lista de tokens de color, revisa la vista previa y copia propiedades CSS personalizadas listas para usar.

Cómo usarlo

  1. Ingresa un prefijo de variable como brand, theme o ui.
  2. Edita cada nombre de variable y elige un color.
  3. Agrega más filas si necesitas más variables.
  4. Copia el CSS generado y pégalo en tu hoja de estilos.

Vista previa de colores

--brand-primary

--brand-secondary

--brand-accent

Variables CSS generadas

:root {
  --brand-primary: #4f46e5;
  --brand-secondary: #06b6d4;
  --brand-accent: #f59e0b;
}

Organiza mejor tus colores con variables CSS

Esta herramienta genera tokens de color en :root para reducir valores repetidos y facilitar cambios globales en tu CSS.

Cuándo usar esta herramienta

  • Repites los mismos colores en varios archivos CSS.
  • Quieres cambiar colores globales sin errores de buscar y reemplazar.
  • Necesitas un set inicial de tokens para un sitio pequeño.

Pasos rápidos

  1. Define un prefijo claro como brand o theme.
  2. Nombra variables por función y asigna valores HEX.
  3. Copia el bloque :root generado.
  4. Pégalo en tu CSS y reemplaza colores hardcodeados repetidos.

Errores comunes

  • Nombrar variables solo por color y no por función UI.
  • Usar prefijos distintos entre archivos.
  • Mezclar hardcoded values y variables para los mismos elementos.

Guías relacionadas de variables CSS

Lee guías breves y prácticas para mantener mejor tus variables CSS.