Interpolating Between Colors

Help and Feedback Scripting Support
#1

I need to interpolate between two colors, but find the specific value at a specified time.

I will not use RGB for this, as that gives brown in between most colors. Instead I am using HSV, which is great for rotating between colors. (RGB: Color Cube. HSV: Color Wheel)

image
image850×326 65.2 KB

My current code:

local ColorScaleStatic = {}
ColorScaleStatic.__index = ColorScaleStatic

function ColorScaleStatic.new (PointA:Color3,PointB:Color3): ColorScale
	local ColorScale = {}
	setmetatable(ColorScale,ColorScaleStatic)
	
	ColorScale.HueA,ColorScale.SatA,ColorScale.ValA = PointA:ToHSV()
	ColorScale.HueB,ColorScale.SatB,ColorScale.ValB = PointB:ToHSV()
	
	return ColorScale
end

function ColorScaleStatic:AtScale (Scale:number):Color3
	return Color3.fromHSV(
		self.HueA+(self.HueB-self.HueA)*Scale,
		self.SatA+(self.SatB-self.SatA)*Scale,
		self.ValA+(self.ValB-self.ValA)*Scale
	)
end

function ColorScaleStatic:TestTween (Frame:Frame,Time:number)
	for i=0,1,0.01 do
		Frame.BackgroundColor3 = self:AtScale(i)
		wait(Time/100)
	end
end

export type ColorScale = typeof (ColorScaleStatic.new())

return ColorScaleStatic

The only issue I am currently having, is that this goes (Starting at red, going to green) towards pink and blue, instead of towards orange and yellow.

Basically: I want to go the LEFT around the color wheel, not right.

Any help is appreciated!

#2

I think a way to check whether to go left or right is to have a value that is equal to 255 - (the hue to interpolate to) and check if that’s nearer to the value you are interpolating from. From there you can just go around the other way (when the value hits -1, change it to 255, vice versa)

#3

Roblox doesn’t use 0-255 for Hue, they use 0-1. The other issue I have with this, is that I don’t want to go whichever way is closer, I just want to go left. Roblox already handles wrapping around the color wheel, in my testing, when I try to create a color from HSV with a Hue value above 1, roblox just makes it go around the wheel, showing the actual value.

#4

Could you try flipping some operators around within function ColorScaleStatic:AtScale()?

#5

I’ve tried that for a few hours now. I can’t find something that works.

#6

For anyone finding this searching around, the end answer is the roblox’s Color3:ToHSV() interprets the hue value of 0 to equal 1. This means that this is true:

Color3.fromHSV(0,1,1) == Color3.fromHSV(1,1,1)

1 Like