Generador de paleta Material Design
Elija un color base y obtenga al instante sus diez tonos, del más claro (50) al más oscuro (900), al estilo de las paletas tonales popularizadas por Material Design. El cálculo se realiza íntegramente en su navegador.
Cómo funciona
La herramienta considera su color base como el tono 500; después calcula los tonos más claros (50 a 400) mezclándolo progresivamente con blanco, y los tonos más oscuros (600 a 900) mezclándolo con negro, con proporciones crecientes a medida que se aleja del 500. El resultado es una paleta tonal coherente, lista para integrar en un sistema de diseño o en una guía de componentes.
¿Es exactamente el algoritmo oficial de Material Design?
No, Google calcula sus paletas oficiales con un algoritmo propietario basado en el espacio de color HCT, más complejo. Esta herramienta ofrece una aproximación mediante mezcla lineal hacia el blanco y el negro, que da un resultado visualmente cercano y directamente utilizable, sin pretender reproducir píxel por píxel las paletas oficiales de Material.
¿Cómo utilizo esta paleta en mi proyecto?
Haga clic en un tono para copiar su código HEX y úselo como variable CSS o token de diseño (por ejemplo --primary-500): los tonos claros suelen servir para fondos y estados deshabilitados, el tono 500 para el color principal y los tonos oscuros para el texto o los estados activos de alto contraste.
Todos los cálculos de color se realizan directamente en su navegador, sin ninguna llamada a un servidor externo.