Generador de paletas de color Material Design
Crea bonitas paletas de color basadas en las directrices Material Design de Google. Elige tus colores principal y de acento para generar un tema completo.
Generador de paletas
Paleta generada
Paleta de color completa de Material Design
Explora el conjunto completo de colores de Material Design. Haz clic en cualquier color para copiar su código hexadecimal.
Rojo
Rosa
Morado
Azul
Verde
Naranja
Verde azulado
Ámbar
Consejos de uso
- Usa el tono 500 como color principal
- Usa el tono 700 para las variantes más oscuras (como las barras de aplicación)
- Usa los colores de acento (A200, A400) para los botones de acción flotantes y los elementos destacados
- Asegura ratios de contraste adecuados para garantizar la accesibilidad
Generador profesional de colores Material Design
Accede al sistema de color completo de Google Material Design 3, con paletas Material You, tokens de color oficiales y opciones de exportación profesionales para el desarrollo de interfaces modernas y el diseño de aplicaciones Android.
¿Por qué elegir nuestro generador de Material Design?
Nuestra completa herramienta te da acceso al sistema de color íntegro de Material Design 3, con temas dinámicos Material You, tokens de color oficiales de Google y formatos de exportación profesionales.
- Material Design 3 system
- Material You palettes
- Official color tokens
- Dynamic theming
- Multiple export formats
- Developer-ready code
Sistema Material Design 3 completo
Accede al sistema de color completo de Material Design 3, con colores primarios, secundarios y terciarios, variantes de superficie y paletas tonales íntegras con roles de color semánticos.
Temas dinámicos Material You
Genera esquemas de color Material You a partir de colores semilla, con variantes automáticas de tema claro y oscuro y extracción de color personalizada para aplicaciones Android modernas.
Opciones de exportación listas para desarrollo
Exporta en propiedades personalizadas CSS, variables SCSS, tokens JSON, recursos XML para Android, tokens de Figma y datos de tema de Flutter, con convenciones de nomenclatura correctas.
Ideal para:
- Android app development
- Web applications
- Flutter projects
- Design systems
- UI component libraries
- Material UI theming
Cómo funciona:
Elige el sistema de color
Elige entre los colores clásicos de Material Design 3 o genera paletas Material You a partir de tu color semilla.
Personaliza y previsualiza
Ajusta los valores tonales, previsualiza los temas claro y oscuro y comprueba cómo funcionan los colores en los componentes de Material Design.
Exporta e implementa
Descarga los tokens de color en el formato que prefieras e intégralos directamente en tu flujo de trabajo de desarrollo.
Preguntas frecuentes
Material Design 3 es el sistema de diseño más reciente de Google, con roles de color y tokens semánticos mejorados. Material You es la capa de personalización que genera esquemas de color a medida a partir del fondo de pantalla del usuario o de colores semilla, creando temas dinámicos que se adaptan a las preferencias personales sin dejar de respetar los principios de MD3.
Introduce el color de tu marca o el tono que prefieras como color semilla. Nuestro algoritmo genera una paleta tonal completa con familias de color primaria, secundaria, terciaria, neutra y neutra variante, cada una con 13 variaciones tonales de 0 (negro) a 100 (blanco), siguiendo las especificaciones Material You de Google.
Exporta en propiedades personalizadas CSS, variables SCSS/Sass, tokens de diseño JSON, recursos XML para Android, objetos JavaScript/TypeScript, tokens de diseño de Figma, temas ColorScheme de Flutter y recursos de color de Swift para iOS. Todas las exportaciones incluyen convenciones de nomenclatura semántica adecuadas.
¡Sí! El sistema de color de Material Design 3 está pensado desde el principio para la accesibilidad. El sistema de paletas tonales garantiza ratios de contraste adecuados entre los colores de superficie y el texto que va sobre ellos. Nuestra herramienta muestra los niveles de cumplimiento de las WCAG y propone automáticamente combinaciones de color accesibles.
¡Por supuesto! Los colores de Material Design son de código abierto y pueden usarse en cualquier proyecto. Aunque el sistema se diseñó para los productos de Google, su ciencia del color y sus principios de accesibilidad lo hacen excelente para cualquier interfaz moderna, ya sea web, móvil o de escritorio.
Material Design 3 usa roles de color semánticos que se asignan automáticamente a los valores tonales adecuados en los temas claro y oscuro. Por ejemplo, «primary» usa el tono 40 en el tema claro y el tono 80 en el oscuro. Nuestro generador ofrece ambas variantes manteniendo el contraste y la accesibilidad correctos.