Saltar al contenido

Colores de Material Design: paleta completa con acentos

La paleta clásica de Material Design de Google: 19 colores con sus tonos del 50 al 900 y los acentos A100 a A700. Copia cada color en HEX, RGB, HSL, OKLCH o con su nombre en MUI.

Ver colores UI
Copiar como

Valores de cada color

Elige un color para ver todos sus tonos con el nombre en MUI, HEX, RGB, OKLCH y el color de texto que mejor contrasta.

Blue

TonoMUIHEXRGBOKLCHTexto
50Aa18.4:1
100Aa15.0:1
200Aa12.0:1
300Aa9.5:1
400Aa7.9:1
500Aa6.7:1
600Aa5.7:1
700Aa4.6:1
800Aa5.7:1
900Aa8.6:1
A100Aa9.7:1
A200Aa6.3:1
A400Aa5.3:1
A700Aa4.9:1

Qué es Material Design y cómo se organiza su paleta

Material Design es el sistema de diseño que Google presentó en 2014 para unificar sus productos y Android. Su paleta reúne 19 colores, cada uno con diez tonos numerados del 50 (el más claro) al 900 (el más oscuro).

La diferencia con otras escalas son los acentos: A100, A200, A400 y A700, versiones más saturadas de cada color pensadas para botones, interruptores y otros elementos que deben destacar. Brown, Grey y Blue Grey no tienen acentos.

Cómo combinar un color principal y un acento

Las pautas originales de Material proponen elegir un color principal y usar su tono 500 en las superficies más visibles, como la barra superior, y el 700 para la barra de estado. Los tonos claros (50–200) sirven para fondos y elementos secundarios.

Para el acento se elige otra familia y uno de sus tonos A, normalmente el A200: así el botón de acción principal destaca sobre el resto. La combinación clásica es Indigo con un acento Pink.

Material Design 2 y Material 3: dos sistemas de color

Esta tabla recoge la paleta clásica de Material Design (versiones 1 y 2). Material 3, también llamado Material You, usa un sistema distinto.

Material Design 2 (esta paleta)

  • 19 colores fijos con tonos 50–900 y acentos A100–A700.
  • Los valores son siempre los mismos, por eso se pueden copiar de una tabla.
  • Es la paleta que incluye MUI (@mui/material/colors) y muchas plantillas.

Material 3 (Material You)

  • Las paletas se generan a partir de un color base, con 13 tonos del 0 (negro) al 100 (blanco).
  • En Android 12 y posteriores, el color base puede salir del fondo de pantalla (color dinámico).
  • Organiza el tema en roles: primary, secondary, tertiary, neutral y neutral variant.

Cómo usar los colores de Material en tu proyecto

Si trabajas con MUI (React), los colores vienen incluidos y se importan por familia. En cualquier otro proyecto, copia el HEX de la tabla y guárdalo como variable CSS.

MUI (React)

import { createTheme } from '@mui/material/styles';
import { indigo, pink } from '@mui/material/colors';

const theme = createTheme({
  palette: {
    primary: { main: indigo[500] },
    secondary: { main: pink.A200 },
  },
});

CSS

:root {
  /* indigo 500, indigo 700 and pink A200 */
  --primary: #3F51B5;
  --primary-dark: #303F9F;
  --accent: #FF4081;
}

Preguntas frecuentes

Son variantes más saturadas de cada color, pensadas para elementos que necesitan destacar, como botones, enlaces o iconos activos, a diferencia de los tonos principales (50 a 900), pensados para fondos y superficies.

Las pautas originales proponen el tono 500 para las superficies principales, como la barra superior, el 700 para la barra de estado y un acento de otra familia (normalmente A200) para el botón de acción principal.

Ambas usan una escala numerada de claro a oscuro, pero Material Design añade los tonos de acento (A100 a A700), que Tailwind no tiene. Además, los nombres y valores exactos de cada familia de color son distintos entre ambos sistemas.

Esta es la paleta clásica de Material Design. Las versiones más recientes del sistema (Material You) introducen paletas dinámicas generadas a partir de un color base, pero esta escala sigue siendo ampliamente usada y es compatible con proyectos que la referencian directamente.

MUI incluye esta misma paleta. Importa la familia desde @mui/material/colors y usa el tono como índice: indigo[500] o pink.A200. Elige «MUI» en «Copiar como» para copiar ese nombre directamente.

La paleta oficial no los define. Son colores neutros o apagados pensados para fondos, texto y elementos secundarios, no para destacar. Si necesitas un acento, combínalos con otra familia.

Sí. En «Copiar como» puedes elegir HEX, RGB, HSL, OKLCH o el nombre en MUI, y en la tabla de cada color tienes todos los formatos a la vez.