Scripting HelpersARCHIVE
A little piece of Roblox history. Preserved for everyone, one question at a time.Read about the archive →
COMMUNITY QUESTION

How do I make a TextLabel's background color have a flow of colors?

For example, like the colors tween like a rainbow and go smoothly, and algorithms you guys have?

1 comment

0

Well, mess with the BackgroundColor property. It's Color3, so have a loop that would change the values 1 at a time to make it seem like a flow.

1 answer

ROBLOX Color3 objects use the RGB color model.

A "rainbow" is parameterized in terms of hue which is not a component of the RGB color model, and which ROBLOX doesn't directly support.

There are several color models supporting hue -- HSL, HSV/HSB. Here I will describe HSV.

The Hue - Saturation - Value Color Model

Here is the Wikipedia article I am referencing

For a fully saturated (vivid color) rainbow, we use saturation S as 1 and value (brightness) V as 1 as well.

We thus get chroma C as C = S * V.

For a hue measuring between 0 and 360 degrees, we define a scaled-down version

C = S * V
Hp = H / 60

We use the intermediate value X to be the following:

X = C * (1 - math.abs( (Hp % 2) - 1 ) )

From here, we have an unfortunately complicated transformation into RGB that models the zigzags in this figure.

local f = math.floor(Hp) + 1
-- Plus since Lua's arrays are one-indexed
local Cp = {1,2,2,3,3,1}
local Xp = {2,1,3,2,1,3}

local color = {0,0,0}
color[Cp[f]] = C
color[Xp[f]] = X
R1, G1, B1 = unpack(color)

We now add an amount to each to give it its value (brightness)

m = V - C
R,G,B = R1 + m, G1 + m, B1 + m

I have confirmed that this works!


Altogether here's a function to do it, and a rainbow maker:

function RGBfromHSV(H,S,V)
	C = S * V
	Hp = H / 60
	X = C * (1 - math.abs( (Hp % 2) - 1 ) )
	local f = math.floor(Hp) + 1
	-- Plus since Lua's arrays are one-indexed
	local Cp = {1,2,2,3,3,1}
	local Xp = {2,1,3,2,1,3}
	local color = {0,0,0}
	color[Cp[f]] = C
	color[Xp[f]] = X
	R1, G1, B1 = unpack(color)
	m = V - C
	return R1 + m, G1 + m, B1 + m
end


local rainbow = {};

for i = 0, 360, 10 do
	table.insert(rainbow, Color3.new( RGBfromHSV(i,1,1) ) )
end

This discussion is preserved as it was. New answers, comments, and votes are closed.