How do I script a color selection wheel?

Help and Feedback Scripting Support
#1

whatt

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.

3 Likes
#2

You can use tables for example,

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

print(math.Random[Colors])
2 Likes
#3

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

1 Like
#4

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

2 Likes
#5

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

1 Like
#6

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)
5 Likes
#7
3 Likes
#8

i know this was two years ago but how can i make it so when i give a color to a function, the cursor in the color wheel moves to that color given?

1 Like
#9 
	 

	local connections = {}
	local color = Color3.new(1, 1, 1)
	local colordis

	colordis = colordis or game.Players.LocalPlayer.PlayerGui:FindFirstChild("PaintFrame", true):FindFirstChild("ColourDisplay", true)
	 

	local cwheel = colordis.Parent.Parent.hsvframe.ColourWheel
	local dp = cwheel.Parent.DarknessPicker
	 

	local function updateHS()
		 
		local mouse = game.Players.LocalPlayer:GetMouse()
		local diffX = mouse.X - (cwheel.AbsolutePosition.X + cwheel.AbsoluteSize.X / 2)
		local diffY = mouse.Y - (cwheel.AbsolutePosition.Y + cwheel.AbsoluteSize.Y / 2)
		local h = (math.pi - math.atan2(diffY, diffX)) / (math.pi * 2)
		local s = (Vector2.new(cwheel.AbsolutePosition.X + cwheel.AbsoluteSize.X / 2, cwheel.AbsolutePosition.Y + cwheel.AbsoluteSize.Y / 2) - Vector2.new(mouse.X, mouse.Y)).Magnitude / (cwheel.AbsoluteSize.X / 2)
		 
		return h, s
	end

	local function updateV()
		 
		local mouse = game.Players.LocalPlayer:GetMouse()
		local value = 1 - ((mouse.Y - dp.AbsolutePosition.Y) / dp.AbsoluteSize.Y)
		local clamped_value = math.clamp(value, 0, 1)
		 
		return clamped_value
	end

	local function inverseHSV()
		 
		local hue, sat, val = color:ToHSV()
		 
		dp.Slider.Position = UDim2.fromScale(0.5, 1 - val)
		local picker = cwheel.Picker
		local angle = 360 * (hue / 1)
		local radius = (cwheel.AbsoluteSize.X / 2) * sat
		local vector = Vector2.new(radius * math.cos(math.rad(angle)), radius * math.sin(math.rad(angle)))
		picker.Position = UDim2.new(0.5, 0, 0.5, 0) + UDim2.fromOffset(-vector.X, vector.Y)
		color = Color3.fromHSV(hue, sat, val)
		dp.UIGradient.Color = ColorSequence.new(Color3.fromHSV(hue, sat, 1), Color3.new(0, 0, 0))
		 
	end

	local h, s, v = updateHS()
	v = 1
	colordis.BackgroundColor3 = Color3.fromHSV(h, s, v)
	 

	local plr = game.Players.LocalPlayer
	local uis = game:GetService("UserInputService")
	local md = false

	table.insert(connections, uis.InputEnded:Connect(function(k, g)
		 
		if k.UserInputType == Enum.UserInputType.MouseButton1 then
			md = true
			 
		end
	end))

	table.insert(connections, cwheel.MouseButton1Down:Connect(function()
		 
		local absx, absy = cwheel.AbsolutePosition.X + cwheel.AbsoluteSize.X/2, cwheel.AbsolutePosition.Y + cwheel.AbsoluteSize.Y/2
		md = false
		while not md do
			
			if ((plr:GetMouse().X - absx)^2 + (plr:GetMouse().Y - absy)^2)^(0.5) < (cwheel.AbsoluteSize.X / 2) then
				cwheel.Picker.Position = UDim2.fromScale((plr:GetMouse().X - absx) / cwheel.AbsoluteSize.X, (plr:GetMouse().Y - absy) / cwheel.AbsoluteSize.Y) + UDim2.fromOffset(cwheel.AbsoluteSize.X/2, cwheel.AbsoluteSize.Y/2)
				h, s = updateHS()
				color = Color3.fromHSV(h, s, v)
				dp.UIGradient.Color = ColorSequence.new(Color3.fromHSV(h, s, 1), Color3.new(0, 0, 0))
				colordis.BackgroundColor3 = color
				 
			end
			task.wait()
		end
		md = false
		 
	end))

	table.insert(connections, dp.MouseButton1Down:Connect(function()
		 
		local absx, absy = dp.AbsolutePosition.X, dp.AbsolutePosition.Y
		md = false
		while not md do
			local yval = (math.clamp(plr:GetMouse().Y, absy, absy + dp.AbsoluteSize.Y) - absy) / dp.AbsoluteSize.Y
			dp.Slider.Position = UDim2.new(0.5, 0, yval, 0)
			v = 1 - yval
			color = Color3.fromHSV(h, s, v)
			colordis.BackgroundColor3 = color
			 
			task.wait()
		end
		md = false
		 
	end))

	local Mouse = game:GetService("Players").LocalPlayer:GetMouse()
	Mouse.TargetFilter = Garage
	 

	local Material = "Plastic"
	 

	local function PaintPart()
		 
		local Part = Mouse.Target
		if Part then
			Part.Color = color
			Part.Material = Enum.Material[Material]
			 
		else
			 
		end
	end

	local PaintFrame = colordis.Parent.Parent.Parent.PaintFrame
	local mat = PaintFrame.mat.MaterialDIsplay.TextLabel
	 

	local function SelectMaterial(Material)
		 
		Material = Material
		mat.Text = Material
		 
	end

	SelectMaterial("Plastic")

	table.insert(connections, Mouse.Button1Down:Connect(function()
		 
		md = false
		PaintPart()
		task.wait(1)
		while md == false do 
			PaintPart()
			task.wait()
		end
		 
	end))

	table.insert(connections, Mouse.Button1Up:Connect(function()
		 
		md = true
		 
	end))

	table.insert(connections, Mouse.Button2Down:Connect(function()
		 
		local part = Mouse.Target
		if part then
			color = part.Color
			inverseHSV()
			 
		else
			 
		end
	end))

	for i, v in PaintFrame.ScrollingFrame:GetChildren() do 
		local Button = v:FindFirstChild("TextButton")
		if Button then
			table.insert(connections, Button.MouseButton1Down:Connect(function()
				 
				SelectMaterial(tostring(v))
			end))
		end
	end

	 
	return connections
end```

cwheel means color wheel
dp means darkness pickers