Color Picker | https://thunk.app/w/yZbZseC5T

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.

Screenshot of Thunkable X documentation

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.

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

Last add the corresponding slider get value blocks and you’re done!

Remix Link:
https://x.thunkable.com/copy/3f1f602eb8b5a5c08a68337c2f4ba7c6

6 thoughts on “Color Picker | https://thunk.app/w/yZbZseC5T”

  1. Pingback: Sample Apps – BA Studios

Leave a Reply

Your email address will not be published. Required fields are marked *