Making a color picker in Thunkable X is easy, so come learn how!
For this demo app, the UI is simple, add 3 labels and 3 sliders to your layout in pairs. (1 slider, 1 label, repeat two more times) Get the remix link at the bottom of this tutorial.
Now we add the code. Per Thunkable documentation, we will be able to take advantage of some cool blocks specifically used to assign color in a Red/Green/Blue (RGB) format.
Start by creating a function that doesn’t return anything called
func.setBackgroundColor. Drag and position the block to change the screen background colors into the function. Why use a function, you ask? Separating your code into function allows you to use it more than once without repeating the same blocks again. It also allows to have cleaner looking code or to break up big code chunks into smaller sections. The more your apps grow, the more you will appreciate this concept.
after you have those blocks in place, add a color picker and connect it to the
set background color block
from the slider method blocks, grab the
get value blocks for the corresponding R/G/B argument.
In case you find a color you like and want to remember it, you can register the values on the screen. Create a new function with no return named
func.setLabel For each label, grab a
set text to method block and place them into the new function. Then connect a text join to each label block and label the top text input the corresponding color name as shown in the picture.
Last add the corresponding
slider get value blocks and you’re done!