How to show all colors of linear-gradient

Question

as shown in the css section below, i have the linear-gradient and it has the specified colors.the problem is what i am getting is what being displayed on the image below. the highest value of the linear-gradient is hsl(16.94, 100%, 50%), while as the image shows, the highest value on the legend in not hsl(16.94, 100%, 50%) because hsl(16.94, 100%, 50%) is almost red while the highest value on the legend bar is 75 with another color.

please let me know why hsl(16.94, 100%, 50%) is not shown on the legend and is it possible to stretch the colors on the legend bar so i can see each color distinctly

css:

linearColorsGradient{
background: linear-gradient(to right,
hsl(50.82, 100%, 50%),hsl(50.12, 100%, 50%),hsl(49.18, 100%, 50%),hsl(48.47, 100%, 50%),hsl(47.76, 100%, 50%),hsl(47.06, 100%, 50%),hsl(46.12, 100%, 50%),hsl(45.41, 100%, 50%),hsl(44.71, 100%, 50%),
hsl(43.76, 100%, 50%),hsl(43.06, 100%, 50%),hsl(42.12, 100%, 50%),hsl(41.41, 100%, 50%),hsl(40.47, 100%, 50%),hsl(39.76, 100%, 50%),hsl(38.82, 100%, 50%),hsl(38.12, 100%, 50%),hsl(37.18, 100%, 50%),
hsl(36.47, 100%, 50%),hsl(35.53, 100%, 50%),hsl(34.82, 100%, 50%),hsl(33.88, 100%, 50%),hsl(32.94, 100%, 50%),hsl(32.00, 100%, 50%),hsl(31.29, 100%, 50%),hsl(30.35, 100%, 50%),hsl(29.41, 100%, 50%),
hsl(28.47, 100%, 50%),hsl(27.53, 100%, 50%),hsl(26.59, 100%, 50%),hsl(25.65, 100%, 50%),hsl(24.71, 100%, 50%),hsl(23.53, 100%, 50%),hsl(22.59, 100%, 50%),hsl(21.41, 100%, 50%),hsl(20.47, 100%, 50%),
hsl(19.29, 100%, 50%),hsl(18.12, 100%, 50%),hsl(16.94, 100%, 50%)
); 

legend: