Changing Color Based off Range

Resources Community Resources
#1

One of the most common questions that I get from friends or people in my communication servers is, “How do you make a health bar that changes its color to represent a value?.” Anyways, I will be writing this short tutorial so I can help future people who ask, and anyone who was wondering in general.

Map Function
Some of you that use javascript and many other programming languages may have used this built-in function before, but what does it do? The map function takes two ranges and returns a number in the second range, relevant to the percentage of the first range if that makes sense. So if I was mapping 25 on a range of 0 to 50, 25 is 50% of 0 to 50, so on another range, for example, 0 to 100, the result would be 50, because 50 is 50% of the range 0 to 100.

Now, why is this useful? It is useful because we can take any range, like 0 to 1, which is used in the Color3.new function, and apply that to a ‘Health’ range, which might be 0 to 100 or 0 to 10,000, you never know. Now you don’t have to use the map function if you have the max health that you are dealing with. I will show an example of both.

Map Example

local function map(num, il, iu, ol, ou)
    return ol + (ou - ol) * ((num - il) / (iu - il))
end

So the map function takes five arguments, first being the number and the rest being that representing the two ranges, so for example map(25, 0, 100, 0, 1), with a result of 0.25 being the percentage.

Division Example
This example is definitely the easiest, requiring no function to do the math for you or anything. All you need to do is take the current health and divide it by the max health.

local health = path.to.value
local maxHealth = path.to.value

local percentage = health/maxHealth

Changing the Color
Okay so now that we have the percentage, we can use that change the values representing the color of your frame, text color or whatever.

So for example, if we were to change the text color of a TextLabel, it would look something like this.

local label = path.to.label
local humanoid = path.to.humanoid
local MAX_HEALTH = humanoid.MaxHealth

humanoid.HealthChanged:Connect(function(health)
     local percentage = health/MAX_HEALTH -- or map function method map(health, 0, 1, 0, MAX_HEALTH)
     label.TextColor3 = Color3.new(1 - percentage, percentage, 0)
end)

And there ya go, that’s pretty much it. Let me know how this works out for you guys!

23 Likes
Changing Color based off range
#2

You could also just use a lerp function. Color3 has a built-in lerp method so you don’t have to write it out yourself. I’m not too sure what the difference would be if you used map over lerp though, the explanation sounded a bit confusing. Would be much appreciated if you could ELI5 for me.

local CRITICAL_COLOR = Color3.new(1, 0, 0)
local STABLE_COLOR = Color3.new(0, 1, 0)

CRITICAL_COLOR:Lerp(STABLE_COLOR, Health/MaxHealth)

Lerp will take two values multiply them by an alpha. In simpler terms, it returns a value that is a certain percentage between two numbers.

Another note: since this thread isn’t significant enough to constitute a tutorial, I’ve moved it over to Community Resources. Tutorials should be far lengthier and cover broad, detailed topics on Roblox development, not a quick explanation for one function.

17 Likes
Smooth lerping between two Colours
#3

I appreciate the feedback, and the explanation on a new way to solve this problem. Thank you!

#4

When animating/lerping colors, it’s usually better to use HSV instead of RGB

label.TextColor3 = Color3.fromHSV((Humanoid.Health / Humanoid.MaxHealth) * (120 / 360), 0.75, 0.875)

That gives a smoother color transition since you’re changing the hue, it will be yellow/orange in the middle instead of brown

image

12 Likes
Smooth lerping between two Colours
Smooth lerping between two Colours
Smooth lerping between two Colours
#5

I can‘t find any information about this, but if I am sure then it is that I really need this function. But without the correct name I can‘t search how it works. You said:

I know what the first argument does, but I ignore the others, what they exactly do. I don‘t know what the argument 2 and 4 do, and because I can‘t find any informations about I am lost. Because of Java and JavaScript, I know that a map function applies a function to all element of an array, for example:

public Array<string> TestArray = new Array("Test", "Hi", "I am a developer", "Roblox");

Array.map((StringElement) -> system.out.print(StringElement));
--Output: Test, Hi, I am a developer, Roblox

It has been months that I don‘t anymore use Java, so maybe I created an errorSo, I created an array and then I use the map function. For each content in the array I apply a callback function, in this case I print out each String part. Now I feel really bad because I am sure that this is what foreach function does, not the map function. You should search more for better to know.

But you understand what I mean. The map function apply an callback function to all it‘s elements, not what you are saying. Or it just me and I don‘t find what you are saying. But try to write in Google ‘Javascript map function’, you can‘t find any informations about percentages. So, could you verify the name or at least explain all arguments?

I tried this out but I am getting 2500. So, I think you really should test out your own code or its me and I am loosing my head. (This was a joke in other words this don‘t work you would need to divide by 10’000).

#6

Hello Eternalove_fan32!

The Array.map function in JavaScript does not work how this value mapping function works. The way this particular map function works is closer to the map function used in Arduino or the JavaScript p5.js library.

The reason you get 2500 at the end is that it is trying to map 25 in the range of 0 to 1 to the range of 0 to 100. This makes it so if 1 is 100% of the first range, which makes it so 25 is 2500% of the first range. When we map 2500% of the first range to the second range of 0 to 100 it should give us the value 2500% of 100 which is, 2500. The original poster incorrectly placed the values in his own function if he wanted to get 0.25 he would instead use the first range of 0 to 100 and 0 to 1 as the second range. Making it so it makes the relative percentage of 25 being 25% of 100 so 25% of 1 is 0.25.

Hope this helps! This can be a very useful function when applied correctly. reference | p5.js
map() - Arduino Reference
These links may help you understand it better!

3 Likes
#8

sorry for a late reply
instead 0, to max for the map function it needs to be 0, 1 or divide what ever you get by a 100

1 Like