Generador de paletas Material Design

El generador conserva el color indicado en el nivel 500 y calcula los niveles claros del 50 al 400 y los oscuros del 600 al 900. Cada resultado se devuelve como texto #RRGGBB en mayúsculas, listo para copiar en CSS, un archivo de tema o un sistema de tokens. El cálculo es inmediato, reproducible y no depende de servicios de red ni de decisiones cromáticas subjetivas.

Parta de un color base fiable

Introduzca un color hexadecimal de seis dígitos con la almohadilla inicial, como #3F51B5. Ese valor se convierte en el tono 500, el punto de referencia visual de la escala generada. Un formato de entrada estricto evita ambigüedades entre notaciones abreviadas, valores con canal alfa y códigos hexadecimales sin almohadilla. Antes de elegir la base, considere dónde aparecerá con mayor frecuencia. Un color de marca empleado en botones puede necesitar contraste suficiente sobre superficies claras y oscuras, mientras que un color decorativo para gráficos quizá deba distinguirse de las series cercanas. El generador no modifica silenciosamente el punto de referencia para cumplir objetivos de contraste; conservar el nivel 500 permite relacionar la paleta con el color elegido. Los niveles bajos son progresivamente más claros y los altos, más oscuros. La salida utiliza valores de seis dígitos en mayúsculas para incorporarlos directamente a propiedades CSS, archivos JSON de tokens, temas de componentes o documentación. Las cadenas no válidas se rechazan en vez de interpretarse parcialmente o mediante suposiciones.

Comprenda cómo se crea la escala de tonos

La paleta sigue las etiquetas habituales de Material: 50, 100, 200, 300, 400, 500, 600, 700, 800 y 900. El nivel 500 coincide exactamente con la base proporcionada. Para el lado claro, cada canal rojo, verde y azul se mezcla con blanco en proporciones fijas; el tono 50 recibe la aclaración más intensa. Para el lado oscuro, los mismos canales se mezclan con negro y el tono 900 recibe el oscurecimiento mayor. Cada canal se redondea al entero más cercano y vuelve a expresarse en hexadecimal. La interpolación RGB fija hace que el algoritmo sea transparente y determinista: una misma entrada siempre produce los mismos diez valores en idéntico orden. También evita dependencias ocultas de perfiles de pantalla, gestión cromática del navegador, API de red o valores predeterminados cambiantes del software de diseño. Esta escala ofrece una familia tonal práctica al estilo Material, pero no implica que todos los intervalos tengan la misma luminosidad percibida. La visión humana responde de modo distinto a cada matiz; si necesita precisión perceptual, utilice el resultado como punto de partida estable y revíselo en su contexto real.

Aplique la paleta sin descuidar la accesibilidad

Asigne los valores devueltos a tokens semánticos en lugar de repartir números de tono por toda la aplicación. Por ejemplo, un tema puede reservar un tono para el fondo interactivo, otro para el estado al pasar el puntero y uno más claro para una superficie seleccionada. Centralizar esa correspondencia en una capa de tokens permite ajustar el sistema visual sin editar cada componente. Compruebe siempre las combinaciones de primer plano y fondo con el tamaño y el grosor tipográfico que vaya a publicar. La etiqueta de un tono no garantiza una relación de contraste concreta, y dos colores base diferentes pueden generar resultados de accesibilidad muy distintos en el mismo nivel. Revise por separado los indicadores de foco, controles desactivados, visualizaciones de datos, modo oscuro y opciones de alto contraste. La paleta generada agiliza la exploración al proporcionar candidatos coherentes, pero la selección final debe atender al contexto y al significado. No utilice el color como única señal de error o estado. Cuando diseño y desarrollo compartan la paleta, registre juntos la base original y los valores generados para que los cambios posteriores sean reproducibles y no dependan de retoques manuales sin documentar.