Referencia de Colores Material Design
Referencia buscable de todos los tokens de color de Material Design 3 (Material You): 37 roles de color con valores de tema claro y oscuro, 6 paletas tonales con 13 pasos de tono cada una, y nombres de variables CSS para cada token. Haz clic en cualquier muestra o valor HEX para copiarlo. Sin registro.
Searchable reference of all Material Design 3 (Material You) color tokens - dynamic color roles, tonal palettes, and CSS variable names. Click any swatch or HEX value to copy it. Toggle between light and dark theme values.
| Swatch | Token | HEX |
|---|---|---|
Primary High-emphasis elements, key actions, and active states. | ||
On Primary Text and icons on top of Primary. | ||
Primary Container Filled tonal button backgrounds and selected states. | ||
On Primary Container Text and icons on top of Primary Container. | ||
Inverse Primary Primary color in inverse surfaces (e.g. snackbars). | ||
Secondary Less prominent components and alternative actions. | ||
On Secondary Text and icons on top of Secondary. | ||
Secondary Container Tonal button backgrounds for secondary actions. | ||
On Secondary Container Text and icons on top of Secondary Container. | ||
Tertiary Contrasting accents to balance primary and secondary. | ||
On Tertiary Text and icons on top of Tertiary. | ||
Tertiary Container Tonal button backgrounds for tertiary actions. | ||
On Tertiary Container Text and icons on top of Tertiary Container. | ||
Error Error states, destructive actions, and validation failures. | ||
On Error Text and icons on top of Error. | ||
Error Container Background for error banners and input error states. | ||
On Error Container Text and icons on top of Error Container. | ||
Background The app background behind all other surfaces. | ||
On Background Text and icons on top of Background. | ||
Surface Card, sheet, and dialog backgrounds. | ||
On Surface Text and icons on top of Surface. | ||
Surface Variant Alternative surface for chips, input fields, and cards. | ||
On Surface Variant Text and icons on top of Surface Variant. | ||
Surface Tint Tint color applied to elevated surfaces (same as Primary). | ||
Inverse Surface Inverse surface for snackbars and tooltips. | ||
Inverse On Surface Text and icons on top of Inverse Surface. | ||
Surface Dim Dimmed surface for scrim overlays and disabled states. | ||
Surface Bright Brightest surface variant for elevated containers. | ||
Surface Container Lowest Lowest elevation surface container. | ||
Surface Container Low Low elevation surface container. | ||
Surface Container Default surface container. | ||
Surface Container High High elevation surface container. | ||
Surface Container Highest Highest elevation surface container. | ||
Outline Borders for text fields, dividers, and focus rings. | ||
Outline Variant Subtle borders for cards and decorative dividers. | ||
Shadow Drop shadow color for elevated components. | ||
Scrim Overlay color for modal backdrops and drawers. |
Color values shown are the Material Design 3 baseline (default) palette. Dynamic color (Material You) generates custom palettes from user wallpapers at runtime - these baseline values are the fallback when dynamic color is not available. Click any swatch or HEX value to copy it to your clipboard.
¿Por qué usar nuestra Referencia de Colores Material Design?
- Referencia completa de tokens de Material Design 3: todos los roles de color de Material Design 3 (primary, secondary, tertiary, error, surface, background, outline, shadow y scrim) con valores de tema claro y oscuro. Incluye las 6 paletas tonales con 13 pasos de tono cada una.
- Búsqueda instantánea y filtrado por rol: busca por nombre de token, nombre de variable CSS, valor HEX o descripción. Filtra por rol de color para centrarte en los tokens que necesitas. Los resultados se actualizan al instante con cada pulsación de tecla.
- Valores de tema claro y oscuro: alterna entre los valores de tema claro y oscuro con un clic. Cada rol de color muestra el valor de token correcto para ambos temas, esencial para crear interfaces Material You adaptables.
- 100 % gratis - sin registro: totalmente gratis, sin cuenta, sin nivel premium, sin límites de uso y sin anuncios que bloqueen la interfaz. Consulta los colores de Material Design 3 tantas veces como necesites.
Casos de uso comunes de la Referencia de Colores Material Design
- Desarrollo de apps Android: los desarrolladores de Android usan la referencia de colores de Material Design para implementar los roles de color correctos en Jetpack Compose y en diseños XML. La referencia muestra valores de tema claro y oscuro para cada token, eliminando la necesidad de consultarlos en la documentación oficial.
- Desarrollo Flutter y multiplataforma: los desarrolladores de Flutter usan la referencia de colores de Material Design para configurar ColorScheme en su ThemeData. Los valores de la paleta tonal se corresponden directamente con el sistema de color Material 3 de Flutter, facilitando la implementación de colores de marca personalizados.
- Implementación web de Material Design: los desarrolladores web que implementan Material Design 3 con Material Web Components usan los nombres de variables CSS de esta referencia para sobrescribir los tokens de tema predeterminados y aplicar colores de marca personalizados.
- Configuración del sistema de diseño en Figma: los diseñadores que configuran Material Design 3 en Figma usan la referencia de colores para rellenar sus estilos y variables de color. Los valores de la paleta tonal ofrecen el conjunto completo de muestras necesario para un sistema de diseño Material You.
- Color dinámico de Material You: los desarrolladores que implementan el color dinámico de Material You usan los valores de token de referencia como respaldo cuando la paleta generada a partir del fondo de pantalla del usuario no está disponible. Esta referencia ofrece todos los valores de referencia para temas claros y oscuros.
- Verificación de accesibilidad y contraste: los ingenieros de accesibilidad usan la referencia de colores de Material Design para verificar que las parejas de roles de color (por ejemplo, Primary + On Primary) cumplen los requisitos de contraste WCAG. Los roles on-color están diseñados específicamente para garantizar un contraste legible.
¿Qué es Material Design 3 (Material You)?
Material Design 3 (también llamado Material You) es el sistema de diseño más reciente de Google, presentado en 2021 con Android 12. Su sistema de color se basa en el color dinámico: la capacidad de generar una paleta de color completa a partir del fondo de pantalla del usuario en tiempo de ejecución. El sistema define un conjunto de roles de color (tokens semánticos como «Primary», «On Primary», «Surface») que se asignan a tonos específicos de una paleta tonal. Esta separación de roles y valores permite que toda la interfaz se adapte a cualquier marca o color generado por el usuario manteniendo un contraste y una accesibilidad coherentes. Nuestra referencia de colores de Material Design proporciona todos los valores de token de referencia para temas claros y oscuros.
Cómo funciona el sistema de color de Material Design 3
- Paletas tonales: Material Design 3 genera seis paletas tonales a partir de un color semilla: Primary, Secondary, Tertiary, Error, Neutral y Neutral Variant. Cada paleta contiene 13 tonos desde 0 (negro) hasta 100 (blanco), ofreciendo una gama completa de valores de luminosidad.
- Roles de color: los roles de color son tokens semánticos que se asignan a tonos específicos de las paletas tonales. Por ejemplo, «Primary» se asigna al tono 40 en tema claro y al tono 80 en tema oscuro. «On Primary» se asigna al tono 100 en claro y al tono 20 en oscuro.
- Color dinámico: en Android 12 o superior, Material You genera paletas tonales personalizadas a partir del fondo de pantalla del usuario. Los roles de color se asignan entonces a las mismas posiciones de tono en la paleta personalizada, produciendo una interfaz totalmente personalizada. Los valores de referencia de esta página son el respaldo cuando el color dinámico no está disponible.
Grupos clave de roles de color
- Primary / On Primary / Primary Container: el color de marca principal y sus variantes. Primary se usa para acciones clave y elementos de alta énfasis. Primary Container se usa para botones tonales rellenos y estados seleccionados.
- Secondary y Tertiary: colores de apoyo para componentes menos prominentes y acentos contrastados. Secondary se usa para chips y acciones alternativas; Tertiary aporta un tercer acento para el equilibrio visual.
- Surface y Background: los colores neutros usados para fondos de tarjetas, hojas, diálogos y el fondo de la app. Material Design 3 introduce varios niveles de contenedor de superficie (lowest, low, default, high, highest) para el tintado basado en elevación.
- Outline y Outline Variant: colores de borde para campos de texto, separadores y anillos de enfoque. Outline se usa para bordes prominentes; Outline Variant para separadores decorativos sutiles.
Uso de variables CSS
Material Web Components (la implementación web oficial de Material Design 3) usa propiedades personalizadas de CSS con el prefijo --md-sys-color- para todos los tokens de color. Puedes sobrescribir cualquier token estableciendo la variable CSS en tu hoja de estilos: :root { --md-sys-color-primary: #tu-color; }. Esta referencia proporciona el nombre exacto de la variable CSS de cada token, lo que facilita copiarlo y pegarlo en tu implementación.
Preguntas frecuentes
Material Design 3 es el sistema de diseño más reciente de Google, con color dinámico que genera paletas a partir de los fondos de pantalla del usuario. Esta referencia proporciona todos los valores de token de referencia para temas claros y oscuros.
Una paleta tonal son 13 tonos de color (0-100) a partir de un color semilla. Un rol de color es un token semántico que se asigna a un tono específico; por ejemplo, «Primary» se asigna al tono 40 en claro y al tono 80 en oscuro.
Material Web Components usa el prefijo --md-sys-color-. Por ejemplo, Primary es --md-sys-color-primary. Esta referencia muestra el nombre exacto de la variable CSS de cada token.
Usa ColorScheme.fromSeed() o especifica manualmente cada rol en ColorScheme(). Convierte HEX a Color de Flutter usando Color(0xFF + hex sin #).
Usa dynamicColorScheme() para Material You o crea un ColorScheme personalizado con los valores de los tokens. Convierte HEX a Color de Compose usando Color(0xFF6750A4).
Cada rol usa valores de tono distintos según el tema: Primary es el tono 40 en claro y el tono 80 en oscuro. Alterna entre temas en esta referencia para ver los valores correctos.
El color dinámico genera una paleta personalizada a partir del fondo de pantalla del usuario en Android 12 o superior. Los valores de referencia aquí son el respaldo cuando el color dinámico no está disponible.
Sí. Estos son los valores oficiales de la paleta de referencia de Material Design 3 de m3.material.io, usando el color semilla morado predeterminado (#6750A4).
Sí. 100 % gratis, sin registro, sin nivel premium, sin cuotas de uso y sin anuncios que bloqueen la interfaz.