Assign color according to percentage passed

Code:

local HRP = game.Players.LocalPlayer.Character:WaitForChild("HumanoidRootPart")

local Display = script.Parent

local RS = game:GetService("RunService")

local Start = workspace:WaitForChild("Start")

local Finish = workspace:WaitForChild("Finish")

local TotalDist = math.floor((Finish.Position.Magnitude - Start.Position.Magnitude))

RS.Heartbeat:Connect(function()
	
	local PercentPassed = tostring(math.round((HRP.Position.Magnitude / TotalDist) * 100))
	
	local Color = Color3.fromRGB(191, 0, 0):Lerp(Color3.fromRGB(71, 213, 104),HRP.Position.Magnitude / TotalDist)
	
	Display.Text = "PROGRESS: " .. [[<font color="rgb(]] .. tostring(Color) .. [[)">]] .. PercentPassed .. "%" .. [[</font>]]
	
end)

You did it almost right.

local t1 = Finish.Position - HRP.Position
local t2 = Finish.Position - Start.Position

local dist = t1.magnitude / t2.magnitude

local alpha = 1 - dist -- apply this number to the second parameter of :Lerp().

the rgb for some reason comes out in decimals

What do you mean by “decimals”?

Edit: I tested the code and it seems that the color returned in HSV format. Do this:

local real_color = {math.round(Color.R * 255), math.round(Color.G * 255), math.round(Color.B * 255)}
Display.Text = "PROGRESS: " .. [[<font color="rgb(]] .. table.concat(real_color, ",") .. [[)">]] .. PercentPassed .. "%" .. [[</font>]]