Paleta de colores Material Design

Las 19 familias de colores con códigos HEX, variables CSS y verificación de contraste. Haz clic en cualquier color para copiar.

Descargar CSS

{{ family.label }}

{{ color.shade }} {{ color.hex }} 
{{ usageExample }}
Texto blanco {{ whiteContrast.toFixed(1) }}:1
Texto negro {{ blackContrast.toFixed(1) }}:1
{{ lastCopied.cssVar }}

¿Qué es el sistema de colores Material Design?

El sistema de colores Material Design de Google incluye 19 familias de colores, cada una con 10 tonos principales (50, 100–900) y hasta 4 tonos de acento (A100–A700). Proporciona un lenguaje de color consistente para sitios web y aplicaciones.

¿Cómo usar los colores Material Design en CSS?

Descarga el archivo CSS con todas las variables e inclúyelo en tu proyecto. Luego usa los colores mediante Custom Properties de CSS como var(--color-md-teal-500). También puedes usar los códigos HEX directamente.

Consejos para elegir colores

  • Elige un color primario (ej. Teal 500) y un color de acento de otra familia.
  • Usa tonos más claros (50–200) para fondos y más oscuros (700–900) para texto.
  • Asegúrate de tener suficiente contraste (al menos 4.5:1) entre texto y fondo para accesibilidad.
  • El tono 500 es la representación estándar de cada familia de colores e ideal como color primario.