How do I script a color selection wheel?


I have this beautiful UI I paid someone to make.

What I want it is so that if I click with my mouse it makes an area around the circle based on the radius of the image. So the white circle in the middle is used to select where the color is at.

Then I want the brightness to work a similar way.

Also there will be a feature where you can copy the color of a part and so I need the color wheel to update according to the color of the part as well.

What is an approach for this? I’m an experienced scripter and I’ve scripted Downhill Rush - Roblox
and am currently improving it.

The Current Color will be updated to where the pointers are on the color wheel and the brightness slider

Please help? This is the only thing I have ZERO clue how to do in terms of my game.

1 Like

You can use tables for example,

local Colors = {"Really Red", "Really Blue"}


That doesn’t help at all!!! I already know what tables are.

Use them, they are helpful for times like these. Um ok- I’ll stop

Color wheels are often defined in values of HSV, and Color3 does have a nice function, Color3.fromHSV(h, s, v)
There’s a mathematical definition for HSV as a cylindrical volume. I’ve not coded something similar to what you’re attempting, but you should be able to define saturation as the radius from the center of your wheel to the dot, hue as the angle between the +x axis and the dot and value (lightness) as your sliding bar on the right. Here’s a visual of the HSV model in 3-dimensional space: The HSV color model - YouTube

You can easily do this with some formulas and the HSV Color Model. Take in mind these all use absolute position and size, which return a Vector2 relative to the viewport’s size.

You can get the saturation using the magnitude of the distance between the mouse’s current position and the wheel’s position. Then using the size you can convert the number to a percentage (kinda similar to object space), which are the values Color.fromHSV use.

Finally the value/brightness is most likely similar to the saturation, but since you’re using a slider from only one axis you should use the Y axis, then divide it to the Size on its correspondant axis.

local DiffX = MousePos.X-WheelPos.X
local DiffY = MousePos.Y-WheelPos.Y

local H = (math.pi-math.atan2(DiffY, DiffX))/math.pi*2 -- Hue
local S = (WheelPos-MousePos).Magnitude/(WheelSize.X/2) -- Saturation
local V = math.abs((SliderPos.Y-MousePos.Y)/SiderSize.Y-1) -- Brightness (The brightness slider part)

local Color = Color3.fromHSV(H, S, V)
1 Like