How do I make a hex code from the colour wheel?

Hi guys, I created a hex code from the colour wheel, when I type, the focus is lost, but the mouse returns the colour when it moves. So, watch in my project video:

I see the part just changing colour instead of the colour preview UI. So, look in a local script

local colorWheel = script.Parent:WaitForChild("ColorWheel")
local wheelPicker = colorWheel:WaitForChild("Picker")

local darknessPicker = script.Parent:WaitForChild("DarknessPicker")
local darknessSlider = darknessPicker:WaitForChild("Slider")

local colorDisplay = script.Parent:WaitForChild("ColorDisplay")
local part = workspace.Part

local hueBox = script.Parent:WaitForChild("HueBox")
local saturationBox = script.Parent:WaitForChild("SaturationBox")
local valueBox = script.Parent:WaitForChild("ValueBox")
local hexBox = script.Parent:WaitForChild("HexBox")

local close = script.Parent:WaitForChild("CloseButton")

local uis = game:GetService("UserInputService")

local buttonDown = false
local movingSlider = false

local function updateColor(centreOfWheel, currentColor)
	
		
	local colorPickerCentre = Vector2.new(
		wheelPicker.AbsolutePosition.X + (wheelPicker.AbsoluteSize.X/2),
		wheelPicker.AbsolutePosition.Y + (wheelPicker.AbsoluteSize.Y/2)
	)
	
	local h = (math.pi - math.atan2(colorPickerCentre.Y - centreOfWheel.Y, colorPickerCentre.X - centreOfWheel.X)) / (math.pi + 2)
	
	local s = (centreOfWheel - colorPickerCentre).Magnitude / (colorWheel.AbsoluteSize.X/2)
	
	local v = math.abs((darknessSlider.AbsolutePosition.Y - darknessPicker.AbsolutePosition.Y) / darknessPicker.AbsoluteSize.Y - 1)
	
	
	local hsv = Color3.fromHSV(math.clamp(h, 0, 1), math.clamp(s, 0, 1), math.clamp(v, 0, 1))
	
	currentColor.BackgroundColor3 = hsv
	
	hueBox.PlaceholderText = h
	saturationBox.PlaceholderText = s
	valueBox.PlaceholderText = v
	
	darknessPicker.UIGradient.Color = ColorSequence.new{
		ColorSequenceKeypoint.new(0, hsv),
		ColorSequenceKeypoint.new(1, Color3.new(0, 0, 0))
	}
	
end

colorWheel.MouseButton1Down:Connect(function()
	buttonDown = true
end)

darknessPicker.MouseButton1Down:Connect(function()
	movingSlider = true
end)


uis.InputEnded:Connect(function(input)
	
	if input.UserInputType ~= Enum.UserInputType.MouseButton1 and Enum.UserInputType.Touch then return end
	
	buttonDown = false
	movingSlider = false
end)


uis.InputChanged:Connect(function(input)
	
	if input.UserInputType ~= Enum.UserInputType.MouseMovement and input.UserInputType ~= Enum.UserInputType.MouseButton1 then return end
	
	
	local mousePos = uis:GetMouseLocation() - Vector2.new(0, game:GetService("GuiService"):GetGuiInset().Y)
	
	local centreOfWheel = Vector2.new(colorWheel.AbsolutePosition.X + (colorWheel.AbsoluteSize.X/2), colorWheel.AbsolutePosition.Y + (colorWheel.AbsoluteSize.Y/2))
	
	local distanceFromWheel = (mousePos - centreOfWheel).Magnitude
	
	
	if distanceFromWheel <= colorWheel.AbsoluteSize.X/2 and buttonDown then
		
		wheelPicker.Position = UDim2.new(0, mousePos.X - colorWheel.AbsolutePosition.X, 0, mousePos.Y - colorWheel.AbsolutePosition.Y)
		
		
	elseif movingSlider then
		
		darknessSlider.Position = UDim2.new(darknessSlider.Position.X.Scale, 0, 0,
			math.clamp(
				mousePos.Y - darknessPicker.AbsolutePosition.Y,
				0,
				darknessPicker.AbsoluteSize.Y)
		)
	end
	
	updateColor(centreOfWheel, colorDisplay)
end)

hueBox.FocusLost:Connect(function(enterPressed)
	if enterPressed then
		local h = tonumber(hueBox.Text)
		
		if not h then return end
		
		local hsv = colorDisplay.BackgroundColor3:ToHSV()
		
		hsv = Color3.fromHSV(math.clamp(h, 0, 1), hsv.S, hsv.V)
		
		colorDisplay.BackgroundColor3 = hsv
		
		updateColor(Vector2.new(colorWheel.AbsolutePosition.X + (colorWheel.AbsoluteSize.X/2), colorWheel.AbsolutePosition.Y + (colorWheel.AbsoluteSize.Y/2)), colorDisplay)
	end
end)

saturationBox.FocusLost:Connect(function(enterPressed)
	if enterPressed then
		local s = tonumber(saturationBox.Text)
		
		if not s then return end
		
		local hsv = colorDisplay.BackgroundColor3:ToHSV()
		
		hsv = Color3.fromHSV(hsv.H, math.clamp(s, 0, 1), hsv.V)
		
		colorDisplay.BackgroundColor3 = hsv
		
		updateColor(Vector2.new(colorWheel.AbsolutePosition.X + (colorWheel.AbsoluteSize.X/2), colorWheel.AbsolutePosition.Y + (colorWheel.AbsoluteSize.Y/2)), colorDisplay)
	end
end)

valueBox.FocusLost:Connect(function(enterPressed)
	-- I'm not sure if this is the correct way to do it, but it works.
	if enterPressed then
		local v = tonumber(valueBox.Text)
		
		if not v then return end
		
		local hsv = colorDisplay.BackgroundColor3:ToHSV()
		
		hsv = Color3.fromHSV(hsv.H, hsv.S, math.clamp(v, 0, 1))
		
		colorDisplay.BackgroundColor3 = hsv
		
		updateColor(Vector2.new(colorWheel.AbsolutePosition.X + (colorWheel.AbsoluteSize.X/2), colorWheel.AbsolutePosition.Y + (colorWheel.AbsoluteSize.Y/2)), colorDisplay)
	end
end)

hexBox.FocusLost:Connect(function(enterPressed)
	-- If the user pressed enter
	if enterPressed then
		
		local hex = hexBox.Text:gsub("#", "")
		
		if #hex == 6 then
			
			local r, g, b = tonumber(hex:sub(1,2), 16)/255, tonumber(hex:sub(3,4), 16)/255, tonumber(hex:sub(5,6), 16)/255
			
			colorDisplay.BackgroundColor3 = Color3.new(r,g,b)
			part.Color = Color3.new(r,g,b)
			
			hueBox.PlaceholderText = "N/A"
			saturationBox.PlaceholderText = "N/A"
			valueBox.PlaceholderText = "N/A"
			
			darknessPicker.UIGradient.Color = ColorSequence.new{
				ColorSequenceKeypoint.new(0, Color3.new(r,g,b)),
				ColorSequenceKeypoint.new(1, Color3.new(0, 0, 0))
			}
			
		end
	end
end)

close.Activated:Connect(function()
	script.Parent.Visible = false
end)

close.MouseButton1Up:Connect(function()
	close.BackgroundColor3 = Color3.fromRGB(255, 0, 0)
end)

close.MouseButton1Down:Connect(function()
	close.BackgroundColor3 = Color3.fromRGB(255, 255, 0)
end)

How do I fix the hex code that changes colour without moving the mouse, which leads to the change itself?

I’m pretty sure you need to move the WheelPicker and the DarknessSlider to the correct positions when updating the color from hex and that should fix the issue