Hello, I’m BadlyDev, I will teach you how to make a Color Changing Health bar easily. 
This is the result :
So, before starting, we must know what will we be doing.
- When the health is changed, we want it to tween to its position.
- The color will fade between red and green.
Alright, let’s start!
So, the first step is obviously to make your UI, make sure that the bar has a background.
Insert a “LocalScript” in your screen GUI.
I also added a text label, do not put it into the Health Bar or the text label will scale.
The Second step is to script it.
Those are the variables needed.
local currentTween = nil --// We will get into it later.
local bar = script.Parent.Health.Shadow --// This is the bar that will tween and change color.
local plr = game.Players.LocalPlayer --// This is the local player.
local p = script.Parent.Health.percentage --// This is the text label that indicates the player's health.
local char = plr.Character or plr.CharacterAdded:Wait() --// This is the character.
local ts = game:GetService("TweenService") --// The tween service
local hum = char:WaitForChild("Humanoid") --// Humanoid
Make sure that the “ResetOnSpawn” is 
.
So, now, we can make our Tweening Function.
function TweenTo(alpha) --// Alpha is a number ranging from [0,1]
if currentTween then
currentTween:Pause() --// This is why we're using currentTween
end --// It's because that the old tween will continue unless we pause it
currentTween = ts:Create(
bar,
TweenInfo.new(
.2
),
{Size = UDim2.fromScale(alpha,1)} --// We're using scale because it's easier and fits to all screens
)
currentTween:Play()
end
Now, we will put everything together and change the color.
Don’t worry, will explain how the coloring works.
hum.HealthChanged:Connect(function() --// Event that fires every time the health is changed.
TweenTo(hum.Health/hum.MaxHealth) --// Tweening.
p.Text = "Health : " .. math.round(hum.Health/hum.MaxHealth*100) .. "%"; --// Changing the text.
bar.BackgroundColor3 = Color3.fromHSV((hum.Health/hum.MaxHealth)*.3, 1, 1)
end)
What is Color.fromHSV
“Color3.fromHSV” creates a color from a certain hue,saturation and value.
Unlike “Color3.fromRGB”, the colors should range from [0,1].
In an easier explanation hue is the X axis in the color picking.
saturation is the Y axis
and Value is the bar at the right.
← This is Value.
Why are we timing it by “.3”.
Well, it’s because that if I remove the multiplication,
the color will show all the colors.
We want it to be only from Green to Red.
Full Script
local currentTween = nil
local bar = script.Parent.Health.Shadow
local plr = game.Players.LocalPlayer
local p = script.Parent.Health.percentage
local char = plr.Character or plr.CharacterAdded:Wait()
local ts = game:GetService("TweenService")
function TweenTo(alpha)
if currentTween then
currentTween:Pause()
end
currentTween = ts:Create(
bar,
TweenInfo.new(
.2
),
{Size = UDim2.fromScale(alpha,1)}
)
currentTween:Play()
end
local hum = char:WaitForChild('Humanoid')
hum.HealthChanged:Connect(function()
TweenTo(hum.Health/hum.MaxHealth)
p.Text = "Health : " .. math.round(hum.Health/hum.MaxHealth*100) .. "%";
bar.BackgroundColor3 = Color3.fromHSV((hum.Health/hum.MaxHealth)*.3, 1, 1)
end)
I hope you learned something and have a great day!
Thanks for reading 
