How To Make a Color Changing Health Bar In 25 Lines

Hello, I’m BadlyDev, I will teach you how to make a Color Changing Health bar easily. Logo|
This is the result :

So, before starting, we must know what will we be doing.

  1. When the health is changed, we want it to tween to its position.
  2. 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 :white_check_mark: .
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(
		{Size = UDim2.fromScale(alpha,1)} --// We're using scale because it's easier and fits to all screens

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) 
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.
huesat ← 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 = ts:Create(
		{Size = UDim2.fromScale(alpha,1)}
local hum = char:WaitForChild('Humanoid')
	p.Text = "Health : " .. math.round(hum.Health/hum.MaxHealth*100) .. "%";
	bar.BackgroundColor3 = Color3.fromHSV((hum.Health/hum.MaxHealth)*.3, 1, 1)

I hope you learned something and have a great day!

Thanks for reading :smiley:


Script works like a charm. I’m just working if there is a way to fix this where you can make the health bar full numbers instead.

Use math.floor then
so over here change this


p.Text = "Health : " .. math.floor(hum.Health/hum.MaxHealth*100) .."%" ;

Sorry, I’m new to this… where do I put math.floor?

1 Like

You understand what is math.floor right?
look at my previous edit btw

1 Like

Alright so I did that now there’s a new problem…

My bad i accidentally floored the percentage sign

p.Text = "Health : " .. math.floor(hum.Health/hum.MaxHealth*100) .."%" ;

Sweet. Thank you so much!

1 Like

This works awesome! But I want to know how to make it darker for some sort of border?

Something like this:

You could lerp between two colors to have more control over them:

local ColorA = Color3.fromRGB(0, 255, 0)
local ColorB = Color3.fromRGB(255, 0, 0)

hum.HealthChanged:Connect(function() --// Event that fires every time the health is changed.
	local Alpha = hum.Health/hum.MaxHealth
	TweenTo(Alpha) --// Tweening.
	p.Text = "Health : " .. math.round(Alpha*100)  .. "%"; --// Changing the text.
	bar.BackgroundColor3 = ColorA:Lerp(ColorB, Alpha)