PowerApps: Color Picker Component

Hello Friends,

Welcome back with another post on PowerApps. Today, we will learn about Color-Picker feature. Surprised, as there is no such built-in feature in PowerApps. Right, therefore, we will build the logic here. I am going to create a very basic component. It will include Text Inputs as well as Sliders for RGBA. User can type-in the RGBA color values in text input boxes or it can use sliders as well. Instant changes to the color will reflect in the output box. So, let's begin.

1. Login to PowerApps Maker Portal. Create a new app and provide as suitable name.
1. 
2. Click on Components and then click on "+ New component". It will add a new component. So, we got our component platform, where we will develop out Color-Picker component.
1. 
3. Give component a suitable name. I am using "SJColorPicker'.
4. Set the size of component as-
1. Width: 250
2. Height: 140 
5. Add a rectangle to give your component a border.
1. Name: CP_rct_Border
2. X: 0
3. Y: 0
4. Width: SJColorPicker.Width
5. Height: SJColorPicker.Height
6. Fill: Color.Transparent
7. BorderColor: Color.Black
8. BorderSyle: BorderStyle.Solid
9. BorderThickness: 1
10. 
6. Add a TextInput control for Red Color.
1. Name: CP_txt_RedColor
2. Default: "127"
3. Format: Number
4. Size: Self.Height*35%
5. Align: Align.Center
6. LineHeight: 1
7. X: CP_rct_Border.X+CP_rct_Border.BorderThickness
8. Y: CP_rct_Border.Y+CP_rct_Border.BorderThickness
9. Width: (SJColorPicker.Width-2*CP_rct_Border.BorderThickness)/5
10. Height: (SJColorPicker.Height-2*CP_rct_Border.BorderThickness)/5
11. PaddingTop: 5
12. PaddingBottom: Self.PaddingTop
13. PaddingLeft: Self.PaddingTop
14. PaddingRight: Self.PaddingTop
15. Color: RGBA(0, 0, 0, 1)
16. Fill: RGBA(255, 255, 255, 1)
17. BorderColor: Color.Black
18. BorderSyle: BorderStyle.Solid
19. BorderThickness: 1
20. RadiusTopLeft: 0
21. RadiusTopRight: Self.RadiusTopLeft
22. RadiusBottomLeft: Self.RadiusTopLeft
23. RadiusBottomRight: Self.RadiusTopLeft
24. DisabledBorderColor: Self.BorderColor
25. DisabledColor: Self.Color
26. DisabledFill: Self.Fill
27. HoverBorderColor: Self.BorderColor
28. HoverColor: Self.Color
29. HoverFill: Self.Fill
30. PressedBorderColor: Self.BorderColor
31. PressedColor: Self.Color
32. PressedFill: Self.Fill
33. 
7. Now, add a TextInput control for Green Color.
1. Name: CP_txt_GreenColor
2. Default: "127"
3. Format: Number
4. Size: Self.Height*35%
5. Align: Align.Center
6. LineHeight: 1
7. X: CP_txt_RedColor.X+CP_txt_RedColor.Width
8. Y: CP_rct_Border.Y+CP_rct_Border.BorderThickness
9. Width: (SJColorPicker.Width-2*CP_rct_Border.BorderThickness)/5
10. Height: (SJColorPicker.Height-2*CP_rct_Border.BorderThickness)/5
11. PaddingTop: 5
12. PaddingBottom: Self.PaddingTop
13. PaddingLeft: Self.PaddingTop
14. PaddingRight: Self.PaddingTop
15. Color: RGBA(0, 0, 0, 1)
16. Fill: RGBA(255, 255, 255, 1)
17. BorderColor: Color.Black
18. BorderSyle: BorderStyle.Solid
19. BorderThickness: 1
20. RadiusTopLeft: 0
21. RadiusTopRight: Self.RadiusTopLeft
22. RadiusBottomLeft: Self.RadiusTopLeft
23. RadiusBottomRight: Self.RadiusTopLeft
24. DisabledBorderColor: Self.BorderColor
25. DisabledColor: Self.Color
26. DisabledFill: Self.Fill
27. HoverBorderColor: Self.BorderColor
28. HoverColor: Self.Color
29. HoverFill: Self.Fill
30. PressedBorderColor: Self.BorderColor
31. PressedColor: Self.Color
32. PressedFill: Self.Fill
33. 
8. Now, add a TextInput control for Blue Color.
1. Name: CP_txt_BlueColor
2. Default: "127"
3. Format: Number
4. Size: Self.Height*35%
5. Align: Align.Center
6. LineHeight: 1
7. X: CP_txt_GreenColor.X+CP_txt_GreenColor.Width
8. Y: CP_rct_Border.Y+CP_rct_Border.BorderThickness
9. Width: (SJColorPicker.Width-2*CP_rct_Border.BorderThickness)/5
10. Height: (SJColorPicker.Height-2*CP_rct_Border.BorderThickness)/5
11. PaddingTop: 5
12. PaddingBottom: Self.PaddingTop
13. PaddingLeft: Self.PaddingTop
14. PaddingRight: Self.PaddingTop
15. Color: RGBA(0, 0, 0, 1)
16. Fill: RGBA(255, 255, 255, 1)
17. BorderColor: Color.Black
18. BorderSyle: BorderStyle.Solid
19. BorderThickness: 1
20. RadiusTopLeft: 0
21. RadiusTopRight: Self.RadiusTopLeft
22. RadiusBottomLeft: Self.RadiusTopLeft
23. RadiusBottomRight: Self.RadiusTopLeft
24. DisabledBorderColor: Self.BorderColor
25. DisabledColor: Self.Color
26. DisabledFill: Self.Fill
27. HoverBorderColor: Self.BorderColor
28. HoverColor: Self.Color
29. HoverFill: Self.Fill
30. PressedBorderColor: Self.BorderColor
31. PressedColor: Self.Color
32. PressedFill: Self.Fill
33. 
9. Now, add a TextInput control for Alpha. Alpha value is used for transparency. 0 means transparent while 100% means opaque.
1. Name: CP_txt_Alpha
2. Default: "50"
3. Format: Number
4. Size: Self.Height*35%
5. Align: Align.Center
6. LineHeight: 1
7. X: CP_txt_BlueColor.X+CP_txt_BlueColor.Width
8. Y: CP_rct_Border.Y+CP_rct_Border.BorderThickness
9. Width: (SJColorPicker.Width-2*CP_rct_Border.BorderThickness)/5
10. Height: (SJColorPicker.Height-2*CP_rct_Border.BorderThickness)/5
11. PaddingTop: 5
12. PaddingBottom: Self.PaddingTop
13. PaddingLeft: Self.PaddingTop
14. PaddingRight: Self.PaddingTop
15. Color: RGBA(0, 0, 0, 1)
16. Fill: RGBA(255, 255, 255, 1)
17. BorderColor: Color.Black
18. BorderSyle: BorderStyle.Solid
19. BorderThickness: 1
20. RadiusTopLeft: 0
21. RadiusTopRight: Self.RadiusTopLeft
22. RadiusBottomLeft: Self.RadiusTopLeft
23. RadiusBottomRight: Self.RadiusTopLeft
24. DisabledBorderColor: Self.BorderColor
25. DisabledColor: Self.Color
26. DisabledFill: Self.Fill
27. HoverBorderColor: Self.BorderColor
28. HoverColor: Self.Color
29. HoverFill: Self.Fill
30. PressedBorderColor: Self.BorderColor
31. PressedColor: Self.Color
32. PressedFill: Self.Fill
33. 
10. Now, add a TextInput control for Output color. This text box will be used to show the result color based upon the RGBA selected.
1. Name: CP_txt_ResultColor
2. Default: ""
3. Format: Text
4. Size: Self.Height*35%
5. Align: Align.Center
6. LineHeight: 1
7. DisplayMode: DisplayMode.Disabled
8. X: CP_txt_Alpha.X+CP_txt_Alpha.Width
9. Y: CP_rct_Border.Y+CP_rct_Border.BorderThickness
10. Width: (SJColorPicker.Width-2*CP_rct_Border.BorderThickness)/5
11. Height: (SJColorPicker.Height-2*CP_rct_Border.BorderThickness)/5
12. PaddingTop: 5
13. PaddingBottom: Self.PaddingTop
14. PaddingLeft: Self.PaddingTop
15. PaddingRight: Self.PaddingTop
16. Color: RGBA(0, 0, 0, 1)
17. Fill: RGBA(255, 255, 255, 1)
18. BorderColor: Color.Black
19. BorderSyle: BorderStyle.Solid
20. BorderThickness: 1
21. RadiusTopLeft: 0
22. RadiusTopRight: Self.RadiusTopLeft
23. RadiusBottomLeft: Self.RadiusTopLeft
24. RadiusBottomRight: Self.RadiusTopLeft
25. DisabledBorderColor: Self.BorderColor
26. DisabledColor: Self.Color
27. DisabledFill: Self.Fill
28. HoverBorderColor: Self.BorderColor
29. HoverColor: Self.Color
30. HoverFill: Self.Fill
31. PressedBorderColor: Self.BorderColor
32. PressedColor: Self.Color
33. PressedFill: Self.Fill
34. 
11. One part is completed. However, a couple of properties yet to set but we will do it later. Now, we will add 4 Slider controls.
12. Add, a slider control for Red color.
1. Name: CP_sld_RedColor
2. Default: If(IsBlank(vrSelectedRedColorValue),127,vrSelectedRedColorValue)
3. Max: 255
4. Min: 0
5. ShowValue: false
6. HandleSize: Self.Height*60%
7. X: CP_txt_RedColor.X
8. Y: CP_txt_RedColor.Y+CP_txt_RedColor.Height
9. Width: SJColorPicker.Width-2*CP_rct_Border.BorderThickness
10. Height: CP_txt_RedColor.Height
11. ValueFill: RGBA(255, 0, 0, 1)
12. 
13. Add, a slider control for Green color.
1. Name: CP_sld_GreenColor
2. Default: If(IsBlank(vrSelectedGreenColorValue),127,vrSelectedGreenColorValue)
3. Max: 255
4. Min: 0
5. ShowValue: false
6. HandleSize: Self.Height*60%
7. X: CP_txt_RedColor.X
8. Y: CP_sld_RedColor.Y+CP_sld_RedColor.Height
9. Width: SJColorPicker.Width-2*CP_rct_Border.BorderThickness
10. Height: CP_txt_RedColor.Height
11. ValueFill: RGBA(0, 255, 0, 1)
12. 
14. Add, a slider control for Blue color.
1. Name: CP_sld_BlueColor
2. Default: If(IsBlank(vrSelectedBlueColorValue),127,vrSelectedBlueColorValue)
3. Max: 255
4. Min: 0
5. ShowValue: false
6. HandleSize: Self.Height*60%
7. X: CP_txt_RedColor.X
8. Y: CP_sld_GreenColor.Y+CP_sld_GreenColor.Height
9. Width: SJColorPicker.Width-2*CP_rct_Border.BorderThickness
10. Height: CP_txt_RedColor.Height
11. ValueFill: RGBA(0, 0, 255, 1)
12. 
15. Add, a slider control for Alpha.
1. Name: CP_sld_Alpha
2. Default: If(IsBlank(vrSelectedAlphaValue),50,vrSelectedAlphaValue)
3. Max: 100
4. Min: 0
5. ShowValue: false
6. HandleSize: Self.Height*60%
7. X: CP_txt_RedColor.X
8. Y: CP_sld_BlueColor.Y+CP_sld_BlueColor.Height
9. Width: SJColorPicker.Width-2*CP_rct_Border.BorderThickness
10. Height: CP_txt_RedColor.Height
11. ValueFill: RGBA(0, 0, 0, 1)
12. 
16. Basic setup has been done. Now the functional part is remaining. First define two properties of the component by selecting the component and then clicking on the "+ New custom property".
17. 
18. Add an Input Property-
1. Display Name: Decimal-Hex Table
2. Name: DecimalHexTable
3. Property type: Input
4. Data type: Table
5. 
19. Click on Save. Now click on this property to set it's default value.
1. 
20. Replace the current display table with below one-

1. Table(
       {
           Decimal: 0,
           Hex: "0"
       },
       {
           Decimal: 1,
           Hex: "1"
       },
       {
           Decimal: 2,
           Hex: "2"
       },
       {
           Decimal: 3,
           Hex: "3"
       },
       {
           Decimal: 4,
           Hex: "4"
       },
       {
           Decimal: 5,
           Hex: "5"
       },
       {
           Decimal: 6,
           Hex: "6"
       },
       {
           Decimal: 7,
           Hex: "7"
       },
       {
           Decimal: 8,
           Hex: "8"
       },
       {
           Decimal: 9,
           Hex: "9"
       },
       {
           Decimal: 10,
           Hex: "A"
       },
       {
           Decimal: 11,
           Hex: "B"
       },
       {
           Decimal: 12,
           Hex: "C"
       },
       {
           Decimal: 13,
           Hex: "D"
       },
       {
           Decimal: 14,
           Hex: "E"
       },
       {
           Decimal: 15,
           Hex: "F"
       }
   )

21. This table will be used to convert Decimal value to Hex and vice-versa.
22. Add another custom property. This time it would type of Output.
1. Display Name: Output Color
2. Name: OutputColor
3. Property type: Output
4. Data type: Color
5. 
23. Click on Save. Now click on this property to set it's default value. Change the default value to "vrOutputColor".
24. Now we will start applying functionality for "OnChange" event of each control.
25. Click on CP_sld_Alpha and choose OnChange property. Update the function as-

1. Set(
       vrSelectedAlphaValue,
       Self.Value
   );
   Set(
       vrOutputColor,
       ColorValue(
           Concatenate(
               "#",
               Concatenate(
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               RoundDown(
                                   Value(CP_txt_RedColor.Text) / 16,
                                   0
                               ),
                               16
                           )
                       ).Hex
                   ),
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               Value(CP_txt_RedColor.Text),
                               16
                           )
                       ).Hex
                   )
               ),
               Concatenate(
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               RoundDown(
                                   Value(CP_txt_GreenColor.Text) / 16,
                                   0
                               ),
                               16
                           )
                       ).Hex
                   ),
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               Value(CP_txt_GreenColor.Text),
                               16
                           )
                       ).Hex
                   )
               ),
               Concatenate(
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               RoundDown(
                                   Value(CP_txt_BlueColor.Text) / 16,
                                   0
                               ),
                               16
                           )
                       ).Hex
                   ),
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               Value(CP_txt_BlueColor.Text),
                               16
                           )
                       ).Hex
                   )
               ),
               Concatenate(
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               RoundDown(
                                   (Value(CP_txt_Alpha.Text) * 255 / 100) / 16,
                                   0
                               ),
                               16
                           )
                       ).Hex
                   ),
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               RoundDown(
                                   (Value(CP_txt_Alpha.Text) * 255 / 100) / 16,
                                   0
                               ),
                               16
                           )
                       ).Hex
                   )
               )
           )
       )
   );
   

2. 
26. Click on CP_sld_BlueColor and choose OnChange property. Update the function as-

1. Set(
       vrSelectedBlueColorValue,
       Self.Value
   );
   Set(
       vrOutputColor,
       ColorValue(
           Concatenate(
               "#",
               Concatenate(
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               RoundDown(
                                   Value(CP_txt_RedColor.Text) / 16,
                                   0
                               ),
                               16
                           )
                       ).Hex
                   ),
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               Value(CP_txt_RedColor.Text),
                               16
                           )
                       ).Hex
                   )
               ),
               Concatenate(
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               RoundDown(
                                   Value(CP_txt_GreenColor.Text) / 16,
                                   0
                               ),
                               16
                           )
                       ).Hex
                   ),
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               Value(CP_txt_GreenColor.Text),
                               16
                           )
                       ).Hex
                   )
               ),
               Concatenate(
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               RoundDown(
                                   Value(CP_txt_BlueColor.Text) / 16,
                                   0
                               ),
                               16
                           )
                       ).Hex
                   ),
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               Value(CP_txt_BlueColor.Text),
                               16
                           )
                       ).Hex
                   )
               ),
               Concatenate(
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               RoundDown(
                                   (Value(CP_txt_Alpha.Text) * 255 / 100) / 16,
                                   0
                               ),
                               16
                           )
                       ).Hex
                   ),
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               RoundDown(
                                   (Value(CP_txt_RedColor.Text) * 255 / 100) / 16,
                                   0
                               ),
                               16
                           )
                       ).Hex
                   )
               )
           )
       )
   );
   

2. 
27. Click on CP_sld_GreenColor and choose OnChange property. Update the function as-

1. Set(
       vrSelectedGreenColorValue,
       Self.Value
   );
   Set(
       vrOutputColor,
       ColorValue(
           Concatenate(
               "#",
               Concatenate(
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               RoundDown(
                                   Value(CP_txt_RedColor.Text) / 16,
                                   0
                               ),
                               16
                           )
                       ).Hex
                   ),
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               Value(CP_txt_RedColor.Text),
                               16
                           )
                       ).Hex
                   )
               ),
               Concatenate(
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               RoundDown(
                                   Value(CP_txt_GreenColor.Text) / 16,
                                   0
                               ),
                               16
                           )
                       ).Hex
                   ),
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               Value(CP_txt_GreenColor.Text),
                               16
                           )
                       ).Hex
                   )
               ),
               Concatenate(
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               RoundDown(
                                   Value(CP_txt_BlueColor.Text) / 16,
                                   0
                               ),
                               16
                           )
                       ).Hex
                   ),
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               Value(CP_txt_BlueColor.Text),
                               16
                           )
                       ).Hex
                   )
               ),
               Concatenate(
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               RoundDown(
                                   (Value(CP_txt_Alpha.Text) * 255 / 100) / 16,
                                   0
                               ),
                               16
                           )
                       ).Hex
                   ),
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               RoundDown(
                                   (Value(CP_txt_RedColor.Text) * 255 / 100) / 16,
                                   0
                               ),
                               16
                           )
                       ).Hex
                   )
               )
           )
       )
   );
   

2. 
28. Click on CP_sld_RedColor and choose OnChange property. Update the function as-

1. Set(
       vrSelectedRedColorValue,
       Self.Value
   );
   Set(
       vrOutputColor,
       ColorValue(
           Concatenate(
               "#",
               Concatenate(
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               RoundDown(
                                   Value(CP_txt_RedColor.Text) / 16,
                                   0
                               ),
                               16
                           )
                       ).Hex
                   ),
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               Value(CP_txt_RedColor.Text),
                               16
                           )
                       ).Hex
                   )
               ),
               Concatenate(
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               RoundDown(
                                   Value(CP_txt_GreenColor.Text) / 16,
                                   0
                               ),
                               16
                           )
                       ).Hex
                   ),
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               Value(CP_txt_GreenColor.Text),
                               16
                           )
                       ).Hex
                   )
               ),
               Concatenate(
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               RoundDown(
                                   Value(CP_txt_BlueColor.Text) / 16,
                                   0
                               ),
                               16
                           )
                       ).Hex
                   ),
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               Value(CP_txt_BlueColor.Text),
                               16
                           )
                       ).Hex
                   )
               ),
               Concatenate(
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               RoundDown(
                                   (Value(CP_txt_Alpha.Text) * 255 / 100) / 16,
                                   0
                               ),
                               16
                           )
                       ).Hex
                   ),
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               RoundDown(
                                   (Value(CP_txt_RedColor.Text) * 255 / 100) / 16,
                                   0
                               ),
                               16
                           )
                       ).Hex
                   )
               )
           )
       )
   );

2. 
29. Now, we will update the "Default", "HintText", "OnChange" properties of the text boxes.
30. Click the CP_txt_RedColor control and select Default property of textbox. Update the function as below-

1. If(IsBlank(vrSelectedRedColorValue),CP_sld_RedColor.Value,vrSelectedRedColorValue)

31. Update the same for "HintText" property as well.
32. Update the "OnChange" property as-

1. Set(
       vrSelectedRedColorValue,
       Value(Self.Text)
   );
   Set(
       vrOutputColor,
       ColorValue(
           Concatenate(
               "#",
               Concatenate(
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               RoundDown(
                                   Value(CP_txt_RedColor.Text) / 16,
                                   0
                               ),
                               16
                           )
                       ).Hex
                   ),
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               Value(CP_txt_RedColor.Text),
                               16
                           )
                       ).Hex
                   )
               ),
               Concatenate(
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               RoundDown(
                                   Value(CP_txt_GreenColor.Text) / 16,
                                   0
                               ),
                               16
                           )
                       ).Hex
                   ),
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               Value(CP_txt_GreenColor.Text),
                               16
                           )
                       ).Hex
                   )
               ),
               Concatenate(
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               RoundDown(
                                   Value(CP_txt_BlueColor.Text) / 16,
                                   0
                               ),
                               16
                           )
                       ).Hex
                   ),
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               Value(CP_txt_BlueColor.Text),
                               16
                           )
                       ).Hex
                   )
               ),
               Concatenate(
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               RoundDown(
                                   (Value(CP_txt_Alpha.Text) * 255 / 100) / 16,
                                   0
                               ),
                               16
                           )
                       ).Hex
                   ),
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               RoundDown(
                                   (Value(CP_txt_RedColor.Text) * 255 / 100) / 16,
                                   0
                               ),
                               16
                           )
                       ).Hex
                   )
               )
           )
       )
   );

33. Click the CP_txt_GreenColor control and select Default property of textbox. Update the function as below-

1. If(IsBlank(vrSelectedGreenColorValue),CP_sld_GreenColor.Value,vrSelectedGreenColorValue)

34. Update the same for "HintText" property as well.
35. Update the "OnChange" property as-

1. Set(
       vrSelectedGreenColorValue,
       Value(Self.Text)
   );
   Set(
       vrOutputColor,
       ColorValue(
           Concatenate(
               "#",
               Concatenate(
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               RoundDown(
                                   Value(CP_txt_RedColor.Text) / 16,
                                   0
                               ),
                               16
                           )
                       ).Hex
                   ),
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               Value(CP_txt_RedColor.Text),
                               16
                           )
                       ).Hex
                   )
               ),
               Concatenate(
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               RoundDown(
                                   Value(CP_txt_GreenColor.Text) / 16,
                                   0
                               ),
                               16
                           )
                       ).Hex
                   ),
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               Value(CP_txt_GreenColor.Text),
                               16
                           )
                       ).Hex
                   )
               ),
               Concatenate(
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               RoundDown(
                                   Value(CP_txt_BlueColor.Text) / 16,
                                   0
                               ),
                               16
                           )
                       ).Hex
                   ),
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               Value(CP_txt_BlueColor.Text),
                               16
                           )
                       ).Hex
                   )
               ),
               Concatenate(
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               RoundDown(
                                   (Value(CP_txt_Alpha.Text) * 255 / 100) / 16,
                                   0
                               ),
                               16
                           )
                       ).Hex
                   ),
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               RoundDown(
                                   (Value(CP_txt_RedColor.Text) * 255 / 100) / 16,
                                   0
                               ),
                               16
                           )
                       ).Hex
                   )
               )
           )
       )
   );
   

36. Click the CP_txt_BlueColor control and select Default property of textbox. Update the function as below-

1. If(IsBlank(vrSelectedBlueColorValue),CP_sld_BlueColor.Value,vrSelectedBlueColorValue)

37. Update the same for "HintText" property as well.
38. Update the "OnChange" property as-

1. Set(
       vrSelectedBlueColorValue,
       Value(Self.Text)
   );
   Set(
       vrOutputColor,
       ColorValue(
           Concatenate(
               "#",
               Concatenate(
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               RoundDown(
                                   Value(CP_txt_RedColor.Text) / 16,
                                   0
                               ),
                               16
                           )
                       ).Hex
                   ),
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               Value(CP_txt_RedColor.Text),
                               16
                           )
                       ).Hex
                   )
               ),
               Concatenate(
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               RoundDown(
                                   Value(CP_txt_GreenColor.Text) / 16,
                                   0
                               ),
                               16
                           )
                       ).Hex
                   ),
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               Value(CP_txt_GreenColor.Text),
                               16
                           )
                       ).Hex
                   )
               ),
               Concatenate(
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               RoundDown(
                                   Value(CP_txt_BlueColor.Text) / 16,
                                   0
                               ),
                               16
                           )
                       ).Hex
                   ),
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               Value(CP_txt_BlueColor.Text),
                               16
                           )
                       ).Hex
                   )
               ),
               Concatenate(
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               RoundDown(
                                   (Value(CP_txt_Alpha.Text) * 255 / 100) / 16,
                                   0
                               ),
                               16
                           )
                       ).Hex
                   ),
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               RoundDown(
                                   (Value(CP_txt_RedColor.Text) * 255 / 100) / 16,
                                   0
                               ),
                               16
                           )
                       ).Hex
                   )
               )
           )
       )
   );
   

39. Click the CP_txt_Alpha control and select Default property of textbox. Update the function as below-

1. If(IsBlank(vrSelectedAlphaValue),CP_sld_AlphaColor.Value,vrSelectedAlphaValue)

40. Update the same for "HintText" property as well.
41. Update the "OnChange" property as-

1. Set(
       vrSelectedAlphaValue,
       Value(Self.Text)
   );
   Set(
       vrOutputColor,
       ColorValue(
           Concatenate(
               "#",
               Concatenate(
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               RoundDown(
                                   Value(CP_txt_RedColor.Text) / 16,
                                   0
                               ),
                               16
                           )
                       ).Hex
                   ),
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               Value(CP_txt_RedColor.Text),
                               16
                           )
                       ).Hex
                   )
               ),
               Concatenate(
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               RoundDown(
                                   Value(CP_txt_GreenColor.Text) / 16,
                                   0
                               ),
                               16
                           )
                       ).Hex
                   ),
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               Value(CP_txt_GreenColor.Text),
                               16
                           )
                       ).Hex
                   )
               ),
               Concatenate(
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               RoundDown(
                                   Value(CP_txt_BlueColor.Text) / 16,
                                   0
                               ),
                               16
                           )
                       ).Hex
                   ),
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               Value(CP_txt_BlueColor.Text),
                               16
                           )
                       ).Hex
                   )
               ),
               Concatenate(
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               RoundDown(
                                   (Value(CP_txt_Alpha.Text) * 255 / 100) / 16,
                                   0
                               ),
                               16
                           )
                       ).Hex
                   ),
                   Text(
                       LookUp(
                           SJColorPicker.DecimalHexTable,
                           Decimal = Mod(
                               RoundDown(
                                   (Value(CP_txt_RedColor.Text) * 255 / 100) / 16,
                                   0
                               ),
                               16
                           )
                       ).Hex
                   )
               )
           )
       )
   );
   

42. Lastly, update the "Fill" property of CP_txt_ResultColor control as "vrOutputColor".
43. Save the app.
44. Click on Screen tab and this component by selecting from the Insert menu.
1. 
45. Save the app and run. It's working.
46. Now, if you wish to get the color code of the output color, then add a button on screen and paste the below function on "OnSelect" property of button.

1. Set(
       vrOutputColorCode,
       Substitute(
           JSON(
               SJColorPicker_1.OutputColor,
               JSONFormat.IgnoreUnsupportedTypes
           ),
           Char(34),
           ""
       )
   )

2. 
3. Remember the "JSON" function is currently in experimental mode (as On March 05, 2023). So, you need to activate it from Settings >> Upcomin features >> Experimental.
4. 
47. Add a label and set the Text property of label as "vrOutputColorCode".
1. 
48. This way, you can design a basic color picker component.

With this, I am concluding this post.

Happy Coding !!!

Will see you again with some new topics.

Stay Safe !

Stay Healthy !