Sistema de colores de Material Design
Embed This Widget
Add the script tag and a data attribute to embed this widget.
Embed via iframe for maximum compatibility.
<iframe src="https://colorfyi.com/iframe/glossary/material-design/" width="420" height="400" frameborder="0" style="border:0;border-radius:10px;max-width:100%" loading="lazy"></iframe>Paste this URL in WordPress, Medium, or any oEmbed-compatible platform.
https://colorfyi.com/glossary/material-design/Add a dynamic SVG badge to your README or docs.
[](https://colorfyi.com/glossary/material-design/)Use the native HTML custom element.
El sistema de diseño integral de Google que define un enfoque estructurado para la selección de colores, la creación de temas y su aplicación en componentes de interfaz de usuario.
Material Design's color system is built around primary and secondary color roles, each with multiple tonal variants. Material Design 3 (Material You) introduced dynamic color, which generates an entire UI palette from a single seed color using the HCT (Hue-Chroma-Tone) color space. The system defines 13 tonal palettes and maps them to specific UI roles like surface, on-surface, primary-container, and on-primary. This systematic approach ensures consistent contrast ratios and visual hierarchy. The Material color utilities provide tools for generating accessible color schemes from any starting color.
Pruébelo
Generador de paletas
Genera paletas de colores armoniosas usando esquemas complementarios, análogos, triádicos y complementarios divididos.
Verificador de contraste
Verifica las relaciones de contraste de color según las directrices WCAG 2.1. Prueba el cumplimiento AA y AAA para texto normal y grande.