HSV Slider

Does anybody know of a good tutorial for making an HSV slider? We want to make it where you can select your custom LED colors for a robot but for some reason the HSV system we have is not working. Want to troubleshoot but have no idea the normal method. So, any tutorials or guides somebody has would be a big help.

This is the current Eventgraph for the character in the garage (editing) mode

In UE4, Hue goes from 0-360. Saturation, Value, and Alpha go from 0-1.

I’ve done this in UMG with 3 sliders, multiply the Hue slider by 360. And then use a HSV to RGB node to make it a linear color value which is used in materials etc.

You don’t really show how you are setting your ColorAndOpacity variable in your screen shot, so it’s hard to know what you are doing wrong.

Thank you for the post. I might have 0 clue what I am doing (actually i really dont :stuck_out_tongue: ) so I have just fumbled my way to what we have now. The goal is to take the emissive channel and turn that into a modifiable LED color for our robot model. Here is the material so far:

I am taking H (the slider) and dividing that value by 360 to get our .** value. I put that into a Hue Shift and multiply that by the S value, and then Multiply again by the V value (default is 20 so its ultra bright) and then I lerp that all together with a mask so it only effects the highlighted areas. The result is the following:

Hey, here’s an example of how to do this.
Your material doesn’t actually make sense, you can use a vector parameter directly as a color value instead.

Here’s a color picker UMG widget, it’s just 3 regular sliders and a border widget to preview the color. By default sliders go from 0-1, so that works for Value and Saturation, but you’ll have to multiply the Hue sliders value by 360 to get the full range. Then use a HSV to RGB node to make a linear color variable, promote that to a variable, you will use this as the glow color for your material.

The last bit is just setting the color of the border to preview the color.

The widget:

Next, set up your material. Yours will be different obviously, but just as an example. Make a Vecto Parameter node and call it GlowColor. Multiply it by a scalar value to increase the strength, then multiply it by your mask to mask out non-glow areas.

Then, in your character, or wherever you want to do this, i.e. wherever you are adding your widget to the viewport, do something like this:

The “Cube” would be your mesh. It’s unnecessary to do that on tick, but as a simple example it should get you in the right direction.


Seriously, i love you! <3 Thank you so much. Ill try this out and let you know how it looks.

Thank you for your help! Our character customization screen looks great now!

That’s great, glad it helped!