Unanswered

Is there a way to create a color picker component where the user can select a color and the value is added to a text field?

(0) Share

Report

Posted on by futr_vision

831 Moderator

I have a simple UI wizard that I am creating that let's admin choose various visual style for their app. I am stuck on creating something to easily pick a color. For example, I have a field for 'label background color'. It would be great to have a color picker next to that text field where the user can pick the color and the text field is filled in with the hex value. Is this possible?

Categories:

Building Power Apps

I have the same question (0)

All responses (8)

Answers (0)

Sort by

mmbr1606 14,629 Super User 2026 Season 1 on at

Like (0)

Report
Copy link

Link copied!
hey @futr_vision

try the following

In PowerApps, you can create a color picker by using a combination of controls and functions. Here's a step-by-step guide to create a simple color picker that fills in the HEX value in a text field:
Insert a Slider Control for Red, Green, and Blue:
Go to the 'Insert' tab, select 'Controls', and then choose 'Slider'. You will need three of these, one for each color component (Red, Green, and Blue).
Name them SliderRed, SliderGreen, and SliderBlue.
Set the Slider Properties:
For each slider, set the 'Min' property to 0 and the 'Max' property to 255. This represents the color range for each RGB component.
Insert a Label to Display the HEX Value:
Go to 'Insert' > 'Label'. This label will display the HEX color code.
Set its 'Text' property to the formula that converts RGB values to HEX:

"#" & Text(255 * SliderRed.Value/100, "[$-en-US]00") & Text(255 * SliderGreen.Value/100, "[$-en-US]00") & Text(255 * SliderBlue.Value/100, "[$-en-US]00")
This formula takes the value from each slider, scales it to the 255 range, and then converts it to a two-digit HEX format.
Insert a Rectangle to Preview the Color:
Go to 'Insert' > 'Icons' > 'Rectangle'.
Set the 'Fill' property of the rectangle to:

ColorValue(LabelHex.Text)
Here, LabelHex is the name of the label displaying the HEX value.
Optional - Insert a Text Input to Display or Edit the HEX Value:
Go to 'Insert' > 'Text' > 'Text input'.
Set the 'Default' property of this text input to LabelHex.Text.
By following these steps, you'll create a basic color picker in PowerApps. Users can move the sliders to adjust the color, see the resulting HEX value, and preview the color in real-time. This approach provides an interactive and visual way for admins to choose colors within your app. You can further customize the UI and functionality according to your needs and the app's design.

Let me know if my answer helped solving your issue.

If it did please accept as solution and give it a thumbs up so we can help others in the community.

Greetings

Was this reply helpful? Yes No
futr_vision 831 Moderator on at

Like (0)

Report
Copy link

Link copied!
Thanks. A couple of things.

For the rectangle I think you meant Insert > Shapes > Rectangle.
The formula you provided outputs a 3-digit value for each of the colors and not 2 digits. For example, RGBA(255,255,255) outputs #650650650 and not #FFFFFF

Was this reply helpful? Yes No
mmbr1606 14,629 Super User 2026 Season 1 on at

Like (0)

Report
Copy link

Link copied!
1. yes
2. try this instead
"#" & Text(Round(255 * SliderRed.Value/100, 0), "[$-en-US]00") & Text(Round(255 * SliderGreen.Value/100, 0), "[$-en-US]00") & Text(Round(255 * SliderBlue.Value/100, 0), "[$-en-US]00")
Let me know if my answer helped solving your issue.

If it did please accept as solution and give it a thumbs up so we can help others in the community.

Greetings

Was this reply helpful? Yes No
futr_vision 831 Moderator on at

Like (0)

Report
Copy link

Link copied!

Same result but thanks for trying. Any other ideas?

Was this reply helpful? Yes No
mmbr1606 14,629 Super User 2026 Season 1 on at

Like (0)

Report
Copy link

Link copied!

can you provide an example of what the output with 2 digits should be?

Was this reply helpful? Yes No
mmbr1606 14,629 Super User 2026 Season 1 on at

Like (0)

Report
Copy link

Link copied!
"#" & Text(Round(SliderRed.Value * 2.55, 0), "[$-en-US]00") & Text(Round(SliderGreen.Value * 2.55, 0), "[$-en-US]00") & Text(Round(SliderBlue.Value * 2.55, 0), "[$-en-US]00")

another guess

Was this reply helpful? Yes No
futr_vision 831 Moderator on at

Like (0)

Report
Copy link

Link copied!

I'm trying to make something like this work. Unfortunately, even entering something like RGBA(0,0,0,0) in the text box throws and error that the value can not be converted to a number. That is why I was going down the path you suggested.

Was this reply helpful? Yes No
phorpa 14 on at

Like (0)

Report
Copy link

Link copied!
If you enter like this in the Fill for the rectangle, it'll work.

RGBA(sliderRed.Value,sliderGreen.Value,sliderBlue.Value,sliderTrans.Value%)

Was this reply helpful? Yes No