Color Picker is giving wrong colors

Help and Feedback Scripting Support
#1

Hi, I am making a color picker but, it is giving me the wrong colors, it wasn’t like that before until I added a dark one. Here’s a picture.

RobloxScreenShot20201102_013854745
RobloxScreenShot20201102_013854745857×498 188 KB

As you can see in the picture, my slider is at some other color, but in the ColorPreview, it’s the wrong color. Here’s the code that I am using:

local ColorPickerArea = script.Parent;

local Line = ColorPickerArea:WaitForChild("Line");

local Darkness = ColorPickerArea.Parent:WaitForChild("Darkness");
local LineDarkness = Darkness:WaitForChild("LineDarkness");

local keyPoints = ColorPickerArea:FindFirstChildOfClass("UIGradient").Color.Keypoints;

local Player = game.Players.LocalPlayer
local Mouse = Player:GetMouse();

local IsMoving = false;
local isMovingDarkness = false;

LineDarkness.MouseButton1Down:Connect(function()
    isMovingDarkness = true;
end)

LineDarkness.MouseButton1Up:Connect(function()
    isMovingDarkness = false;
end)

Line.MouseButton1Down:Connect(function()
    IsMoving = true;
end)

Line.MouseButton1Up:Connect(function()
    IsMoving = false;
end)

local function returnColor(percentage, keypoints)
    
    local leftColor = keypoints[1]
    local rightColor = keypoints[#keypoints];
    local color = leftColor.Value;
    local lerp = 0.5;
    
    for i = 1, #keypoints - 1 do
        if keypoints[i].Time <= percentage and keypoints[i+1].Time >= percentage then
            
            leftColor = keypoints[i];
            rightColor = keypoints[i+1]
            
            lerp = (percentage - leftColor.Time) / (rightColor.Time - leftColor.Time)
            
            color = leftColor.Value:lerp(rightColor.Value, lerp)
            
            return color
        end
    end
    return color    
end


Mouse.Move:Connect(function()
    if IsMoving then
        
        local minX = ColorPickerArea.AbsolutePosition.X;
        
        local maxX = minX + ColorPickerArea.AbsoluteSize.X
        
        local mouseX = math.clamp(Mouse.X, minX, maxX)
        local xPixel = maxX - minX
        
        local newPos = (mouseX -minX) / xPixel 
        
        Line.Position = UDim2.new(newPos, 0, 0, 0)
        
    end
    if isMovingDarkness then
        local minX = Darkness.AbsolutePosition.X;
        
        local maxX = minX + (Darkness.AbsoluteSize.X);
        
        local mouseX = math.clamp(Mouse.X, minX, maxX);
        
        local xPixel = (maxX - minX); 
        
        local newPosition = (mouseX - minX) / xPixel
        
        LineDarkness.Position = UDim2.new(newPosition, 0, 0, 0);
        
    end
end)

local function updateColorPreview()
    
    local absoluteXColor = Line.Position.X.Scale;
    
    local color = returnColor(absoluteXColor, keyPoints);
    
    local colorR, colorG, colorB = math.floor(color.R * 255), math.floor(color.B * 255), math.floor(color.G * 255);
    
    local darknessLineX = LineDarkness.Position.X.Scale;
    
    local darkness = returnColor(darknessLineX, ColorPickerArea.Parent.Darkness.DarknessGradient.Color.Keypoints);
    
    local darknessR, darknessG, darknessB = 255 - math.floor(darkness.R * 255), 255 - math.floor(darkness.G * 255), 255 - math.floor(darkness.B * 255);
    
    local resultColor = Color3.fromRGB(colorR - darknessR, colorG - darknessG, colorB - darknessB);
    
    ColorPickerArea.Parent.ColorShower.BackgroundColor3 = resultColor
    
end

Line:GetPropertyChangedSignal("Position"):Connect(updateColorPreview);
LineDarkness:GetPropertyChangedSignal("Position"):Connect(updateColorPreview);

Help’s appreciated!

#2

For a color picker like this one, I recommend you use HSV instead of RGB. It’s much more comfortable for visual color pickers.

#3

I’m not making this for a game, just for fun. lol I just need help.

#4

Still, by picking HSV you could probably avoid a lot of calculations.

#5

Okay. I will do that one, but can you help me on this one for right now?

#6

Well, apparently you did something wrong while calculating the color. This script is quite long and complex so it will be hard for other people to find what’s wrong. I recommend you try some print debugging to see which part of your code is working incorrectly, it will be much easier then.

print debugging is basicallly putting print() in different parts of your code to check the value of variables and see if it’s as it should.

#7

The code isn’t stopping any where. It’s just because of the darkness one but I have no idea what’s the problem.

#8

If you want to change the color’s darkness without changing the hue, you need to multiply or divide the red, green and blue components by the same number instead of substracting the same number from each of them. If you replace some of the code in your updateColorPreview function with this, does it work?

local multiplier = 1-darknessLineX

local resultColor = Color3.fromRGB(colorR*multiplier, colorG*multiplier, colorB*multiplier)
#9

I realized that I messed up in my calculation, so I redid all the calculations, then it worked. Thanks anyway.