¿Alguien puede mostrarme un ejemplo de cómo se vería la escala de grises sobre los colores principales? no logro entender bien su funcion...

Hola, Jonathan :) Te refieres a algo como esto? Este es un ejemplo de lo que se llama "Skeleton loader", usamos todos grises para demostrar la estructura (el esqueleto) del sitio, sin contenido real, y sin colores que distraigan.

Si te refieres a cómo se vería un color en sus variaciones, puedes ver entre los aportes de tus compañeros, aquí tomé uno que muestra las variaciones en una escala para el color verde:

Es común que el color más brillante y llamativo lo usemos para botones y call-to-actions, y los otros sean solo complementos y para acciones secundarias.