Paleta de Colores de Material Design Explora la paleta de colores completa de Material Design con todos los matices y acentos.
Colores de Material Design
Explora la paleta de colores completa de Material Design con todos los matices y acentos.
Seleccionar Familia
Elige una familia de colores como Rojo, Azul o Verde Azulado.
Explorar Sombras
Ver todas las sombras desde 50 (la más clara) hasta 900 (la más oscura), además de variantes de acento.
Copiar Colores
Copiar el código HEX de cualquier sombra con un solo clic.
What Is Colores de Material Design?
Colores de Diseño de Material es una referencia completa para el sistema de colores de Diseño de Material de Google, que presenta 19 familias de colores con sombras desde 50 hasta 900, además de variantes de acento (A100-A700). La paleta de Diseño de Material fue cuidadosamente diseñada por Google para proporcionar un conjunto equilibrado y completo de colores para el diseño de interfaces de usuario. Cada familia de colores ofrece una gama que va desde muy claro (50) hasta muy oscuro (900), con sombras de acento que proporcionan variantes vivas y saturadas para elementos de énfasis. La paleta está diseñada teniendo en cuenta la accesibilidad, con un contraste claro entre las sombras adyacentes. Se utiliza ampliamente en el desarrollo de aplicaciones de Android, Material UI (React), Angular Material, Flutter y aplicaciones web que siguen las pautas de Diseño de Material. La herramienta te permite navegar por familia, ver todas las sombras en una tira visual y copiar el código HEX de cualquier color.
Why Use Colores de Material Design?
-
Paleta de Material Design completa con las 19 familias
-
Sombras del 50 al 900, más variantes de acento (A100-A700)
-
Selector visual de familia de colores con navegación rápida
-
Tira de sombras que muestra todas las variantes a un vistazo
-
Copia de un solo clic para cada color
Common Use Cases
Desarrollo de Android
Selecciona colores de Material para aplicaciones de Android siguiendo las pautas de diseño de Google.
Material UI (React)
Encuentra valores exactos de color para la personalización del tema MUI.
Desarrollo de Flutter
Elige colores de Material para aplicaciones de Flutter con confianza.
Diseño Web
Crea sitios web inspirados en el diseño de Material con la paleta oficial de colores.
Technical Guide
El sistema de colores de Diseño de Material utiliza una convención de nomenclatura estructurada: Nombre de la Familia + Número de Sombra. Cada familia tiene 10 sombras estándar (50, 100, 200...900) y hasta 4 sombras de acento (A100, A200, A400, A700). Las sombras estándar progresan desde muy claro (50, adecuado para fondos) hasta muy oscuro (900, adecuado para texto). Las sombras de acento son variantes altamente saturadas diseñadas para botones de acción flotantes, elementos interactivos y énfasis. No todas las familias tienen acentos - Marrón, Gris y Azul Gris carecen de variantes de acento porque son neutrales. Los colores se diseñaron utilizando el espacio de color HCT (Hue, Chroma, Tone) en Diseño de Material 3 (Material You), que proporciona rampas de color más uniformes perceptualmente que HSL. La paleta garantiza un contraste WCAG AA entre la sombra 500 y el texto blanco, y entre las sombras más claras y el texto oscuro.
Tips & Best Practices
-
1La sombra 500 es la "primaria" de cada familia, úsala como base
-
2Las sombras del 50 al 200 funcionan bien para fondos y superficies
-
3Las sombras del 600 al 900 funcionan bien para texto en fondos claros
-
4Las sombras de acento (A100-A700) son para elementos de énfasis como FABs y enlaces
-
5Material Design 3 introduce colores dinámicos desde las imágenes de fondo del usuario, consulta Material You para actualizaciones
Related Tools
Convertidor de HEX a RGB
Convierta códigos de color HEX a valores RGB al instante con una vista previa en vivo.
🎨 Color Tools
Selector de colores
Selector de colores interactivo con salidas HEX, RGB, HSL y CMYK.
🎨 Color Tools
Paletas de colores de marca
Explora las paletas de colores oficiales de más de 50 marcas y empresas tecnológicas populares.
🎨 Color Tools
Buscador de colores Tailwind
Encuentra la clase de color CSS de Tailwind más cercana para cualquier código HEX.
🎨 Color Tools
Colores del sistema iOS y Android
Explora los colores del sistema para la interfaz de usuario de iOS y el diseño de Material Design de Android.
🎨 Color ToolsFrequently Asked Questions
Q ¿Es esta la paleta más reciente de Material Design?
Q ¿Por qué Brown, Grey y Blue Grey carecen de sombras de acento?
Q ¿Qué sombra debería usar para botones primarios?
About This Tool
Colores de Material Design is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.