[Colorama] Here's how to dynamically manipulate colors 🎨

Tips
1

Just wanted to share something that might not be widely known…

Most of us have typed or copied/pasted hex codes into color fields in the Bubble editor. But did you know that most color fields also accept dynamic expressions which evaluate to a text (string) representing a color?

The text expression can be in one of at least 3 formats - hex codes, rgb, or rgba. Following is the color yellow in each format:

  • #FFFF00
  • rgb(255,255,0)
  • rgba(255,255,0,0)

The “a” stands for “alpha channel”. It represents transparency and is a value from 0 to 1. Following is an example of what this capability enables. Just play with the sliders:

Behind the scenes, the color value is simply being set to the following dynamic expression…

dynamic-color

This opens the possibility of controlling the color and/or transparency of UI elements based on numeric data from your app. Pretty cool.

:slightly_smiling_face:

4 Likes
2

This is really neat and helps a lot. Thanks for posting :slight_smile:

1 Like
3

Glad you found it useful.

4

This is really interesting, especially the dynamic transparency!
Thanks for your time sharing this

1 Like