How would you make UI's color match a part's color?

Help and Feedback Scripting Support
#1

I currently am making a game where there are a bunch of random colored parts on a user’s screen. The goal of the player is to match the color on their UI with the part on their screen.

Since these parts are affected by the world’s lighting, the RGB value displayed on the parts will be different than the RGB value displayed on the UI.

Example:
Capture

The part’s Color property is equal to the UI’s BackgroundColor3 property, however they are showing different shades of gray due to lighting’s effect on the part.

Is there any way to make the UI’s color match the color of the top face of the part?

Basically a color picker for the top side of the part, but through a script.

3 Likes
#2

There is no way you can do that. You would need to do something with lighting to make it not seem different.

2 Likes
#4

I don’t think they are using SurfaceGuis.

Tho that would be “kind of” a solution, but it doesn’t work in every case.

2 Likes
#5

You could try to make the color on the UI slightly brighter than the color of the part. You would need to check if the values equals to a bigger number then possible. ( like 255,255,255 + 10,10,10 would be 265,265,265 which can’t exist as a color here. )

#6

But what if the part is affected by shadow instead of light?

#7

You could make the color darker for shadows. ( 255,255,255 - 10,10,10 = 245,245,245 ) There might be a better way to check for shadows and lighting, but idk.

#8

But what if you don’t know if it’s affected by shadows or light?

#9

Well, sorry to say this but it IS picking the top face of the part. It just looks brighter because of roblox lighting, which cannot change.

I would say just “give it +10 or -10 depending if the face is in the shadow or not” but then that isn’t the true colour of the part, and means if you are using said ChosenColor to insert more parts, they will be off. I would just stick with the colour that it gives you.

#10

Try Highlight with DepthMode Occluded, FillTransparency to 0, OutlineTransparency to 1 and FillColour to your colour.

like that:

local hl = Instance.new("Highlight")
hl.OutlineTransparency = 1
hl.FillTransparency = 0
hl.DepthMode = Enum.HighlightDepthMode.Occluded
hl.FillColor = something.Color -- Attach a required color here
hl.Parent = YourPart -- Your part goes here

Note: It won’t have any shadows on it, and may look unrealistic.

1 Like
#11

Lightning can change. You can change ambient color, etc.

#12

It was poorly worded in my original post but I meant the effect of the lighting on the part could not be translated to the GUI, e.g. a pink GUI looking like the shaded portion of a pink brick versus the top face. Unsure if this is still the case.

In my original reply, I was implying the top face (hit by the white default environmental light) is nearest to true colour but that is wrong because of reflection. It will look a smidge brighter, or depending on the environmental lighting, a LOT brighter (than a coloured GUI or lighting-less object).

I am sure the solution here is to manipulate the lighting equation to match the part colour, or disable lighting effects on the part so it looks like the GUI, but I have no approach on how to do that.

#13

one way to do this would be to use a ViewportFrame. The changes you’ll have to make is

  • ViewportFrame.AmbientColor = Color3.new(1, 1, 1)
  • ViewportFrame.LightColor = Color3.new()
    the results will be this
    image
    image912×479 39 KB

the only catch is that the part will have terrible quality

image
image720×380 38.3 KB

2 Likes
#14

Im pretty sure it can? by somehow using the ambient color (which is the light color) and applying it to the ui bg color

#15

Because lighting changing color of part on rendering. If it’s really if they have to be exactly the same color, you can create a highlight in part and can set FillTransparency to 0. Then change FillColor to chosen color. (but this will ignore the shadows)