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;
}