Generador de Colores Material

Genera una paleta de colores Material Design completa a partir de cualquier color base, con todos los tonos primarios (50–900), colores de acento (A100–A700), muestras en vivo y salida lista para copiar en CSS, SCSS o JSON.

Tonos primarios (50–900)

Colores de acento (A100–A700)


  

  
  

    
  



    

    

      
Crea una paleta de colores Material Design completa a partir de un solo color con este generador de colores Material gratuito. Elige o pega cualquier valor hex, ponle nombre a tu paleta y obtén al instante los diez tonos primarios — 50, 100, 200, 300, 400, 500, 600, 700, 800 y 900 — más los cuatro colores de acento Material A100, A200, A400 y A700, mostrados como muestras en vivo con variables CSS, un mapa SCSS o JSON listos para copiar. Todo se calcula de forma privada en tu navegador.

      

        
¿Qué es un generador de colores Material?

        
Un generador de colores Material convierte un color base en el conjunto completo de tonos que el sistema Material Design de Google espera para una paleta. Cada color Material (como Índigo o Verde azulado) incluye diez tonos primarios numerados del 50 al 900, de muy claro a muy oscuro, además de un pequeño grupo de colores de acento llamativos etiquetados A100, A200, A400 y A700. Esta herramienta construye toda esa gama a partir del color que elijas tratándolo como el tono 500, mezclándolo hacia el blanco para los tintes más claros y hacia el negro para los tonos más oscuros, y derivando acentos vivos del mismo matiz.

        
      

      

        
Cómo generar una paleta Material Design

        
Parte de cualquier color y obtén una paleta Material lista para pegar en segundos. Todo se actualiza en vivo a medida que escribes.

        
  1. Elige un color con la muestra o pega un valor hex como #3f51b5.
  2. Escribe un nombre para la paleta, por ejemplo primary o brand.
  3. Revisa los tonos 50–900 y los acentos A100–A700 en las muestras en vivo.
  4. Elige variables CSS, un mapa SCSS o JSON como formato de salida.
  5. Haz clic en Copiar paleta y pégala directamente en tu proyecto.

      

      

        
Tonos primarios frente a colores de acento

        
Las paletas Material tienen dos partes. Los tonos primarios (50–900) son tintes y sombras de tu color base que se usan para superficies, texto y áreas grandes, donde el 500 actúa como color principal. Los colores de acento (A100–A700) son variantes más saturadas y vistosas pensadas para destacados como botones, controles deslizantes y botones de acción flotantes. Este generador produce ambos conjuntos para que tu tema Material esté completo y listo para incorporar a tus tokens de diseño.

        
      

      

        
¿Por qué usar este generador de colores Material?

        
  • Genera los diez tonos primarios Material (50–900) a partir de un solo color base.
  • Añade los cuatro colores de acento Material A100, A200, A400 y A700.
  • Las muestras en vivo presentan cada tono con su valor hex y texto de contraste legible.
  • Exporta como variables CSS, un mapa SCSS o tokens de diseño JSON.
  • Pone nombre a tu paleta para que las claves encajen directamente en tu código.
  • 100% gratis y privado — todo se ejecuta en tu navegador.

      

      

        
Preguntas frecuentes

        

          
¿Qué tonos usa Material Design?

          
Una paleta de Material Design usa diez tonos primarios — 50, 100, 200, 300, 400, 500, 600, 700, 800 y 900 — donde el 50 es el tinte más claro y el 900 el tono más oscuro, con el 500 tratado como base. También añade cuatro tonos de acento etiquetados A100, A200, A400 y A700. Este generador produce cada uno de esos tonos a partir del color que elijas.

        

        

          
¿Cómo se calcula la paleta?

          
La herramienta trata tu color de entrada como el tono 500. Lo mezcla hacia el blanco en cantidades crecientes para crear los tintes más claros 50–400, y hacia el negro para crear los tonos más oscuros 600–900. Los colores de acento se derivan del mismo matiz mediante variaciones HSV de alta saturación, por lo que se ven más brillantes y vivos que los tonos primarios.

        

        

          
¿Para qué se usan los colores de acento?

          
Los colores de acento (A100–A700) son los colores intensos y de alto contraste de una paleta Material. Se usan para destacados interactivos como botones de acción flotantes, interruptores, controles deslizantes y estados de selección, donde quieres que el elemento resalte frente a los colores de superficie primarios más sobrios.

        

        

          
¿Cómo añado la paleta a mi proyecto?

          
Elige el formato de salida que encaje con tu stack. Las variables CSS se colocan en un bloque :root, el mapa SCSS funciona con mixins de tematización al estilo Material, y el formato JSON se adapta a tokens de diseño u objetos de tema en JavaScript. Copia el código generado y pégalo donde definas tus colores.

        

        

          
¿Se envían mis datos de color a algún sitio?

          
No. Toda la paleta se genera en tu navegador con JavaScript. No se sube nada sobre tus colores ni el nombre de tu paleta, así que la herramienta funciona sin conexión y es segura para trabajos de marca aún no publicados.