Help with color changing health bar

[hisupermario9]

Hello!
I’m trying to make a health bar inspired by RVVZ’s one used in Criminality.
I’ve never messed with Color3 stuff like this before, and I’m a little confused on how to get results closer to his.

His health bar
My health bar

My script

local Players = game:GetService("Players")
local TweenService = game:GetService("TweenService")

local Player = Players.LocalPlayer 
local Character = Player.Character
local Humanoid = Character:WaitForChild("Humanoid")

local healthBar = script.Parent.Background.HealthBar
local healthText = script.Parent.Background.HealthText

Humanoid:GetPropertyChangedSignal("Health"):Connect(function()
	healthText.Text = math.round(Humanoid.Health / Humanoid.MaxHealth * 100).."%"
	TweenService:Create(healthBar, TweenInfo.new(0.5, Enum.EasingStyle.Quint, Enum.EasingDirection.Out), {Size = UDim2.new(Humanoid.Health/Humanoid.MaxHealth, 0, 1, 0)}):Play()
	healthBar.BackgroundColor3 = Color3.fromHSV((Humanoid.Health/Humanoid.MaxHealth)*.15, 0.4, 0.8) 
end)

All I’m trying to do is make the coloring similar. Mine at the moment doesn’t go as dark red as his will.
Thanks for any help!

[EmbatTheHybrid (Embat)]

There are few things I would recommend.

Use Humanoid.HealthChanged instead of Humanoid:GetPropertyChangedSignal("Health"), doing this also gives y ou the current health of the Humanoid rather than having to reference it yourself

Frames have a property called TweenSize, which do what you’re doing right now, but simpler.

As for making your Color changes darker as your hp goes lower, you could probably make an inclusion of the percentage you’re using to change the Hue, on your Value as well.

In the end, probably something like this would work, you may need to tweak some stuff around, particularly the 0.8 if needed

local Players = game:GetService("Players")
local TweenService = game:GetService("TweenService")

local Player = Players.LocalPlayer 
local Character = Player.Character
local Humanoid = Character:WaitForChild("Humanoid")

local healthBar = script.Parent.Background.HealthBar
local healthText = script.Parent.Background.HealthText

Humanoid.HealthChanged:Connect(function(newhp)
	local percent = newhp / Humanoid.MaxHealth
	healthText.Text = math.round(percent * 100).."%"
	healthBar:TweenSize(UDim2.new(percent, 0, 1, 0), Enum.EasingDirection.Out,Enum.EasingStyle.Quint,0.5,true)
	healthBar.BackgroundColor3 = Color3.fromHSV(percent * .15, 0.4, percent * 0.8) 
end)

[hisupermario9]

The color is now yellow at 100%. You said messing with 0.8 could help but I’m not entirely sure how I would. Like just move up and down values?

[XdJackyboiiXd21 (GDoggs_Jack)]

local Players = game:GetService("Players")
local TweenService = game:GetService("TweenService")

local Player = Players.LocalPlayer 
local Character = Player.Character
local Humanoid = Character:WaitForChild("Humanoid")

local healthBar = script.Parent.Background.HealthBar
local healthText = script.Parent.Background.HealthText

Humanoid.HealthChanged:Connect(function(newhp)
	local percent = newhp / Humanoid.MaxHealth
	healthText.Text = math.round(percent * 100).."%"
	healthBar:TweenSize(UDim2.new(percent, 0, 1, 0), Enum.EasingDirection.Out,Enum.EasingStyle.Quint,0.5,true)
	healthBar.BackgroundColor3 = Color3.fromRGB(255 - (255 * percent), 255 * percent, 0)
end)

[EmbatTheHybrid (Embat)]

@hisupermario9 Okay experimenting with @XdJackyboiiXd21 has proven that his should work, although I’m not sure why he decided to make 2 percent variables

Edit: It’s honestly fine, we make mistakes here and there sometimes, hell I make a lot of mistakes when I type or give preview code sometimes haha

[XdJackyboiiXd21 (GDoggs_Jack)]

My bad I didn’t realize that there was already a percentage variable.

[hisupermario9]

Around 100% is still yellowish and 0% seems to be completely black. Maybe thats why it was in HSV from the start?

[hisupermario9]

Oop that’s my bad. Hold on. I forgot to delete the old one

[hisupermario9]

Alright. This looks pretty good. My only problem is that the green looks too bright and the red looks too bright.
Sorry if I’m being picky, I just dislike how it looks.

If possible could we start with a specific color? I was using 122, 206, 128 and I’d really like to see that be 100%.

[XdJackyboiiXd21 (GDoggs_Jack)]

Maybe try this?

healthBar.BackgroundColor3 = Color3.fromRGB(0.8 * (255 - (255 * percent)), 0.8 * (255 * percent, 0))

[hisupermario9]

You left an accidentally comma at the end (or at least I think because Studio doesn’t like it.)

[EmbatTheHybrid (Embat)]

He meant to do it like this

healthBar.BackgroundColor3 = Color3.fromRGB(0.8 * (255 - (255 * percent)), 0.8 * (255 * percent), 0)

[hisupermario9]

One last thing, I had mentioned if it’s possible to make the 100% color (122, 206, 128), and if possible can it be set that way?

[EmbatTheHybrid (Embat)]

I believe so, may I see your full code that you have as of now so I can tamper with it easily

[hisupermario9]

local Players = game:GetService("Players")
local TweenService = game:GetService("TweenService")

local Player = Players.LocalPlayer 
local Character = Player.Character
local Humanoid = Character:WaitForChild("Humanoid")

local healthBar = script.Parent.Background.HealthBar
local healthText = script.Parent.Background.HealthText

Humanoid.HealthChanged:Connect(function(newhp)
	local percent = newhp / Humanoid.MaxHealth
	healthText.Text = math.round(percent * 100).."%"
	healthBar:TweenSize(UDim2.new(percent, 0, 1, 0), Enum.EasingDirection.Out,Enum.EasingStyle.Quint,0.5,true)
	healthBar.BackgroundColor3 = Color3.fromRGB(0.8 * (255 - (255 * percent)), 0.8 * (255 * percent), 0)
end)

[EmbatTheHybrid (Embat)]

Try this?

local Players = game:GetService("Players")
local TweenService = game:GetService("TweenService")

local Player = Players.LocalPlayer 
local Character = Player.Character
local Humanoid = Character:WaitForChild("Humanoid")

local healthBar = script.Parent.Background.HealthBar
local healthText = script.Parent.Background.HealthText

Humanoid.HealthChanged:Connect(function(newhp)
	local percent = newhp / Humanoid.MaxHealth
	healthText.Text = math.round(percent * 100).."%"
	healthBar:TweenSize(UDim2.new(percent, 0, 1, 0), Enum.EasingDirection.Out,Enum.EasingStyle.Quint,0.5,true)
	local r = ((122/255) * (255 - (255 * percent)))
	local g = ((206/255) * (255 * percent))
	local b = (128/255) * (255 * percent)
	healthBar.BackgroundColor3 = Color3.fromRGB(r, g, b)
end)

[hisupermario9]

It doesn’t seem to be the correct green

[EmbatTheHybrid (Embat)]

It’s probably because

@EmbatTheHybrid

local r = ((122/255) * (255 - (255 * percent)))

Will be 0 if you’re at max hp, so something has to be done about that, maybe changing the 255 in 255 * present to a smaller value. I’m not really that good at formulas like these, so someone else may have the answer. But does it at least work a bit better when you’re taking damage?

[PseudoPerson]

You could try something like this:

--at the top of your code:
local GREEN = Color3.new(0,1,0) --set to the color you want
local RED = Color3.new(1,0,0) --set to the color you want
--inside the connection
local percent = newhp / Humanoid.MaxHealth
healthBar.BackgroundColor3 = RED:lerp(GREEN, percent)

If you want a more color accurate lerp I recommend taking the lerp code from boatbomber’s boattween service.
Edits:
Here is the module:

BoatTween module

Lately, there have been various complaints about TweenService, so I decided to spend an hour or two making an alternative that offers some more. Introducing… BoatTween! (Because @SteadyOn already took the name TweenService2) Before we begin, credit where credit is due. @howmanysmaII gave me various lerping and tweening algorithms, and she credits Fractality for various Lua functions, IBM + Google + Microsoft + Mozilla for the bezier curves, and Validark for rewriting certain equations. Now, …

and here is the lerp code for it:

	Color3 = function(C0, C1)
		local L0, U0, V0
		local R0, G0, B0 = C0.R, C0.G, C0.B
		R0 = R0 < 0.0404482362771076 and R0 / 12.92 or 0.87941546140213 * (R0 + 0.055) ^ 2.4
		G0 = G0 < 0.0404482362771076 and G0 / 12.92 or 0.87941546140213 * (G0 + 0.055) ^ 2.4
		B0 = B0 < 0.0404482362771076 and B0 / 12.92 or 0.87941546140213 * (B0 + 0.055) ^ 2.4

		local Y0 = 0.2125862307855956 * R0 + 0.71517030370341085 * G0 + 0.0722004986433362 * B0
		local Z0 = 3.6590806972265883 * R0 + 11.4426895800574232 * G0 + 4.1149915024264843 * B0
		local _L0 = Y0 > 0.008856451679035631 and 116 * Y0 ^ (1 / 3) - 16 or 903.296296296296 * Y0

		if Z0 > 0.0000000000000010000000000000001 then
			local X = 0.9257063972951867 * R0 - 0.8333736323779866 * G0 - 0.09209820666085898 * B0
			L0, U0, V0 = _L0, _L0 * X / Z0, _L0 * (9 * Y0 / Z0 - 0.46832)
		else
			L0, U0, V0 = _L0, -0.19783 * _L0, -0.46832 * _L0
		end

		local L1, U1, V1
		local R1, G1, B1 = C1.R, C1.G, C1.B
		R1 = R1 < 0.0404482362771076 and R1 / 12.92 or 0.87941546140213 * (R1 + 0.055) ^ 2.4
		G1 = G1 < 0.0404482362771076 and G1 / 12.92 or 0.87941546140213 * (G1 + 0.055) ^ 2.4
		B1 = B1 < 0.0404482362771076 and B1 / 12.92 or 0.87941546140213 * (B1 + 0.055) ^ 2.4

		local Y1 = 0.2125862307855956 * R1 + 0.71517030370341085 * G1 + 0.0722004986433362 * B1
		local Z1 = 3.6590806972265883 * R1 + 11.4426895800574232 * G1 + 4.1149915024264843 * B1
		local _L1 = Y1 > 0.008856451679035631 and 116 * Y1 ^ (1 / 3) - 16 or 903.296296296296 * Y1

		if Z1 > 0.0000000000000010000000000000001 then -- 1E-15
			local X = 0.9257063972951867 * R1 - 0.8333736323779866 * G1 - 0.09209820666085898 * B1
			L1, U1, V1 = _L1, _L1 * X / Z1, _L1 * (9 * Y1 / Z1 - 0.46832)
		else
			L1, U1, V1 = _L1, -0.19783 * _L1, -0.46832 * _L1
		end

		return function(DeltaTime)
			local L = (1 - DeltaTime) * L0 + DeltaTime * L1
			if L < 0.0197955 then
				return BLACK_COLOR3
			end

			local U = ((1 - DeltaTime) * U0 + DeltaTime * U1) / L + 0.19783
			local V = ((1 - DeltaTime) * V0 + DeltaTime * V1) / L + 0.46832

			local Y = (L + 16) / 116
			Y = Y > 0.206896551724137931 and Y * Y * Y or 0.12841854934601665 * Y - 0.01771290335807126
			local X = Y * U / V
			local Z = Y * ((3 - 0.75 * U) / V - 5)

			local R = 7.2914074 * X - 1.5372080 * Y - 0.4986286 * Z
			local G = -2.1800940 * X + 1.8757561 * Y + 0.0415175 * Z
			local B = 0.1253477 * X - 0.2040211 * Y + 1.0569959 * Z

			if R < 0 and R < G and R < B then
				R, G, B = 0, G - R, B - R
			elseif G < 0 and G < B then
				R, G, B = R - G, 0, B - G
			elseif B < 0 then
				R, G, B = R - B, G - B, 0
			end

			R = R < 0.0031306684424999998 and 12.92 * R or 1.055 * R ^ (1 / 2.4) - 0.055 -- 3.1306684425E-3
			G = G < 0.0031306684424999998 and 12.92 * G or 1.055 * G ^ (1 / 2.4) - 0.055
			B = B < 0.0031306684424999998 and 12.92 * B or 1.055 * B ^ (1 / 2.4) - 0.055

			return Color3.new(
				R > 1 and 1 or R < 0 and 0 or R,
				G > 1 and 1 or G < 0 and 0 or G,
				B > 1 and 1 or B < 0 and 0 or B
			)
		end
	end;

If you’re wondering how to use this refer to this post:

BoatTween module

It’s just a function that lerps a Color3 value. Basically, you give it 2 Color3 values: one as the beginning value, and the other as the ending value. That function then returns another function, in which you give the value between 0 and 1 to get the percentage of the transition there. For example: If I wanted to lerp a Color3 from (0, 0, 0) to (1, 1, 1), and I inputted 0.5, I’d get the Color3 halfway between the beginning and ending Color3 values, which would be (0.5, 0.5, 0.5). local Beginni…

I’d recommend looking at the full tween code, there is a constant outside the scope of that segment. It isn’t too hard to fill in though.

[legs_v (legs)]

local green = Color3.fromRGB(85, 255, 127)
local red = Color3.fromRGB(255, 0, 0)
local color = red:Lerp(green, HealthFrame.Size.X.Scale)

lerping should work, put it in a .RenderStepped or loop if you need to