This is similar to how Tailwind provides a complete color palette to use in UI development.
Different shades of a single hue give you flexibility to create UI elements that feel like a family and coordinate well with each other. As an example, you might want a blue card with similarly blue borders. You may use a lighter blue for the background, and a darker one for the borders.
Instead of using a black border with opacity applied, each shade for this palette has been individually selected to fit within its hue family. The other benefit is, for each "shade level" you can guarantee they will be consistent across hues: 50% gray is near 50% red, etc.
More generally, this is designed so that each hue looks great with every other hue here. Not just any color will do, they need to coordinate.