How to have a looped tween change only the color HUE

Help and Feedback Scripting Support
#1

I want to make a blinking object where its color goes through all primary the colors in a loop (red, blue, green, etc).
What I found simpler was to change the Hue property using fromHSV.
How can I change only the Hue (varying between 0 and 1) in a looped tween?

2 Likes
#2

Your start color should be something like Color3.fromHSV(0,1,1)
and your end color should be something like Color3.fromHSV(1,1,1)

I’m not too familiar with Tweens but if you only change the Hue and keep the Saturation and Value the same, it should only change the Hue.

1 Like
#3

Have you tested before?
It will vary both Hue, Saturation and Value.
I need to vary only Hue.

#4

Changing only the first value will only vary the hue. Saturation is controlled by the second value and Value by the third.

For example, these goals will only change the hue to red, green, and blue.

local goal1 = { Color = Color3.fromHSV(0, 1, 1) }
local goal2 = { Color = Color3.fromHSV(0.333333, 1, 1) }
local goal3 = { Color = Color3.fromHSV(0.666666, 1, 1) }
#5

Have you tested before?

#6

Yes, this was the result:
robloxapp-20230815-1714362.wmv (536.7 KB)

Here is the script I wrote for reference:

local TweenService = game:GetService("TweenService")

local part = script.Parent

local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Linear, Enum.EasingDirection.In, 0, false, 0)

local goal1 = { Color = Color3.fromHSV(0, 1, 1) }
local goal2 = { Color = Color3.fromHSV(0.333333, 1, 1) }
local goal3 = { Color = Color3.fromHSV(0.666666, 1, 1) }

local tween1 = TweenService:Create(part, tweenInfo, goal1)
local tween2 = TweenService:Create(part, tweenInfo, goal2)
local tween3 = TweenService:Create(part, tweenInfo, goal3)

tween1.Completed:Connect(function()
	tween2:Play()
end)
tween2.Completed:Connect(function()
	tween3:Play()
end)
tween3.Completed:Connect(function()
	tween1:Play()
end)

tween1:Play()
#7

It won’t exactly change Hue only.
Tween will change H, S, or V according to source and destination color.
I confirmed by printing the resulting HSV in a RenderStep.
Example (switch between green and red):

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

local part = workspace:WaitForChild('Part')
part.Color = Color3.fromRGB(0, 255, 0) -- start from green
local goal = { Color = Color3.fromHSV(1, 1, 1) } -- to red
local tweenInfo = TweenInfo.new(1, Enum.EasingStyle.Linear, Enum.EasingDirection.In, -1, true, 0)
local tween = TweenService:Create(part, tweenInfo, goal)

tween:Play()

local function Render(Time)
	print(part.Color:ToHSV())
end

RunService:BindToRenderStep("Render", Enum.RenderPriority.Last.Value, Render)

You’ll get: a variation in H and V:

0.2783595025539398 1 0.7490196228027344
0.2724014222621918 1 0.729411780834198
0.26739928126335144 1 0.7137255072593689
0.26217228174209595 1 0.6980392336845398
0.2567049562931061 1 0.6823529601097107
0.2509803771972656 1 0.6666666865348816
0.2434343546628952 1 0.6470588445663452
0.23706002533435822 1 0.6313725709915161
0.2303609400987625 1 0.615686297416687
0.2214912325143814 1 0.5960784554481506
0.20601852238178253 1 0.5647059082984924

Try other source and destination colors, and you’ll see another variations in HSV

1 Like
#8

That’s very odd…

limits are annoying ahh

#9

local RunService = game:GetService(“RunService”)
local TweenService = game:GetService(“TweenService”)

local part = script.Parent
part.Color = Color3.fromRGB(43,177,255) – Light Blue to
local goal = { Color = Color3.fromHSV(0.586389, 0.937148, 0.686275) } – Dark Blue
local tweenInfo = TweenInfo.new(1, Enum.EasingStyle.Linear, Enum.EasingDirection.In, -1, true, 0)
local tween = TweenService:Create(part, tweenInfo, goal)

tween:Play()

local function Render(Time)
print(part.Color:ToHSV())
end

RunService:BindToRenderStep(“Render”, Enum.RenderPriority.Last.Value, Render)
Here is the script, maybe can solve your problem