Generador Material Design
Genera paletas completas siguiendo las guías de Material Design de Google
Genera una paleta completa de 10 tonos (50-900) siguiendo el sistema de diseño Material Design de Google. Ideal para crear sistemas de diseño consistentes.
Color Base
rgb(33, 150, 243)
Consejo
El tono 500 será tu color base. Los tonos más bajos son más claros, los más altos son más oscuros.
Paleta Generada
#eff3f6
#dce7ef
#b5cfe3
#89b7dc
#59a0d9
#0d8df2
#0c7fda
#0a70c2
#0962a9
#074679
Exportar Código
:root {
--primary-50: #eff3f6;
--primary-100: #dce7ef;
--primary-200: #b5cfe3;
--primary-300: #89b7dc;
--primary-400: #59a0d9;
--primary-500: #0d8df2;
--primary-600: #0c7fda;
--primary-700: #0a70c2;
--primary-800: #0962a9;
--primary-900: #074679;
}Guía de Uso
Tonos
- • 50-200: Fondos claros, superficies elevadas
- • 300-500: Colores primarios, botones, enlaces
- • 600-900: Texto sobre fondos claros, énfasis
Recomendaciones
- • 500: Color principal de tu marca
- • 700: Estados hover y activos
- • 50-100: Fondos y superficies
Cómo funciona
Material Design es el sistema de diseño de Google que define cómo crear paletas de colores consistentes.
Estructura de una paleta Material
- 50-100: Tonos muy claros para fondos
- 200-400: Tonos claros para elementos secundarios
- 500: Color base principal
- 600-700: Tonos para hover y estados activos
- 800-900: Tonos oscuros para texto y acentos
- A100-A700: Colores de acento vibrantes
💡 Ejemplos de uso prácticos
Caso 1: App Android con tema personalizado
Tu app necesita un tema basado en el color corporativo #6366F1.
→ Genera la paleta completa 50-900
→ Primary: 500, PrimaryDark: 700, Accent: A200
Caso 2: Componentes React/Angular Material
Configurar tema personalizado en Angular Material o MUI.
→ Exporta la paleta como objeto JS
→ Úsala directamente en createTheme() o $mat-palette
Caso 3: FAB y elementos destacados
Necesitas que el botón flotante destaque sobre la UI.
→ Usa color A200 o A400 para máxima vibrancia
→ Contrasta con el color primario 500