Attempting to gradient Color3 Values

Help and Feedback Scripting Support
,
1

So, I’m making a personal Usage % screen and I am attempting to gradient between red & green values however it has proven to be quite the challenge without ColorSequence…

Even then. I’ve been searching the forums for quite a while and haven’t found anything regarding my issue. I believe it’s not something that can be solved with ColorSequence either.

So here’s what’s going on.

I have a NumValue called Usage, it can go from 0 until 100, so far so good. Time to bind that to my Color3 value, and here’s where it gets complicated.

While Usage is 0, Color3 = (0,255,0) → if Usage is 50, Color3 = (255,255,0) → and if Usage is 100 then Color3 = (255,0,0).

Basically, when Usage increases up to 50, the Color3.R value increases too. When Usage goes above 50, Color3.G value decreases.

Here’s the template;
Usage.Value == 0 -> Color3.fromRGB(0,255,0)
Usage.Value == 50 -> Color3.fromRGB(255,255,0)
Usage.Value == 100 -> Color3.fromRGB(255,0,0)
I’m trying to transition between those 3 states and I can’t really find a way how to make it work…

Unfortunately I am notorious for making subjects more complicated than they should be so I hope the template can somewhat explain what I’m trying to say.

I’m trying to change the BackgroundColor of a frame depending on % of a NumValue.

2

I’d look at Color3.fromHSV, it might help here

Color3.fromHSV(0, 1, 1) is red
Color3.fromHSV(0.333333, 1, 1) is green

and so if you change your colour to

Color3.fromHSV(Usage.Value / 300, 1, 1) I think that should do it for you

1 Like
3

It works! Thank you however, there is this issue; 100 now is green meanwhile 0 is red. Is there a way to invert this?

4

You may want to try and lerp between two colours.
To lerp between two colours use the Color.lerp function found here Color3 | Roblox Creator Documentation

Ah nvm been answered already.

1 Like
5

Good!

Yea I think just swap it to do

Color3.fromHSV((100 - Usage.Value) / 300, 1, 1)

But the answer about Lerping is a very good one if you wanted colours that waren’t on nice HSV scale like these are (if you wanted to go from brown to purple or something like that)

2 Likes
6

Even if it’s answered already I’m sure someone will find it useful.

7

Thank you, it works now.

I’ll fix the rest for myself. I just seem to keep making more obstacles for myself everytime I try to add more features.

Trying to add an intensity feature and showing similar results, kind of like a CPU meter where 2 things are working but also not at the same intensity both.

Here’s the lines so far

script.Parent.Core0.BackgroundColor3 = Color3.fromHSV(((100 - Usage) / 300) + (math.random(-10, 0) / 300), 1, 1)
script.Parent.Core1.BackgroundColor3 = Color3.fromHSV(((100 - Usage) / 300) + (math.random(-10, 0) / 300), 1, 1)

I’ll put a cap to this eventually since it produces black when it goes out of range. I’ll find a way.

Either way, thank you for your help. I really appreciate it.

1 Like