How to generate CSS color Gradients from C# controller in the following format

Question

Question:

From my C# controller, how can I create/calculate/inject a set of evenly distributed HTML compliant CSS colors (Gradient), based on the variable number (Num. of Students Travelling)? I am also open to other ideas or a lib.

Background/Context: the designer is expecting the given output below, to apply those colors on a list of background divs.

This CSS will be the background-div for the Varying colors/distance travelled by the Student families nearest to farthest. My apologies if it sounds basic, being new to browser colors formats ranges, and finding it confusing on how the css math min/max in colors work between HSL and HEX for e.g. if they are interchangeable with windows color system, or Why are Hex Colors 3 digits sometimes and 6 others.

Sample expected output

 // For e.g. the list of students is dynamic could be 5, 10 or 20.. so I need to generate a list of gradient CSS colors, that I can inject into the view.

.TravelDistance.Student1        { background: #F00; background: hsl(   0, 100%, 50%); }  // how to generate these backgrounds.. hsl(   0, 100%, 50%); 
.TravelDistance.Student2        { background: #F80; background: hsl(  36, 100%, 50%); }
.TravelDistance.Student3        { background: #FF0; background: hsl(  72, 100%, 50%); }
.TravelDistance.Student4        { background: #0F0; background: hsl( 108, 100%, 50%); }
.TravelDistance.Student5        { background: #0F8; background: hsl( 144, 100%, 50%); }
.TravelDistance.Student..N      { background: #0FF; background: hsl( 180, 100%, 50%); }

---

So far, I found some help.. from here

public static IEnumerable<Color> GetCssColorGradients(start = CssColor.Min, end = CssColor.Max, int steps) // steps  = number of students
{
    if (steps < 3) return null;

    int stepA = ((end.A - start.A) / (steps - 1));
    int stepR = ((end.R - start.R) / (steps - 1));
    int stepG = ((end.G - start.G) / (steps - 1));
    int stepB = ((end.B - start.B) / (steps - 1));

    for (int i = 0; i < steps; i++)
    {
        yield return Color.FromArgb(start.A + (stepA * i),
                                    start.R + (stepR * i),
                                    start.G + (stepG * i),
                                    start.B + (stepB * i));
    }
}

// found this class, how do I spread these with a stepper? Is there an object that handles hue, and css colors as one in .Net without reinventing the wheel.
System.Drawing.Color color = System.Drawing.Color.FromArgb(red, green, blue);
float hue = color.GetHue();
float saturation = color.GetSaturation();
float lightness = color.GetBrightness();