Hi, guys. Today, I tested some advanced colour changer GUI, but it isn’t reliable. So, I follow to watch this video for help (Some yesterday, I’ve tested with):
So, look at the script for the advanced colour changer GUI:
LocalScript
local p = script.Parent
local background = p:WaitForChild("Background") -- Background
local userInputService = game:GetService("UserInputService")
-- background variables
local buttons = background:WaitForChild("Buttons")
local colourPaletteHistory = background:WaitForChild("ColourPaletteHistory")
local colourPickerPages = background:WaitForChild("ColourPickerPages")
local currentColour = background:WaitForChild("CurrentColour")
local formerColour = background:WaitForChild("FormerColour")
local hsv = background:WaitForChild("HSV")
local rgb = background:WaitForChild("RGB")
local zeroToHundredBtn = background:WaitForChild("0to100Btn")
local zeroToTwoHundredFifthyFive = background:WaitForChild("0to255Btn")
local addColourBtn = background:WaitForChild("AddColourBtn")
local hsvBtn = background:WaitForChild("HSVBtn")
local helpBtn = background:WaitForChild("HelpButton")
local lchBtn = background:WaitForChild("LChBtn")
local hexBox = background:WaitForChild("HexBox")
-- Colour Picker Modes
local cpmPages = colourPickerPages:WaitForChild("Pages")
local cpmTabs = colourPickerPages:WaitForChild("Tabs")
--- Pages
local cmyk = cpmPages:WaitForChild("CMYK")
local normal = cpmPages:WaitForChild("Normal")
local palette = cpmPages:WaitForChild("Palette")
local watercolor = cpmPages:WaitForChild("Watercolor")
local wheel = cpmPages:WaitForChild("Wheel")
--- Tabs
local cmykTab = cpmTabs:WaitForChild("CMYKTabBtn")
local normalTab = cpmTabs:WaitForChild("NormalTabBtn")
local paletteTab = cpmTabs:WaitForChild("PaletteTabBtn")
local waterColorTab = cpmTabs:WaitForChild("WaterColorTabBtn")
local wheelTab = cpmTabs:WaitForChild("WheelTabBtn")
---- CMYK
local c = cmyk:WaitForChild("C")
local k = cmyk:WaitForChild("K")
local m = cmyk:WaitForChild("M")
local y = cmyk:WaitForChild("Y")
local profile = cmyk:WaitForChild("Profile")
local cyan = c:WaitForChild("Cyan")
local key = k:WaitForChild("Key")
local magenta = m:WaitForChild("Magenta")
local yellow = y:WaitForChild("Yellow")
local cyanBtn = cyan:WaitForChild("Cyan")
local keyBtn = key:WaitForChild("Black")
local magentaBtn = magenta:WaitForChild("Magenta")
local yellowBtn = yellow:WaitForChild("Yellow")
local cyanBox = cyan:WaitForChild("CyanBox")
local keyBox = key:WaitForChild("KeyBox")
local magentaBox = magenta:WaitForChild("MagentaBox")
local yellowBox = yellow:WaitForChild("YellowBox")
local cyanPicker = cyanBtn:WaitForChild("Picker")
local keyPicker = keyBtn:WaitForChild("Picker")
local magentaPicker = magentaBtn:WaitForChild("Picker")
local yellowPicker = yellowBtn:WaitForChild("Picker")
---- Normal
local h = normal:WaitForChild("H")
local svPicker = h:WaitForChild("Picker")
local hue = h:WaitForChild("Hue")
local huePicker = hue:WaitForChild("Picker")
local darkness = h:WaitForChild("Darkness")
---- Watercolor
local hueColor = watercolor:WaitForChild("HueColor")
local watercolorIntensity = hueColor:WaitForChild("Intensity")
local watercolorPicker = hueColor:WaitForChild("Picker")
local intensityPicker = watercolorIntensity:WaitForChild("Picker")
---- Color Wheel
local hueWheel = wheel:WaitForChild("Hue")
local triangle = hueWheel:WaitForChild("Triangle")
local trianglePicker = triangle:WaitForChild("Picker")
local triangleSaturation = triangle:WaitForChild("Saturation")
local triangleValue = triangle:WaitForChild("Value")
-- HSV (Hue, Saturation, Value)
local hue2 = hsv:WaitForChild("H")
local sat = hsv:WaitForChild("S")
local value = hsv:WaitForChild("V")
local hueHorizontal = hue2:WaitForChild("HorizontalHue")
local satHorizontal = sat:WaitForChild("HorizontalSat")
local valueHorizontal = value:WaitForChild("HorizontalValue")
local hue2ratio = hueHorizontal:WaitForChild("Ratio")
local hue2checked = hue2ratio:WaitForChild("Checked")
local hue2Btn = hueHorizontal:WaitForChild("Hue")
local hue2Picker = hue2Btn:WaitForChild("Picker")
local hue2Box = hueHorizontal:WaitForChild("HueBox")
local satRatio = satHorizontal:WaitForChild("Ratio")
local satChecked = satRatio:WaitForChild("Checked")
local satBtn = satHorizontal:WaitForChild("Saturation")
local satPicker = satBtn:WaitForChild("Picker")
local satBox = satHorizontal:WaitForChild("SatBox")
local valueRatio = valueHorizontal:WaitForChild("Ratio")
local valueChecked = valueRatio:WaitForChild("Checked")
local valueBtn = valueHorizontal:WaitForChild("Value")
local valuePicker = valueBtn:WaitForChild("Picker")
local valueBox = valueHorizontal:WaitForChild("ValueBox")
-- RGB (Red, Green, Blue)
local red = rgb:WaitForChild("R")
local green = rgb:WaitForChild("G")
local blue = rgb:WaitForChild("B")
local redHorizontal = red:WaitForChild("HorizontalRed")
local greenHorizontal = green:WaitForChild("HorizontalGreen")
local blueHorizontal = blue:WaitForChild("HorizontalBlue")
local redRatio = redHorizontal:WaitForChild("Ratio")
local redChecked = redRatio:WaitForChild("Checked")
local redBtn = redHorizontal:WaitForChild("Red")
local redPicker = redBtn:WaitForChild("Picker")
local redBox = redHorizontal:WaitForChild("RedBox")
local greenRatio = greenHorizontal:WaitForChild("Ratio")
local greenChecked = greenRatio:WaitForChild("Checked")
local greenBtn = greenHorizontal:WaitForChild("Green")
local greenPicker = satBtn:WaitForChild("Picker")
local greenBox = greenHorizontal:WaitForChild("GreenBox")
local blueRatio = blueHorizontal:WaitForChild("Ratio")
local blueChecked = blueRatio:WaitForChild("Checked")
local blueBtn = blueHorizontal:WaitForChild("Blue")
local bluePicker = blueBtn:WaitForChild("Picker")
local blueBox = blueHorizontal:WaitForChild("BlueBox")
-- Mouse
local mouse = game.Players.LocalPlayer:GetMouse()
-- Toggle
local cEnabled = false
local kEnabled = false
local mEnabled = false
local yEnabled = false
local movingHue = false
local movingHuePicker = false
local movingIntensity = false
local movingWatercolor = false
local rotatingWheel = false
local movingTrianglePicker = false
local movingHueSlider = false
local movingSatSlider = false
local movingValueSlider = false
local movingRedSlider = false
local movingGreenSlider = false
local movingBlueSlider = false
cyanPicker.MouseButton1Down:Connect(function()
cEnabled = true
end)
keyPicker.MouseButton1Down:Connect(function()
kEnabled = true
end)
magentaPicker.MouseButton1Down:Connect(function()
mEnabled = true
end)
yellowPicker.MouseButton1Down:Connect(function()
yEnabled = true
end)
huePicker.MouseButton1Down:Connect(function()
movingHue = true
end)
svPicker.MouseButton1Down:Connect(function()
movingHuePicker = true
end)
hue2Picker.MouseButton1Down:Connect(function()
movingHueSlider = true
end)
satPicker.MouseButton1Down:Connect(function()
movingSatSlider = true
end)
valuePicker.MouseButton1Down:Connect(function()
movingValueSlider = true
end)
redPicker.MouseButton1Down:Connect(function()
movingRedSlider = true
end)
greenPicker.MouseButton1Down:Connect(function()
movingGreenSlider = true
end)
bluePicker.MouseButton1Down:Connect(function()
movingBlueSlider = true
end)
cyanPicker.MouseButton1Up:Connect(function()
cEnabled = false
end)
keyPicker.MouseButton1Up:Connect(function()
kEnabled = false
end)
magentaPicker.MouseButton1Up:Connect(function()
mEnabled = false
end)
yellowPicker.MouseButton1Up:Connect(function()
yEnabled = false
end)
huePicker.MouseButton1Up:Connect(function()
movingHue = false
end)
svPicker.MouseButton1Up:Connect(function()
movingHuePicker = false
end)
hue2Picker.MouseButton1Up:Connect(function()
movingHueSlider = false
end)
satPicker.MouseButton1Up:Connect(function()
movingSatSlider = false
end)
valuePicker.MouseButton1Up:Connect(function()
movingValueSlider = false
end)
redPicker.MouseButton1Up:Connect(function()
movingRedSlider = false
end)
greenPicker.MouseButton1Up:Connect(function()
movingGreenSlider = false
end)
bluePicker.MouseButton1Up:Connect(function()
movingBlueSlider = false
end)
mouse.Move:Connect(function()
if cEnabled then
local xOffset = (mouse.X - cyanBtn.AbsolutePosition.X)
xOffset = math.clamp(xOffset, 0, cyanBtn.AbsoluteSize.X)
local sliderPositionNew = UDim2.new(0, xOffset, cyanPicker.Position.Y)
cyanPicker.Position = sliderPositionNew
end
if kEnabled then
local xOffset = (mouse.X - keyBtn.AbsolutePosition.X)
xOffset = math.clamp(xOffset, 0, keyBtn.AbsoluteSize.X)
local sliderPositionNew = UDim2.new(0, xOffset, keyPicker.Position.Y)
keyPicker.Position = sliderPositionNew
end
if mEnabled then
local xOffset = (mouse.X - magentaBtn.AbsolutePosition.X)
xOffset = math.clamp(xOffset, 0, magentaBtn.AbsoluteSize.X)
local sliderPositionNew = UDim2.new(0, xOffset, magentaPicker.Position.Y)
magentaPicker.Position = sliderPositionNew
end
if yEnabled then
local xOffset = (mouse.X - yellowBtn.AbsolutePosition.X)
xOffset = math.clamp(xOffset, 0, yellowBtn.AbsoluteSize.X)
local sliderPositionNew = UDim2.new(0, xOffset, yellowPicker.Position.Y)
yellowPicker.Position = sliderPositionNew
end
if movingHue then
local yOffset = (mouse.Y - hue.AbsolutePosition.Y)
yOffset = math.clamp(yOffset, 0, hue.AbsoluteSize.Y)
local sliderPositionNew = UDim2.new(0, 0, huePicker.Position.Y, yOffset)
huePicker.Position = sliderPositionNew
end
if movingHuePicker then
local mousePos = userInputService:GetMouseLocation() - Vector2.new(0, game:GetService("GuiService"):GetGuiInset().Y)
local centreOfHSV = Vector2.new(h.AbsolutePosition.X + (h.AbsoluteSize.X/2), h.AbsolutePosition.Y + (h.AbsoluteSize.Y/2))
local distanceFromHSV = (mousePos - centreOfHSV).Magnitude
if distanceFromHSV <= h.AbsoluteSize.X/2 and movingHuePicker then
svPicker.Position = UDim2.new(0, mousePos.X - h.AbsolutePosition.X, 0, mousePos.Y - h.AbsolutePosition.Y)
elseif movingValueSlider then
valuePicker.Position = UDim2.new(valuePicker.Position.X.Scale, 0, 0,
math.clamp(
mousePos.Y - valuePicker.AbsolutePosition.Y,
0,
valuePicker.AbsoluteSize.Y
)
)
end
end
if movingHueSlider then
local xOffset = (mouse.X - hue2Btn.AbsolutePosition.X)
xOffset = math.clamp(xOffset, 0, hue2Btn.AbsoluteSize.X)
local sliderPositionNew = UDim2.new(0, xOffset, hue2Picker.Position.Y)
hue2Picker.Position = sliderPositionNew
end
if movingSatSlider then
local xOffset = (mouse.X - satBtn.AbsolutePosition.X)
xOffset = math.clamp(xOffset, 0, satBtn.AbsoluteSize.X)
local sliderPositionNew = UDim2.new(0, xOffset, satPicker.Position.Y)
satPicker.Position = sliderPositionNew
end
if movingValueSlider then
local xOffset = (mouse.X - valueBtn.AbsolutePosition.X)
xOffset = math.clamp(xOffset, 0, valueBtn.AbsoluteSize.X)
local sliderPositionNew = UDim2.new(0, xOffset, valuePicker.Position.Y)
valuePicker.Position = sliderPositionNew
end
if movingRedSlider then
local xOffset = (mouse.X - redBtn.AbsolutePosition.X)
xOffset = math.clamp(xOffset, 0, redBtn.AbsoluteSize.X)
local sliderPositionNew = UDim2.new(0, xOffset, redPicker.Position.Y)
redPicker.Position = sliderPositionNew
end
if movingGreenSlider then
local xOffset = (mouse.X - greenBtn.AbsolutePosition.X)
xOffset = math.clamp(xOffset, 0, greenBtn.AbsoluteSize.X)
local sliderPositionNew = UDim2.new(0, xOffset, greenPicker.Position.Y)
greenPicker.Position = sliderPositionNew
end
if movingBlueSlider then
local xOffset = (mouse.X - blueBtn.AbsolutePosition.X)
xOffset = math.clamp(xOffset, 0, blueBtn.AbsoluteSize.X)
local sliderPositionNew = UDim2.new(0, xOffset, bluePicker.Position.Y)
bluePicker.Position = sliderPositionNew
end
end)
local function returnColor(percentage, gradientKeyPoints)
local leftColour = gradientKeyPoints[1]
local rightColour = gradientKeyPoints[#gradientKeyPoints]
local lerpPercent = 0.5
local colour = leftColour.Value
for i = 1, #gradientKeyPoints -1 do
if gradientKeyPoints[i].Time <= percentage and gradientKeyPoints[i + 1].Time >= percentage then
leftColour = gradientKeyPoints[i]
rightColour = gradientKeyPoints[i + 1]
lerpPercent = (percentage - leftColour.Time) / (rightColour.Time - leftColour.Time)
colour = leftColour.Value:Lerp(rightColour.Value, lerpPercent)
return colour
end
end
end
local function updateColourPreview()
local hueMinXPos = hue2Btn.AbsolutePosition.X
local hueMaxXPos = hueMinXPos + hue2Btn.AbsoluteSize.X
local hueMinYPos = hue.AbsolutePosition.X
local hueMaxYPos = hueMinYPos + hue.AbsoluteSize.X
local cMinXPos = cyanBtn.AbsolutePosition.X
local cMaxXPos = cMinXPos - cyanBtn.AbsoluteSize.X
local kMinXPos = keyBtn.AbsolutePosition.X
local kMaxXPos = kMinXPos - keyBtn.AbsoluteSize.X
local mMinXPos = magentaBtn.AbsolutePosition.X
local mMaxXPos = mMinXPos - magentaBtn.AbsoluteSize.X
local yMinXPos = yellowBtn.AbsolutePosition.X
local yMaxXPos = yMinXPos - yellowBtn.AbsoluteSize.X
local satMinXPos = satBtn.AbsolutePosition.X
local satMaxXPos = satMinXPos - satBtn.AbsoluteSize.X
local valueMinXPos = valueBtn.AbsolutePosition.X
local valueMaxXPos = valueMinXPos - valueBtn.AbsoluteSize.X
local redMinXPos = redBtn.AbsolutePosition.X
local redMaxXPos = redMinXPos - redBtn.AbsoluteSize.X
local greenMinXPos = greenBtn.AbsolutePosition.X
local greenMaxXPos = greenMinXPos - greenBtn.AbsoluteSize.X
local blueMinXPos = blueBtn.AbsolutePosition.X
local blueMaxXPos = blueMinXPos - blueBtn.AbsoluteSize.X
local hueXPixelSize = hueMaxXPos - hueMinXPos
local hueYPixelSize = hueMaxYPos - hueMinYPos
local cyanXPixelSize = cMaxXPos - cMinXPos
local keyXPixelSize = kMaxXPos - kMinXPos
local magentaXPixelSize = mMaxXPos - mMinXPos
local yellowXPixelSize = yMaxXPos - yMinXPos
local saturationXPixelSize = satMaxXPos - satMinXPos
local valueXPixelSize = valueMaxXPos - valueMinXPos
local redXPixelSize = redMaxXPos - redMinXPos
local greenXPixelSize = greenMaxXPos - greenMinXPos
local blueXPixelSize = blueMaxXPos - blueMinXPos
local hueSliderX = hue2Picker.AbsolutePosition.X
local hueSliderY = huePicker.AbsolutePosition.Y
local cSliderX = cyanPicker.AbsolutePosition.X
local kSliderX = keyPicker.AbsolutePosition.X
local mSliderX = magentaPicker.AbsolutePosition.X
local ySliderX = yellowPicker.AbsolutePosition.X
local saturationSliderX = satPicker.AbsolutePosition.X
local valueSliderX = valuePicker.AbsolutePosition.X
local redSliderX = redPicker.AbsolutePosition.X
local greenSliderX = greenPicker.AbsolutePosition.X
local blueSliderX = bluePicker.AbsolutePosition.X
local hueXPos = (hueSliderX - hueMinXPos) / hueXPixelSize
local hueYPos = (hueSliderY - hueMinYPos) / hueYPixelSize
local cyanXPos = (cSliderX - cMinXPos) / cyanXPixelSize
local keyXPos = (kSliderX - kMinXPos) / keyXPixelSize
local magentaXPos = (mSliderX - mMinXPos) / magentaXPixelSize
local yellowXPos = (ySliderX - yMinXPos) / yellowXPixelSize
local satXPos = (saturationSliderX - satMinXPos) / saturationXPixelSize
local valueXPos = (valueSliderX - valueMinXPos) / valueXPixelSize
local redXPos = (redSliderX - redMinXPos) / redXPixelSize
local blueXPos = (blueSliderX - blueMinXPos) / blueXPixelSize
local greenXPos = (greenSliderX - greenMinXPos) / greenXPixelSize
local hueX = returnColor(hueXPos, hue2Btn.UIGradient.Color.Keypoints)
local hue2R, hue2G, hue2B = math.floor(hueX.R * 255), math.floor(hueX.G * 255), math.floor(hueX.B * 255)
local Saturation = returnColor(satXPos, satBtn.UIGradient.Color.Keypoints)
local satR, satG, satB = 255 + math.floor(Saturation.R * 255), 255 + math.floor(Saturation.G * 255), 255 + math.floor(Saturation.B * 255)
local Value = returnColor(valueXPos, valueBtn.UIGradient.Color.Keypoints)
local valueR, valueG, valueB = 255 - math.floor(Value.R * 255), 255 - math.floor(Value.G * 255), 255 - math.floor(Value.B * 255)
local Red = returnColor(redXPos, redBtn.UIGradient.Color.Keypoints)
local r, rg, rb = 255 - math.floor(Red.R * 255), math.floor(Red.G * 255), math.floor(Red.B * 255)
local Green = returnColor(greenXPos, greenBtn.UIGradient.Color.Keypoints)
local g, gr, gb = 255 - math.floor(Green.G * 255), math.floor(Green.R * 255), math.floor(Green.B * 255)
local Blue = returnColor(blueXPos, blueBtn.UIGradient.Color.Keypoints)
local b, br, bg = 255 - math.floor(Blue.B * 255), math.floor(Blue.R * 255), math.floor(Blue.G * 255)
local resultColour = Color3.fromRGB(hue2R - valueR, hue2G - valueG, hue2B - valueB)
currentColour.BackgroundColor3 = resultColour
end
hue2Picker:GetPropertyChangedSignal("Position"):Connect(updateColourPreview)
valuePicker:GetPropertyChangedSignal("Position"):Connect(updateColourPreview)
redPicker:GetPropertyChangedSignal("Position"):Connect(updateColourPreview)
greenPicker:GetPropertyChangedSignal("Position"):Connect(updateColourPreview)
bluePicker:GetPropertyChangedSignal("Position"):Connect(updateColourPreview)
There are only two ways, how do I need to be improved this advanced colour changer GUI:
Hue makes RGB and darkness changes anytime
As of line 530, the current colour looks weird after changing the hue. But it isn’t the way to change the hue properly. So, I’ve already seen the HSL and HSV demonstration, which cut away from the 3D cylinder model of each, in e. case, it doesn’t look that way for matching hue. So, let me know how do I show it on the page: HSL and HSV - Wikipedia.
The RGB and CMYK haven’t been implemented yet
The RGB and CMYK sliders, but I have scripted them yet, is now working, but these one does not have been implemented yet. So, in line 533, I don’t have to put something in the result colour. But, I got messed up sometimes and how do I make the RGB and CMYK colours? So, the same as HSV and HSL, look in the demonstration page: CMYK color model - Wikipedia
How do I make that advanced colour changer GUI look changing the preview perfectly?