Personaliza tu interfaz con los colores de Material You

Android lleva años ofreciéndonos muchas más opciones de personalización que otros sistemas, pero con la llegada de Material You y su sistema de color dinámico la cosa se ha ido de madre (en el buen sentido). Ya no hablamos solo de cambiar el fondo de pantalla: ahora la interfaz entera se «pinta» sola a partir de tus gustos, tu marca o incluso el contenido de tu propia app.

Este nuevo enfoque no es solo un lavado de cara. Material You combina diseño, accesibilidad y personalización profunda, incluyendo la paleta dinámica para que tanto usuarios como diseñadores y desarrolladores puedan jugar con los colores sin romper la coherencia visual del sistema ni la identidad de una marca.

¿Qué es Material You y en qué se diferencia del Material Design clásico?

Material You, también conocido como Material Design 3 (M3), es la evolución del sistema de diseño de Google lanzada junto con Android 12 en 2021. Mientras que el Material Design original de 2014 se centraba en ofrecer una estética coherente y componentes reutilizables, Material You pone el foco en que la interfaz se adapte a cada persona, dispositivo y contexto.

En su base, sigue siendo un lenguaje de diseño completo para UX y UI, con guías de tipografía, color, movimiento, componentes y patrones de interacción. Sin embargo, la estética cambia bastante respecto a las primeras versiones: menos sombras, menos estilos tipográficos, formas más suaves y redondeadas y un aspecto bastante más minimalista.

El objetivo de Google es ofrecer un conjunto de principios y directrices unificados que mezclen los fundamentos del buen diseño con las posibilidades técnicas actuales: sistemas de color generativos, animaciones fluidas, adaptabilidad a miles de tamaños de pantalla y soporte para temas claros/oscuro y variaciones intermedias sin que el diseñador tenga que diseñar cada pantalla a mano.

temas para móviles Xperia basados en PlayStation

Del Material Design original a Material You: cambio de mentalidad

Con el primer Material Design, Google introdujo ideas como el “material metafórico” (papel digital con profundidad), el uso intenso del color y la tipografía («Bold, Graphic, Intentional») y el movimiento significativo para indicar jerarquía y causa-efecto. Elementos como las tarjetas, el botón de acción flotante, las barras de aplicación o los paneles deslizantes se convirtieron en estándar de la interfaz Android.

En aquellos tiempos, los equipos de producto tenían que memorizar tamaños de componentes, jerarquías tipográficas, elevaciones, sombras y estados para muchas variantes de pantalla. Con las sucesivas revisiones de Material Design se fueron puliendo detalles, pero no cambió la lógica de fondo: la marca imponía el color, y el usuario apenas podía alterar algunos detalles superficiales.

Material You rompe ese esquema: ahora la interfaz ya no está pensada solo desde la marca hacia el usuario, sino también desde el usuario hacia el sistema. El diseño se vuelve más simple, más flexible y más «tematizable» sin perder estructura. Las guías oficiales de Material Design se han actualizado para mostrar, componente a componente, cómo pasar de Material Design 2 a Material You y qué tamaños, colores y tipografías usar en cada caso.

Material You en el ecosistema Android: más allá de los Pixel

Cuando se presentó, muchos pensaron que Material You sería algo exclusivo de los Google Pixel. Nada más lejos: desde Android 12, el sistema de color dinámico y los principios visuales de Material You están disponibles para una gran variedad de dispositivos Android de distintos fabricantes, incluyendo móviles, tablets, relojes inteligentes y otros formatos.

Esto significa que se puede lograr una experiencia coherente en todo el ecosistema: el mismo usuario puede ver un estilo visual alineado en su teléfono, su tablet y su smartwatch, con la misma paleta derivada de su fondo de pantalla o de los colores de su marca, siempre que el fabricante y las apps usen correctamente las APIs y las guías de Material You.

Color dinámico: la clave para personalizar tu interfaz

La pieza central de Material You es el color dinámico. Este sistema permite que el propio Android genere, a partir de un solo color de origen (seed color), un conjunto de paletas tonales completo y accesible que se aplica al sistema y a las apps compatibles. El resultado es que el usuario siente que el teléfono «va a juego» con su fondo y con su estilo.

En Android 12, el color dinámico se basaba principalmente en el fondo de pantalla escogido: el sistema analizaba la imagen, elegía un color predominante apto y generaba la paleta. Con Android 13, el sistema da un paso más y ofrece varias paletas alternativas derivadas de ese mismo fondo, de modo que el usuario puede elegir entre diferentes variaciones que siguen estando en armonía con su wallpaper.

El flujo estándar que propone Google para OEM y desarrolladores de sistema consta de cuatro pasos: el usuario elige fondo o tema, se define un único color de origen, AOSP lo expande a cinco paletas tonales con 13 tonos cada una (65 colores en total), y la interfaz de sistema y apps utiliza esos atributos de color de forma coherente.

Cómo se generan las paletas de Material You

Detrás de toda esta magia hay bastante ciencia del color. Material You utiliza algoritmos de cuantificación y manipulación en el espacio de color CAM16 para pasar de un color de origen a todo un sistema cromático completo. El proceso, simplificado, pasa por estas etapas:

Selección del color base: a partir del fondo de pantalla o de un valor definido por la app o el sistema, se escoge un color que cumpla requisitos mínimos de croma (por ejemplo, valor CAM16 mayor o igual a 5) para evitar tonos apagados o sucios.
Generación de cinco colores clave complementarios: accent1, accent2, accent3, neutral1 y neutral2, cada uno con un papel distinto: acentos principales, secundarios, terciarios y neutrales para fondos y superficies.
Creación de paletas tonales: cada color clave se convierte en una paleta con 13 niveles de tono (luminancia distinta), generando así los 65 colores que se exponen vía APIs de sistema.

La lógica de AOSP define, por ejemplo, que system_accent1 mantenga la tonalidad original con cromas específicos según el nivel, que system_accent3 rote 60 grados el tono para añadir contraste, o que system_neutral1 y neutral2 tengan cromas bajos (4 y 8) para servir como fondos discretos pero relacionados con el color base.

De dónde salen los colores de origen

Material You contempla tres grandes fuentes para el color de origen, lo que nos da bastante flexibilidad tanto para personalización del usuario como para branding:

Fondo de pantalla del usuario: es la opción más visible. El sistema analiza el wallpaper (incluidos fondos dinámicos o de vídeo) mediante cuantificación de color y selecciona un único tono representativo cuando el usuario lo establece o al apagar y encender la pantalla.
Contenido de la app o del sitio web: las propias aplicaciones pueden analizar su contenido (por ejemplo, imágenes destacadas, portada, identidad gráfica) para extraer un color predominante y generar esquemas coherentes con lo que muestran.
Color definido manualmente: tanto el sistema como las herramientas de diseño (por ejemplo, Material Theme Builder) permiten introducir un color hex manual como «Primary» o como paleta de marca, desde el que se genera automáticamente todo el esquema de color.

Además, en dispositivos donde la extracción de color del fondo de pantalla no es viable, se puede optar por paletas no dinámicas basadas en la paleta Material por defecto, desactivando la lógica de monetización (flag_monet) pero manteniendo la posibilidad de que el usuario escoja temas predeterminados.

Control para diseñadores y marcas: no todo lo decide el algoritmo

Una duda muy habitual entre diseñadores es si esta generación automática de colores va a destrozar los sistemas de diseño y las identidades visuales en los que tanto han trabajado. La respuesta corta es que no: Material You está pensado para que los equipos tengan el control granular que necesiten.

Como diseñador UX/UI o desarrollador, puedes definir colores de base, tokens de diseño y excepciones para elementos críticos. Es posible indicar qué componentes sí deben seguir la paleta dinámica y cuáles deben permanecer anclados a los colores de marca. Incluso puedes decidir que tu app o tu web no adopten el color dinámico en absoluto si eso compromete la identidad visual.

Para facilitar este trabajo, Google ha creado herramientas como Material Theme Builder para Figma y un visualizador de temas dinámicos que permite previsualizar cómo se verán tus diseños con paletas generadas a partir de fondos de pantalla u otros colores fuente.

Material Theme Builder: creando temas personalizados con tus colores

Material Theme Builder es un complemento de Figma que genera tokens de color, paletas tonales y esquemas accesibles a partir de colores de marca o de colores dinámicos, listo para usarse tanto en diseño como en implementación.

Su funcionamiento gira en torno a varios conceptos clave:

Esquema personalizado (custom scheme): en lugar de derivar el esquema del fondo de pantalla, lo haces de uno o varios colores de marca. M3 ajusta estos colores al espacio de color del sistema para garantizar accesibilidad y coherencia con los posibles esquemas dinámicos.
Roles de color: cada tono de las paletas tonales se asigna a un rol funcional en la UI (colorPrimary, colorOnPrimary, colorSurface, colorOnSurface, etc.). Esto se traduce después en componentes concretos: botones, fondos, texto, chips, tarjetas, etc.
Tokens de diseño: en lugar de usar códigos hex en bruto, trabajas con nombres semánticos (por ejemplo, primaryContainer, onSurfaceVariant) que representan decisiones de diseño reutilizables y facilitan la traducción del diseño al código.

En el plugin puedes introducir un color primario de marca; a partir de él se propagan el resto de colores clave. Luego podrás ajustar secundarios, terciarios y neutrales según lo que necesites. Todo se convierte en estilos de Figma que puedes aplicar a tus componentes o al design system de tu organización.

Cambio de Tema y Paleta de Colores Dinámica (Material You)

Extender el esquema: colores adicionales y usos semánticos

En muchos proyectos no basta con los cinco colores clave. Por eso, Material Theme Builder permite ampliar el esquema con colores personalizados (por ejemplo, Custom0, Custom1, etc.) que pasan por el mismo proceso de generación tonal.

Estos colores extra pueden representar estados semánticos (éxito, alerta, info), variantes de producto o matices adicionales de una marca. El plugin genera la paleta tonal y los roles correspondientes para que sigan siendo accesibles, y tú eliges dónde usarlos: etiquetas, badges, gráficos, estados especiales, etc.

Desde el panel de estilos de Figma puedes renombrar estos colores personalizados para que tengan sentido en tu contexto (por ejemplo, custom0 → brandSecondaryHighlight) y asignarlos fácilmente a tus componentes. Si decides eliminar alguno, puedes borrar el estilo; la próxima vez que abras el plugin desaparecerá de la configuración.

Tokens, jerarquía visual y aplicación del tema

Una vez creado el tema, el siguiente paso es aplicarlo a tus maquetas. Los componentes oficiales de Material Design ya vienen mapeados a roles de color, de forma que, al cambiar el tema con el plugin, sus estilos se actualizan automáticamente.

Para componentes personalizados, tendrás que asignar manualmente los estilos de Figma: por ejemplo, usar un contenedor terciario para una tarjeta especial, o un onSurfaceVariant para textos secundarios. Esto permite experimentar con distintas jerarquías de color sin tener que rehacer todo el diseño.

En producción, estos roles y tokens se trasladan a atributos de tema en las librerías de Material. Por ejemplo, en temas claros con color dinámico, colorPrimary puede mapearse a system_accent1_600 y colorOnPrimary a system_accent1_0; en temas oscuros, a otras combinaciones que mantengan el contraste adecuado. Material 3 también define atributos específicos para estados (content y layers de estado) que se apoyan en tonos concretos de las paletas para hover, pressed, disabled, etc.

Uso del color en SysUI y en las apps

El sistema operativo Android aplica estos 65 atributos de color para pintar prácticamente toda la interfaz de sistema: panel de notificaciones, ajustes rápidos, ajustes del sistema, widgets, fondo de la app de ajustes, indicadores, etc.

En la UI del sistema, los roles se reparten de forma que se garantice legibilidad y continuidad visual. Por ejemplo, los fondos suelen usar tonos bajos de neutral1, mientras que los textos de alto énfasis recurren a tonos altos de neutral1 para maximizar el contraste. Las superficies flotantes y tarjetas combinan neutrales con acentos suaves para mantener una jerarquía clara sin saturar al usuario.

Las apps que usan componentes de Material para Android pueden adoptar automáticamente el color dinámico si habilitan el soporte y se apoyan en los temas y roles recomendados. Esto es lo que ya hacen muchas apps de Google como Gmail, Play Store, Drive, Cámara de Google o Android Auto: botones, barras de navegación, campos de búsqueda y otros componentes se repintan siguiendo la paleta dinámica o el esquema de marca adaptado.

Experiencia del usuario: cómo se ve Material You en el día a día

Para el usuario final, todo este entramado técnico se traduce en una experiencia bastante directa: cambias el fondo de pantalla y todo el teléfono cambia de color manteniendo una armonía visual muy agradable.

En la pantalla de inicio, los iconos (si activas los iconos tematizados) y los widgets adoptan el color de acento generado. Los widgets oficiales de Google y de fabricantes que sigan las guías se integran perfectamente con el fondo y el resto de la interfaz, dando una sensación de continuidad que antes no existía.

En el panel de notificaciones y ajustes rápidos, las tarjetas de Wi-Fi, Bluetooth, linterna o modo avión cambian de tonalidad según el tema activo. La barra de brillo se colorea con el acento y el sistema ajusta automáticamente el color del texto y los iconos según el modo claro u oscuro para garantizar que siempre se lea bien.

La app de Ajustes también se beneficia: se aplican colores de acento más suaves a cabeceras, sliders y elementos interactivos, de forma que se percibe el tema sin que interfiera con la lectura del contenido. Cuando entras en secciones concretas, interruptores, radios y botones siguen el mismo esquema cromático.

Dónde encontrar y cómo usar las opciones de Material You en tu móvil

En un dispositivo con Android 12 o superior, las opciones de personalización de Material You suelen estar en Ajustes > Fondo de pantalla y estilo (la ruta exacta puede variar según el fabricante).

Desde ahí puedes:

Cambiar el fondo de pantalla y dejar que el sistema genere automáticamente la paleta dinámica.
Elegir entre «Colores del fondo de pantalla», que son paletas derivadas de la imagen, o «Colores básicos», que son combinaciones estándar no ligadas al wallpaper.
Activar o desactivar iconos tematizados en la pantalla de inicio, si tu launcher lo soporta.

Los cambios se aplican al vuelo, de modo que puedes probar distintas combinaciones y ver el resultado en tiempo real. Algunas capas de personalización de fabricantes añaden además selectores de temas propios que se integran (mejor o peor) con el sistema de color dinámico.

Control avanzado del color: ThemePicker, APK stub y variantes de tema

Para fabricantes (OEM) y desarrolladores de sistema, Android ofrece herramientas adicionales para definir paletas básicas, colores personalizados y variantes de estilo más allá de la simple extracción automática.

Si se usa la app ThemePicker de AOSP, se puede configurar un APK «stub» que contenga únicamente recursos de color básico y sus nombres. A través de un archivo XML en res/xml con un array de bundles (color1, color2, etc.) y las cadenas descriptivas correspondientes, se definen los nombres que aparecerán en el selector. En otro XML se especifican los valores hex reales para cada color primario y secundario de cada bundle.

En Android 13 y posteriores, además del color de la paleta se maneja el atributo android.theme.customization.theme_style, con variantes como:

TONAL_SPOT: el tema Material You por defecto desde Android 12 (S).
VIBRANT: paletas más intensas en acentos 2 y 3, análogas al acento principal.
EXPRESSIVE: tema muy cromático, más «atrevido».
SPRITZ: tema desaturado, casi en escala de grises.

Estos parámetros se envían en JSON a Settings.Secure.THEME_CUSTOMIZATION_OVERLAY_PACKAGES, especificando la paleta de sistema (por ejemplo, «B1611C») y el estilo de tema. En Android 12 y anteriores, se usaba también android.theme.customization.accent_color, que en versiones recientes se ha dejado de utilizar.

Movimiento y widgets en Material You

Material You no se queda solo en el color. El movimiento fluido y los widgets actualizados forman parte esencial de la experiencia moderna que Google quiere para Android.

En cuanto al movimiento, Android 12 introdujo un efecto de desplazamiento excesivo elástico, donde las listas «se estiran» de forma sutil cuando llegas a su fin. En dispositivos con hardware potente, este estiramiento es no lineal y muy suave; en dispositivos más modestos, se simplifica para no castigar el rendimiento.

La ondulación táctil (ripple) también se ha refinado: ahora es más discreta, con una animación de relleno suave que da feedback sin resultar agresiva. No hace falta integrar nada especial para aprovecharla, pero sí conviene probarla en cada dispositivo para evitar regresiones visuales.

Con los widgets, Google ha publicado nuevas APIs para tamaños, parámetros de diseño y esquinas redondeadas. Los OEM deben soportar estas APIs y las propias apps deberían actualizar o crear widgets compatibles con Material You, aprovechando el color dinámico, las esquinas y el espaciado actualizados para integrarse bien en el launcher.

Ventajas y limitaciones actuales de Material You

La adopción de Material You ha dado un aire fresco a Android: el sistema se siente más personal, cohesionado y moderno. El diseño adaptativo al fondo de pantalla da una sensación de «propiedad» del dispositivo, sobre todo cuando todas las piezas encajan: sistema, apps de Google, widgets y apps de terceros que se suman a la fiesta.

Sin embargo, todavía hay algunas limitaciones e inconsistencias que vale la pena tener en cuenta:

No todas las apps soportan color dinámico, por lo que a veces pasas de una pantalla muy integrada a otra con un look & feel completamente distinto.
Los iconos tematizados, aunque muy vistosos, pueden hacer más difícil reconocer algunas apps de un vistazo si sus pictogramas no son muy distintivos.
Algunos fabricantes no abrazan Material You de forma plena en sus capas de personalización; otros lo reinterpretan tanto que se pierde parte de la coherencia original pensada por Google.

Aun con esas pegas, la dirección es clara: Google está empujando a OEM y desarrolladores para que integren el sistema de paletas tonales dinámicas y temas adaptativos, hasta el punto de exigir ciertas implementaciones para formar parte de la «lista blanca» de dispositivos que activan oficialmente el soporte de color dinámico para apps de terceros.