I am asking because I feel like writing the different values would not be effective.
How could I make a frame change colors smoothly without writing the different color3 values?
2 answers
You can use interpolation
You actually have 2 options, which is RGB interpolation and HSL/HSV interpolation. Both have different results, so you should consider which one you want. HSL interpolation is proper, but RGB interpolation has less overhead at cost of quality.
RGB Interpolation
local function c3i(s,e,a)
-- Start, end, alpha
return Color3.new(s.r+(e.r-s.r)*a,s.g+(e.g-s.g)*a,s.b+(e.b-s.b)*a);
end;
local i = 0;
local TimeScale = TIMETOFINISHINSECONDS ^-1;
while i < 1 do
Object.Color3Property = c3i(StartColor3, EndColor3, i);
i = i + wait()*TimeScale;
end;
HSL Interpolation
Please excuse the util functions and size of the code
local function hue2rgb(p, q, t)
if t < 0 then t = t + 1; end
if t > 1 then t = t - 1; end
if t < 1 / 6 then return p + (q - p) * 6 * t; end
if t < .5 then return q; end
if t < 2 / 3 then return p + (q - p) * (2 / 3 - t) * 6; end
return p;
end
local hsl = function(H,S,L)
H = max(min(1,H),0);
S = max(min(1,S),0);
L = max(min(1,L),0);
local c = H..":"..S..":"..L;
if S == 0 then
return Color3.new(L,L,L);
else
local q = L < 0.5 and L * (1 + S) or L + S - L * S;
local p = 2 * L - q;
local nc3 = Color3.new(hue2rgb(p, q, H + 1 / 3),
hue2rgb(p, q, H),
hue2rgb(p, q, H - 1 / 3))
return nc3;
end
end;
local hsli(s,e,a)
local r,g,b,dr,dg,db;
do
r = s.r;
g,dr = s.g,e.r;
b,dg = s.b,e.g;
db = e.b
end
do
local tsmin, tsmax = min(r,g,b), max(r,g,b);
local _r,_g,_b = r,g,b;
local _dr,_dg,_db = dr,dg,db;
local tdmin, tdmax = min(dr,dg,db), max(dr,dg,db);
b = (tsmin + tsmax)*.5;
db = (tdmin + tdmax)*.5;
g = tsmin == tsmax and 0 or (b < 0.5 and (tsmax-tsmin)/(tsmax+tsmin) or (tsmax-tsmin)/(2-tsmax-tsmin))
dg = tdmin == tdmax and 0 or (db < 0.5 and (tdmax-tdmin)/(tdmax+tdmin) or (tdmax-tdmin)/(2-tdmax-tdmin))
if _r>_g and _r>_b then
r = (_g-_b)/(tsmax-tsmin)
elseif _g>_r and _g>_b then
r = 2+(_b-_r)/(tsmax-tsmin)
else
r = 4+(_r-_g)/(tsmax-tsmin);
end;
if _dr>_dg and _dr>_db then
dr = (_dg-_db)/(tsmax-tsmin)
elseif _dg>_dr and _dg>_db then
dr = 2+(_db-_dr)/(tsmax-tsmin)
else
dr = 4+(_dr-_dg)/(tsmax-tsmin);
end;
r,dr = r/6, dr/6;
if r < 0 then r = r+1 end;
if dr < 0 then dr = dr+1 end;
end
dr,dg,db = dr-r,dg-g,db-b;
return hsl(r+dr*a,g+dg*a,b+db*a)
end
local i = 0;
local TimeScale = TIMETOFINISHINSECONDS ^-1;
while i < 1 do
Object.Color3Property = hsli(StartColor3, EndColor3, i);
i = i + wait()*TimeScale;
end;
Instructions
To use it, just change (at the bottom of each script) these variables
TIMETOFINISHINSECONDS- The time to finish tweening, in seconds.Object- The object you're going to be changing the colour ofColor3Property- The name of the property that you're going to be tweeningStartColor3- The initial Color3 to tween fromEndColor3- The final Color3 to tween to
How does it work?
Both methods for RGB and HSL use linear interpolation, which comes down to lerp(start,end,alpha) -> start + (end-start)*alpha.
RGB tweening uses a simple 1:1 conversion of the Color3 to its components, back into a Color3.
HSL tweening uses a bunch of formulas to convert the start and end Color3 values to HSL, interpolates them linearly and then uses similar formulas to convert the HSL values back to RGB which is fed into the Color3 constructor.
11 comments
HSL please?
HSL stands for Hue, Saturation and Lightness.
Hue, Saturation, Luminosity.
THX
19:32:51.512 - Players.Player1.PlayerGui.ScreenGui.Frame.LocalScript:25: '' expected near 'end'
Which part of my script does that translate to?
Line 25 I believe I am kind of new to scripting but I am learning :D
It has been fixed, presumably. If it works, please tell me and accept my answer ^^
So do I just insert it into a local script and the parent is a frame?
No. You'll have to edit it, and implement it. Change TIMETOFINISHINSECONDS, StartColor3, EndColor3, Color3Property and Object to suit your circumstances.
k
You could change them with a loop, for example:
local r = 0
local g = 0
local b = 0
while r < 255 do
r = r + 1
g = g + 1
b = b + 1
script.Parent.BackgroundColor3 = Color3.new(r/255,g/255,b/255)
wait(0.005)
end
6 comments
Let me test this out and ill tell you the results!
Ok. I see an issue but I am going to try to fix it. Because of how the script works, it goes from black to white. Now I think I could make it become different colors but if I need help I'll ask you :)
How would I be able to make it change colors in a pattern other than black to white?
I want to make my colors match material design and I would like to flow smoothly. A problem with this script is that the colors will become white eventually
thx
Maybe you can put an if then statement saying when it is the rgb value for white, reset it to a little more than white? Just spitballing here.
This discussion is preserved as it was. New answers, comments, and votes are closed.

4 comments
Look up Tween Module in free models
My answer may be more what you were looking for than Panther's, even though his is entirely correct in itself.
Edited with HSL interpolation. If it's broken, tell me and I'll review the code because it came from inside of Valkyrie and I had to strip it down from its dependencies.
Fixed my HSL script. Forgot to remove a leftover end from the Valkyrie code